فونت و تایپوگرافی زیبا باعث می شود طراحی شما جذاب به نظر برسد . در طراحی وب 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.
درحال بارگذاری …
یک افکت لودینگ زیبا که با مخفی و نمایان کردن حروف کار می کند
سلام مهندس وقت بخیر با تشکر از مطالب مفیدی که قرار دادین،میشه لطفا چند استایل زیبا هم برای تگ input
از نوع file با متن قابل تغیر قرار بدین،ممنون میشم
سلام مهندس وقت بخیر، چرا افکت ها نمایش داده نمیشن؟؟؟؟
سلام
کدهاتون قدیمیه خیلی خلاصه و مفیدترشون هم هست.
ضمناً مثلاً به جای چراغ چمک زن میتونیم یه گیف بسیار کم حجم با متن و حاشیه هر رنگی که بخوایم از طریق ساخت لوگو (سایت های آنلاین – بهترینشون هست https://cooltext.com) بدون نصب نرم افزار بسازیم.
موفق باشید.
میخوام بگم حرف نداره کارتون تمام سایتای گوگل رو گشتم سایت به این تمیزی با این اطلاعات عالی خیلی کمتر دیدم عالیه
سلام
عالی بود
سلام . مرسی لطف دارید
سلام و تشکر از مطلب بسیار زیباتون
من توی سایت وردپرسی چطور میتونم از این کدها استفاده کنم ؟!
سلام . خیلی ممنونم از لطف شما
باید کمی طراحی وب بلد باشید و کدها رو در جای خودشون به صفحه اضافه کنید که روش های مختلف داره
ممنونم از وب سایت عالی و مفیدتون بسیار مطلب فوق العاده بود
موفق باشید
ممنونم از وب سایت عالی و مفیدتون بسیار مطلب فوق العاده بود
مطلب بسیار کاربردی بود
ممنون
موفق باشید
خیلی خوشحالم مفید بوده دوست من
سلام.خسته نباشید.
میشه لطفا واسم توضیح بدید کجا و در چه فایلی این کدها رو کپی کنم که نتیجه دقیقا همین بشه؟
انیمیشن متن کرکره ای خیلی جالبه.ولی متاسفانه نفهمیدم چطوری ازش استفاده کنم میشه فایلهاش رو واسم ایمیل کنید.
ممنون از سایت مفید و جالبتون
سلام . ممنونم
برای استفاده از این کدها کافیه کد های HTML و CSS و احیانا JavaScript هر کدوم رو خواستید کپی کنید و داخل فایل HTML تو کامپیوتر خودتون قرار بدید. فراموش نکنید کدهای CSS رو داخل تگ
عالیه فقط یک سوال متنی که ازجب به راست میادمیره کدش چیه اون که اولی میره بعدمتن دوم میاد رومیگم میاد؟ولیکاراتون عالیه من یکسره دنبال کنننده سایتتون هستم