نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3759
تاریخ بروزرسانی ۳۰ بهمن ۱۴۰۰

معرفی 10 افکت css

معرفی css

در این مقاله تیم طراحی سایت اصفهان وب یار قصد دارد شما را با 10 افکت css آشنا کند. css زبانی برای استایل دهی به عناصر html است که به کمک آن می توانید به زیباسازی صفحات وب بپردازید. هنگامی که تگ هایی مانند <font> به  html اضافه شدند، توسعه دهندگان وب را دچار نگرانی کرد؛ چرا که اضافه کردن رنگ و فونت در سایت های بزرگ در هر بخشی از صفحه بسیار زمان بر بود. برای حل همین مشکل، کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد.

با امکاناتی که css در اختیارمان قرار می دهد می توانیم طرح های بسیار زیبایی در صفحات سایت ایجاد کنیم. در این مقاله 10 افکت css را در اختیار شما دوستان وب یار قرار می دهیم. با ما همراه باشید تا قدرت  css را به شما نشان دهیم.

 

1- تصویر سه بعدی

ممکن است در بعضی از سایت ها دیده باشید که وقتی موس را روی تصویر می برید، تصویر به صورت سه بعدی در می آید و متنی که در پشت آن پنهان شده به نمایش در می آید. در این قسمت می خواهیم این افکت زیبا را با کدهای html و css ایجاد کنیم بدون این که از کد جاوا اسکریپت استفاده نماییم.

کد html

کد css

نتیجه ی کد بالا را می توانید در تصویر زیر مشاهده کنید.

 

افکت css

 

2- افکت css برای دکمه ها

قبلاً برای این که به کاربر نشان دهیم کدام قسمت قابل کلیک کردن است، رنگ متن را عوض می کردیم. ولی امروزه با افکت css می توانیم یک دکمه ی زیبا طراحی کنیم.

استایل دهی به دکمه ها (button) به خلاقیت نیاز دارد در این مطلب یک افکت css زیبا برای دکمه ها به نمایش گذاشته شده که کد آن را برای شما قرار می دهیم.

کد html

کد css

نتیجه به صورت زیر است :

 

افکت css

 

3- ایجاد صفحه 404

یکی از ملاک های گوگل برای سئو سایت ، داشتن صفحه 404 می باشد ما در این قسمت یک نمونه کد css برای طراحی صفحه 404 قرار دادیم که بتوانید از آن ایده بگیرید.

کد html

کد css

نتیجه را در تصویر زیر می توانید مشاهده کنید.

 

افکت css

 

4- like و dislike

لایک و دیس لایک نظرات یکی از اصلی ترین راه های برقراری ارتباط کاربران با سایت است. بنابراین اگر تصمیم دارید از این امکان در سایت خود استفاده کنید در زیر یک نمونه کد برای استایل دهی به like و dislike قرار داده شده است.

کد html

کد css

نتیجه به صورت زیر خواهد بود.

 

افکت css

 

5- منو

هیچ سایتی را نمی توان بدون منو پیدا کرد. کدنویسی این منوها  معمولاً با HTML و CSS انجام می شود. در این  مقاله یک منو را آماده کرده ایم که فقط با کدهای css طراحی شده و هیچ گونه کد جاوا اسکریپت داخل آن استفاده نشده است تا در همه ی مرورگر ها بدون هیچ مشکلی نمایش داده شود.

کد html

کد css

خروجی کد به صورت زیر است.

 

افکت css

 

6- افکت css برای تصاویر

در این قسمت یک افکت css زیبا برای تصاویر قرار داده شده است  که وقتی موس را روی تصویر می برید به یک حالت فوق العاده جذاب در می آید. این افکت ها با CSS Transitions و Transform ایجاد شده اند و از هیچ کد JavaScript  در آن ها استفاده نشده است تا روی مرورگرهای بیشتری بدون مشکل اجرا شوند.

کد html

کد css

اجرای کد بالا به صورت زیر است.

 

css برای تصاویر

 

7- hover تصاویر

زمانی که نشانگر موس را روی تصویر می برید، یعنی تصویر hover شده است. در این قسمت یک افکت css برای تصویر قرار داده شده است تا زمانی که تصویر hover می شود، تصویر کم رنگ تر شده و یک متن روی آن نمایش داده شود. زمانی هم که موس را از روی تصویر بردارید دوباره می توانید تصویر را به حالت اولیه مشاهده کنید.

کد html

کد css

خروجی کد

 

افکت css

 

8-  ترکیب انیمیشن و فیلترها

شما می توانید فیلتر های متعدد را  با انیمیشن ها ترکیب کنید و افکت های فوق العاده ای را برای تصاویر ایجاد نمایید. یک نمونه از ترکیب انیمیشن و فیلتر را برای شما قرار داده ایم که شما می توانید کد آن را در زیر مشاهده نمایید.

کد html

کد css

خروجی کد

 

افکت css

 

9 – تغییر رنگ تصویر به خاکستری با استفاده از css

می توانید با قطعه کد زیر تصاویرتان را به رنگ خاکستری در بیاورید. هرچه مقدار grayscale بیشتر شود، تصویر به رنگ خاکستری نزدیک تر می شود.

خروجی کد بالا

 

افکت css

 

10 – چراغ چشمک زن با css

این افکت فوق العاده زیبا به این صورت است که انگار یک چراغ چشمک زن درون متن قرار گرفته است. نکته ی قابل توجه این جاست که این افکت بدون هیچ کد جاوا اسکریپت ایجاد شده است.

کد html

کد css

خروجی کد را می توانید در تصویر مشاهده کنید.

 

افکت css

 

نتیجه

در این آموزش با 10 افکت css از جمله  سه بعدی کردن تصویر، تغییر رنگ تصویر، طراحی صفحه 404 و موارد دیگر آشنا شدید که احتمالاً ذهنیت شما را در مورد css تغییر داده است. افکت اسکرولی css بخش دیگری از افکت های css است که در مقاله ای دیگر برای شما توضیح خواهیم داد. برای آگاه شدن از دیگر آموزش های دیگر طراحی سایت وب یار از به صفحه ی اینستاگرام وب یار بپویندید.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.