تکنیک های مدرن و پیشرفته CSS

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

متغیرهای سفارشی

متغیرهای CSS در هنگام ساخت یک وب سایت، باعث کاهش قابل توجهی در زمان انجام این کار می شوند. به سادگی متغیرهای خود را تعریف کرده و از آن ها به همان اندازه که در پروژه خود نیاز است استفاده کنید. کد زیر که یکی از کدهای این زبان است باید برای بسیاری از شما آشنا باشد، اما اگر به اطلاعات بیشتر نیاز دارید، به ادامه این مطالب توجه کنید.

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

محو شدن رنگ در حالت hover

یک راه بسیار آسان برای ایجاد لینک (یا هر عنصر دیگر) بهتر است.

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS


بیشتر بخوانید »»» مفاهیم اولیه سئو


دونات اسپینر Pure CSS

این اسپینر ها بسیار محبوب هستند که اجازه می دهد بازدیدکنندگان متوجه شوند محتوای در حال بارگذاری است. شما ممکن است وسوسه شوید از یک تصویر استفاده کنید، اما از لحاظ سرعت وب سایت بهتر است که این کار را با استفاده از CSS انجام دهید. در اینجا هیچ چیزی پیچیده نیست، فقط ابتدا به HTML نگاهی بیاندازیم:

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

… و CSS مربوطه.

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

محتوای کاملا وسط چین با استفاده از Flexbox

تنظیم بسیار آسان محدوده محتوا به صورت عمودی و افقی با استفاده از صفحه نمایش: انعطاف پذیری. در اینجا نحوه انجام این کار، با استفاده از برخی از HTML ها نشان داده شده است:

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

… و CSS مربوطه:

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

شبکه پاسخگو

صفحه نمایش: شبکه باعث می شود که شبکه ها به آسانی ساخته شوند. با استفاده از واحد FR، شبکه ها می توانند پاسخگو باشند تا بتوانند به هر نوع نمایشگر متصل شوند. در اینجا چگونگی شباهت HTML ما به این شکل است: 

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

و CSS:

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

متن منحنی در اطراف یک تصویر شناور

shape-outside یک ویژگی CSS است که اجازه می دهد تا اشکال هندسی را تنظیم کند تا منطقه ای را برای متن ایجاد کند. 
تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

متن غیر قابل انتخاب

اگر به دلایلی نمی خواهید بازدیدکنندگان بتوانند بخش خاصی از محتوای وب سایت شما را انتخاب کنند، می توانید از CSS استفاده کنید. اگرچه متن شما همچنان قابل انتخاب است اما قابل کپی نیست و فقط نمایش داده می شود که دلیل این کار بیشتر برای جلوگیری از کپی کاری و نقض قانون کپی رایت است. اینجا کد HTML ما است:
تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

و CSS:

تکنیک های مدرن و پیشرفته CSS

تکنیک های مدرن و پیشرفته CSS

منبع: طراحان وب تبریز

دیگر مقالات مفید سایت طراحان وب تبریز:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست