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

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

موضوع: آموزش محو کردن [Blur] متن با CSS3

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    May 2010
    ورژن ویبولتین
    4.2
    سن
    22
    نوشته ها
    3,417
    مورد پسند
    8,062 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 8 Chrome 19.0.1084.52
    میزان امتیاز
    523

    پیش فرض آموزش محو کردن [Blur] متن با CSS3

    درود .
    با یک تکنیک ساده , در عین حال کاربردی در CSS3 در خدمت شما هستیم .
    خب مثلاً چنین نوشته ایی رو داریم :

    و CSS ها هم به این صورت داریم :
    کد:
    .Ramin {
    font-size: 24pt;
    color: #00A3EF;
    font-weight: normal;
    }

    خب به زبان ساده برای محو کردن یک نوشته ؛ کافیه رنگ نوشته رو transparent کنید و برای نوشته یک سایه قرار بدید !
    در این صورت در تصویر داریم :

    کد های CSS هم به این صورت خواهد بود :

    کد:
    .Ramin {
    font-size: 24pt;
    color: transparent;
    text-shadow: 0px 0px 10px #00A3EF;
    font-weight: normal;
    }

    به خط های قرمز توجه کنید .

    color: transparent;
    text-shadow: 0px 0px 10px #00A3EF;


    همچنین میتونید افکت محو شدگی رو در Hover قرار بدید !

    به این ترتیب وقتی موس روی نوسته میره , به صورت محو شده در میاد !

    کد CSS به این صورت خواهد بود :
    کد:
    
    .Ramin {
    font-size: 24pt;
    color: 
    #00A3EF;
    font-weight: normal;
    }
    .Ramin:hover {
    color: transparent;
    text-shadow: 0px 0px 10px #00A3EF;
    font-weight: normal;
    }

    برای بیشتر یا کم تر شدن محو شدگی , کافیه کدد 10 رو در text shadow کم یا زیاد کنید ...

    موفق باشید .

    منبع : وی بی ایران !


    ویرایش توسط Mr.Ramin : 2012/06/30 در ساعت 11:05 PM

    10 تشکر توسط:






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

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    Mar 2012
    ورژن ویبولتین
    4.1.11
    نوشته ها
    412
    مورد پسند
    284 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 12.0
    میزان امتیاز
    51

    پیش فرض

    خیلی جالب بود. سایت همیار وردپرس از این روش برای منو های بالایی سایتش استفاده می کنه!

  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    May 2010
    ورژن ویبولتین
    4.2
    سن
    22
    نوشته ها
    3,417
    مورد پسند
    8,062 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 8 Chrome 19.0.1084.52
    میزان امتیاز
    523

    پیش فرض

    چک نکردم ولی از شکلش معلومه , بله ...

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



  5. Top | #4
    مدیریت کل سایت

    تاریخ عضویت
    Aug 2009
    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,681
    مورد پسند
    54,798 بار
    نوشته های وبلاگ
    14
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 19.0.1084.56
    میزان امتیاز
    3117

    پیش فرض

    همیار وردپرس از این روش برای منو های بالایی سایتش استفاده می کنه!
    بله ، با درجه 4 پیکسل

    3 تشکر توسط:


  6. Top | #5
    کاربر سایت

    تاریخ عضویت
    Mar 2012
    ورژن ویبولتین
    4.1.11
    نوشته ها
    412
    مورد پسند
    284 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 12.0
    میزان امتیاز
    51

    پیش فرض

    جمله ام خبری بود ها! :">

  7. Top | #6
    پاسخگو و راهنمای سایت

    تاریخ عضویت
    Jan 2011
    ورژن ویبولتین
    ندارم :)
    نوشته ها
    3,396
    مورد پسند
    3,162 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows XP Firefox 17.0
    میزان امتیاز
    410

    پیش فرض

    میشه لینک های ویبولتینو همشو یه کاری کرد این روش عمل کنه ؟ چجوری ؟


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

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

    پیش فرض

    نقل قول نوشته اصلی توسط JawGir نمایش پست ها
    میشه لینک های ویبولتینو همشو یه کاری کرد این روش عمل کنه ؟ چجوری ؟
    additional.css
    کد:
    a:link:hover {color: transparent; text-shadow: 0px 0px 10px #00A3EF; font-weight: normal;}
    Retired Mod <

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

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

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

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

  1. پاسخ: 13
    آخرين نوشته: 2014/06/17, 10:58 AM
  2. درجات کاربری با استفاده از css3 و html
    توسط uni در انجمن پک درجه های کاربری
    پاسخ: 7
    آخرين نوشته: 2012/06/28, 05:32 PM
  3. با CSS3 و JQuery ساعت عقربه شمار بسازید
    توسط Dante در انجمن آموزش های وردپرس
    پاسخ: 0
    آخرين نوشته: 2012/06/01, 06:39 PM
  4. -XMedia Darkness- with *CSS3 Fonts* - Vb English Style - 4.1.12
    توسط P4NiSh3R در انجمن استایل انگلیسی 4.1 | English Style
    پاسخ: 2
    آخرين نوشته: 2012/05/10, 11:04 PM
  5. پاسخ: 1
    آخرين نوشته: 2011/04/27, 05:50 PM

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

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

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

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

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