تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 1 از 1

موضوع: [آموزش] سایه ی جعبه در CSS3

  1. Top | #1
    کاندیدای مدیریت

    تاریخ عضویت
    Jan 2012
    ورژن ویبولتین
    5.0.0
    سن
    22
    نوشته ها
    493
    مورد پسند
    822 بار
    نوشته های وبلاگ
    2
    اطلاعات
    Windows XP Firefox 12.0
    میزان امتیاز
    70

    پیش فرض [آموزش] سایه ی جعبه در CSS3

    درود..

    در css میشه به جعبه ها سایه داد !

    به عکس زیر توجه کنید:


    برای سایه دار کردن جعبه بصورت بالا :
    کد:
    .saye1{
    box-shadow: 2px 3px 5px 3px #CCC;
    font-family:tahoma;
    margin-top:100px;
    font-size: 36px;
    width:200px;
    height:100px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color:#666;
    padding:10px;
    }
    2px : مقدار فاصله از چپ و راست (اگه میخواین از چپ فاصله داشته باشه باید عدد منفی بکار ببرید.)
    3px : مقدار فاصله از بالا و پایین (اگه میخواین از بالا فاصله داشته باشه باید عدد منفی بکار ببرید.)
    5px : مقدار تار بودن سایه
    3px : مقدار حجم و توپر بودن سایه
    #CCC : رنگ سایه !


    برای این که سایه از داخل باشه مانند عکس بالا باید inset به کد اضافه کنید:

    کد:
    .saye_vbiran_2{
    box-shadow: 2px 3px 5px 3px #CCC inset;
    font-family:tahoma;
    margin-top:100px;
    font-size: 36px;
    width:200px;
    height:100px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color:#666;
    padding:10px;
    }
    و در آخر در فایل html به این صورت قرار میدهیم:
    کد HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Box-Shadow VBIran</title>
    <style type="text/css">
    
    .saye_vbiran_1{
    -webkit-box-shadow: 2px 3px 5px 3px #CCC;
    box-shadow: 2px 3px 5px 3px #CCC;
    font-family:tahoma;
    margin-top:100px;
    font-size: 36px;
    width:200px;
    height:100px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color:#666;
    padding:10px;
    }
    .saye_vbiran_2{
    -webkit-box-shadow: 2px 3px 5px 3px #CCC inset;
    box-shadow: 2px 3px 5px 3px #CCC inset;
    font-family:tahoma;
    margin-top:100px;
    font-size: 36px;
    width:200px;
    height:100px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color:#666;
    padding:10px;
    }
    </style>
    </head>
    
    <body>
    <center>
    <div class="saye_vbiran_1">VBIran</div>
    <div class="saye_vbiran_2">VBIran</div>
    </center>
    </body>
    </html>
    دمو: Box-Shadow VBIran
    منبع: وی بی ایران

    4 تشکر توسط:

    Instagram: @m3neo
    Facebook:
    @mohsen.neo
    Twitter:
    @m3neo
    My Blog:
    m3n.ir
    ...





  2. گیفت کارت آیتونز

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 13
    آخرين نوشته: 2014/06/17, 10:58 AM
  2. آموزش محو کردن [Blur] تصاویر با CSS3
    توسط Mr.Ramin در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 8
    آخرين نوشته: 2012/09/15, 09:57 PM
  3. آموزش محو کردن [Blur] متن با CSS3
    توسط Mr.Ramin در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 6
    آخرين نوشته: 2012/09/09, 06:47 PM
  4. درجات کاربری با استفاده از css3 و html
    توسط uni در انجمن پک درجه های کاربری
    پاسخ: 7
    آخرين نوشته: 2012/06/28, 05:32 PM
  5. پاسخ: 1
    آخرين نوشته: 2011/04/27, 05:50 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •