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

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

موضوع: افکت Box-Shadow به سبکی جدید و فوق العاده زیبا !

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 14.0.1
    میزان امتیاز
    80

    پیش فرض افکت Box-Shadow به سبکی جدید و فوق العاده زیبا !

    درود با یک آموزش اختصاصی و زیبا در خدمت شما هستیم

    شما میتونید نمونه این shadow رو جای دیگه هم ببینید اما تا اونجا که من دیدم کد ما از همه کوچیک تر و جمع و جور تر و زیباتره !
    دمو : Pure CSS Lifted Shadow - jsFiddle

    __________________________________________________ _________________

    سلکتور after برای سایه سمت چپ و سلکتور before برای سایه سمت راست در نظر گرفته شده .

    ما در اینجا با استفاده از این دو سلکتور دو تا مستطیل درست کردیم و یکم چرخوندیمشون تا سایشون با سایه اصلی این شکل رو بسازه .
    __________________________________________________ _________________

    استایل ها :
    کد:
    .saye
    {
       width:300px;
       height:100px;
       background-color:#8AD0EF;
       -webkit-box-shadow: 0px 12px 5px -10px #888888;
       -moz-box-shadow: 0px 12px 5px -10px #888888;
       box-shadow: 0px 12px 5px -10px #888888;
       position:relative;
       -moz-border-radius:10px;
       -webkit-border-radius:10px;
       border-radius:10px;
    }
    .saye:after {
       background:#888888;
       content: "";
       z-index: -1;
       position: absolute;
       left: 10px;
       top:47px;
       width: 100px;
       height: 50px;
       -webkit-box-shadow: 0px 5px 5px #888888;
       -moz-box-shadow: 0px 5px 5px #888888;
       box-shadow: 0px 5px 5px #888888;
       -webkit-transform:rotate(-8deg);  
       -moz-transform:rotate(-8deg);  
       -ms-transform:rotate(-8deg);  
       -o-transform:rotate(-8deg);
       transform:rotate(-8deg);
    }.saye:before {
       background:#888888;
       content: "";
       z-index: -1;
       position: absolute;
       right: 10px;
       top:47px;
       width: 100px;
       height: 50px;
       -webkit-box-shadow: 0px 5px 5px #888888;
       -moz-box-shadow: 0px 5px 5px #888888;
       box-shadow: 0px 5px 5px #888888;
       -webkit-transform:rotate(8deg);  
       -moz-transform:rotate(8deg);  
       -ms-transform:rotate(8deg);  
       -o-transform:rotate(8deg);
       transform:rotate(8deg);
    }
    و سورس :
    کد:
    <div class="saye"><p>وی بی ایران اولین و تنها مرجع ویبولتین در ایران</p></div>
    موفق باشید
    ویرایش توسط jcs.w : 2012/08/27 در ساعت 08:55 PM

    7 تشکر توسط:

    Retired Mod <




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

  3. Top | #2
    مدیر بازنشته

    تاریخ عضویت
    Dec 2011
    ورژن ویبولتین
    4.2
    نوشته ها
    783
    مورد پسند
    1,638 بار
    نوشته های وبلاگ
    3
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 14.0.1
    میزان امتیاز
    115

    پیش فرض

    بسیار عالیه احسنت خیلی به کارم میاد

    کاربر مقابل از Mr.Mostafa بابت این پست مفید تشکر کرده است:

    ا م ض ا

  4. Top | #3
    مدیر بازنشته

    تاریخ عضویت
    Jul 2011
    ورژن ویبولتین
    4.2.2
    نوشته ها
    550
    مورد پسند
    1,539 بار
    اطلاعات
    Mac OS X 10.8.1 Safari 6.0
    میزان امتیاز
    92

    پیش فرض

    واقعا دنبال این بودم
    ایول

    کاربر مقابل از Arianismmm بابت این پست مفید تشکر کرده است:

    انجمن تخصصی آيفون
    The First And Biggest Persian Apple Forums

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

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

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

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

  1. پاسخ: 35
    آخرين نوشته: 2014/03/30, 11:21 AM
  2. پک درجات VB Shadow - اختصاصی وی بی ایران
    توسط MR.Javad در انجمن پک درجه های کاربری
    پاسخ: 2
    آخرين نوشته: 2012/08/21, 07:56 PM
  3. سئوال در رابطه با shadow
    توسط msk در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/07/18, 09:48 AM
  4. قرار دادن Box-Shadow به سبکی جدید .
    توسط Arianismmm در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/07/09, 03:40 PM
  5. پاسخ: 40
    آخرين نوشته: 2012/01/28, 07:03 PM

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

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

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

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

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