فونت و تایپوگرافی زیبا باعث می شود طراحی شما جذاب به نظر برسد . در طراحی وب CSS کمک می کند استایل مورد نظر را که شامل افکت های مختلفمی شود به فونت یا تایپوگرافی اعمال کنیم .کلا با CSS می توانید متن ها را ببرید یا حرکت دهید و افکت را چاشنی کار کنید .

و برای نشان دادن این امر ما 15 افکت متن چشم نواز و جالب را گرد هم آورده ایم که با CSS انجام شده اند (بعضی از آنها کمی از JavaScript هم کمک گرفته اند)

حرکت Border متن

Yoksel توانسته است با استفاده از CSS و SVG لبه های متن را با رنگ آمیزی زیبایی به حرکت در بیاورد .نتیجه کار عالی است !

See the Pen Elastic stroke CSS + SVG by yoksel (@yoksel) on CodePen.

افکت وقتی آنتن خراب می شد!

قدیما وقتی آنتن تی وی های آنالوگ خراب می شد تصویر حرکتی مانند این افکت داشت .Dirk Weber این انیمیشن زیبا را فقط با CSS و فیلتر SVG  درست کرده است . البته شبیه لوگوی بازی زیبای Watch Dog هم هست

See the Pen SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.

لوگوی Shop Talk

لوگوی Shop Talk این بار توسط Hugo ولی فقط با CSS بازطراحی شده است . لوگو کاملا شبیه لوگوی اصلی است حتی تکسچر های آن هم شبیه است .

See the Pen Shop Talk logo made in CSS by Hugo Darby-Brown (@hugo) on CodePen.

افکت چاک خوردن

این ایده توسط Robet Messerle حس بریده شدن توسط چاقو یا قمه یا ساتور را تداعی می کند و با کمتر از 70 خط CSS پیاده سازی شده است

See the Pen Slashed CSS Effect by Robert Messerle (@robertmesserle) on CodePen.

سایه فوق العاده

افکت سایه بلندی که به متن اضافه می شود ُ‌فقط هم با CSS ! کار کار Juan Brujo است که چهار افکت دیگر هم ساخته ولی این یکی واقعا هیجان انگیزه

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.

افکت وهم انگیز متن

فرض کنید این افکت را در یک سایت مربوط به مساپل فراطبیعی ببینید !‌ Andreas این افکت مه آلود و وهم انگیز سینمایی را ساخته ولی فقط با  مرورگرهایی که از موتور Webkit استفاده می کنند کار می کند

See the Pen Foggy text effect by andreas_pr (@andreas_pr) on CodePen.

افکت ماسک SVG

می رسیم به افکت ماسک کردن متن روی عکس بزرگ پس زمینه که به نظر من زیباترین مورد لیست ماست که توسط Marco Barria ایجاد شده است .فقط با CSS + SVG

See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.

انیمیشن متن کرکره ای

Yoann این افکت متنی زیبا را درست کرده است . بدون استفاده از JavaScript

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

متن سه بعدی زیبا

این افکت متن سه بعدی زیبا که توسط ThatGuySam درست شده نتیجه بازی با خصیصه text-shadow در css است ولی نتیجه واقعا ساده و عالی شده است

See the Pen Hit The Floor Text Effect by ThatGuySam (@ThatGuySam) on CodePen.

عکس داخل متن

jintos سعی کرده است با استفاده از خصیصه ای مثل -webkit-background-clip عکس را در داخل متن نمایش دهد انگار در پشت متن عکس بزرگتری قرار دارد که دیده نمی شود. او با استفاده از این متد 16 نمونه جالب را ایجاد کرده است که در پایین می بینید

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.

چراغ چشمک زن

Moklik افکتی را به متن اضافه کرده است که انگار درون متن یک چراغ چشمک زن قرار دارد .همان چراغ هایی که از دور اعلام خظر می کنند

See the Pen CSS Text-FX by moklick (@moklick) on CodePen.

افکت امضا کردن

Gary Hepting انیمیشنی را ایجاد کرده است که امضا کردن را شبیه سازی می کند . اینکار با استفاده از اعمال JavaScript به مسیرهای SVG جهت انیمیشن سازی آن انجام گرفته است

See the Pen Animated signing of signature (SVG paths) by Gary Hepting (@ghepting) on CodePen.

ارتعاش رنگی 404

می توانید صدای این ارتعاشات و لرزش ها را در داخل سرتان بشنوید ؟ به خاطر اینکه این افکت واقعا زیبا و عالی کار شده است . mistic100 این را با استفاده از CSS به علاوه مقداری JavaScript ساخته است

See the Pen Colorful Glitchy 404 by mistic100 (@mistic100) on CodePen.

کیهان

لوگوی کیهان به این صورت بهتر به نظر می رسد . باید نظر آقای شریعتمداری را هم پرسید

See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.

درحال بارگذاری …

یک افکت لودینگ زیبا که با مخفی و نمایان کردن حروف کار می کند

See the Pen ByVYZK by Ian Gloude (@igloude) on CodePen.

منبع