تبلیغات

آخرین ارسال های انجمن

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788

12 3 4 5 6 7 8 9 10 11 »

افکت فول css متنی که کوچک و بزرگ می شود

          حمیدرضا 
            بازدید : 1957
          شنبه 30 خرداد 1394
           نظرات (0)
        

این یک افکت فول سی اس اس است که شما با استفاده از آن می توانید به متن مورد نظر خود حالت متحرک بدهید. این افکت به متن تغییر اندازه می دهد و آن را مدام کوچک و بزرگ می کند. ابتدا متن در اندازه ی اصلی خودش خواهد بود و بعد از 0.5ثانیه به اندازه ی دوبرابر می رسد. شما می توانید با دنبال کردن توضیحاتی که در پایین قرار داده شده است ، این زمان ها و اندازه ها را به دلخواه خود تغییر دهید. این افکت با استفاده از animation در سی اس اس ایجاد شده است. شما می توانید اطلاعاتی را در این باره در مطلب آموزش ایجاد چرخش مداوم با css به دست آورید.

این افکت گزینه ی بسیاری مناسبی برای جلب توجه کاربران به یک نقطه ی خاص است. شما هم می توانید از آن برای زیباسازی وبلاگ یا سایت خود استفاده کنید و هم برای تبلیغات.

پیشنهاد می کنم اگر دوستدار یادگیری هستید و تا حدی با کد های سی اس اس آشنایی دارید سعی کنید کد ها را متوجه بشوید. من کد ها را پیچیده ننوشته ام و اگر بخواهید احتمالا می توانید.

برای استفاده از این افکت باید ابتدا یک فایل css را در صفحه ی خود وارد کنید. برای این کار ، کد زیر را در بین <head> و </head> قرار دهید:

<<<code>>>

<link rel="stylesheet" href="http://up.toolstheme.ir/view/306047/text-size-effect.css" />

<<</code>>>

بعد از این که کد بالا را در صفحه ی مورد نظر خود وارد کردید ، به راحتی می توانید با دادن کلاس زیر به هر شیئی در صفحه ، به متن داخل آن شی افکت بدهید.

<<<code>>>

text-size-effect

example: <div class="text-size-effect">متنی با این افکت</div>

<<</code>>>

اگر از این چیز ها سر در نمی آورید ، خیلی راحت و آسان با قرار دادن قسمت درشت (bold) کد بالا در قالب خود این افکت را ایجاد کنید. به جای "متنی با این افکت" هر متنی که دوست دارید وارد کنید.

برای دیدن دموی این کد به همراه سورس کد سی اس اس روی لینک زیر کلیک کنید.

دموساز