20 ترفند و تکنیک CSS که هر طراحی باید بداند

دسته بندی محصولات

20 ترفند و تکنیک CSS که هر طراحی باید بداند

1397/09/10 5206
CSS , 4.3 از 16 رای

در دنیای فناوری امروز تکنیک و ترفندهای CSS زیادی وجود دارد که طراحان با استفاده از آن می توانند وب سایت ها را طراحی کنند. اهمیت آگاهی از CSS ثابت شده است.

20 ترفند و تکنیک CSS که هر طراحی باید بداند

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

1. موقعیت ثابت

اگر همیشه می خواهید بدانید یک المان در کجای وب سایت شما قرار دارد، موقعیت قطعی و ثابت (absolute positioning)، کلید عملی کردن آن می باشد. اگر مرورگر خود را به عنوان یک جعبه اتصال بزرگ می دانید، موقعیت ثابت به شما اجازه می دهد این کنترل را داشته باشید که آن المان در کجای جعبه خواهد ماند. از کد دستوری بالا، راست، پایین و چپ همراه با یک مقدار پیکسلی استفاده کنید تا بر جایی که یک المان قرار می گیرد، کنترل داشته باشید.

دستور CSS بالا تعیین می کند که یک المان در موقعیت 20 پیکسلی از لبه های بالا و راست مرورگر شما باقی بماند. همچنین می توانید از موقعیت ثابت در درون یک div استفاده کنید.

 

2. * + سلکتور

* به شما این اختیار را می دهد تا تمام المان های یک سلکتور (selector) خاص را انتخاب کنید. برای مثال، اگر شما *p را استفاده کرده اید و سپس کد دستورهای CSS را به آن اضافه کرده اید، آن عمل برای تمام المان های موجود در سند شما که تگ <p> دارد، اعمال خواهد شد. با این روش می توانید همزمان تغییرات را در بخش های مورد نظر وب سایت خود اعمال کنید.

 

3. متوقف کردن تمام استایل ها

دقت داشته باشید که از این ترفند باید خیلی کم استفاده کنید، چرا که اگر از این دستور برای هر چیزی استفاده کنید، در طولانی مدت با مشکلاتی رو به رو خواهید شد. اما در صورتی که می خواهید بخاطر یک المان خاص یک استایل CSS دیگر را نادیده بگیرید، در دستور css خود بعد از استایل!importatnt استفاده کنید. برای مثال، اگر می خواهید سرفصل های H2 در بخش خاصی از سایت بجای آبی بودن، قرمز باشد، باید از دستور یا کد CSS که در زیر آمده است استفاده کنید:

4. وسط چین

وسط چین گول زننده است، چون به چیزی که می خواهید وسط باشد بستگی دارد. بیایید نگاهی به CSS آیتم هایی که بر اساس محتوا باید وسط باشند، بیندازیم.

متن

متن با استفاده از text-align:center; در وسط قرار می گیرد. اگر می خواهید در یک سمت قرار گیرد، به جای وسط چین از چپ و راست استفاده کنید.

محتوا

div (یا هر المان دیگری) می تواند با اضافه کردن حالت block و استفاده از حاشیه های خودکار (auto margins) در وسط قرار بگیرد. کد دستوری CSS به شکل زیر خواهد بود.

در تصویر بالا به این علت برای عرض، مقدار «هرچیز کمتر از 100% یا anything under 100%» گذاشته شده است که اگر مقدار آن 100% باشد، در آن زمان تمام پهنا را در بر می گیرد و دیگر نیازی به وسط گذاری نبود. بهتر است یک عرض ثابت مثل 60% یا 550 پیکسل یا غیره داشته باشیم.

5. تنظیم عمودی (برای یک خط متن)

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

6. افکت های هاور

از این تکنیک CSS برای دکمه ها، لینک های متن، بخش هایی از سایت، آیکون ها و غیره استفاده می شود. اگر می خواهید وقتی یک فرد موس را بر روی چیزی تکان می دهد رنگ آن تغییر پیدا کند، از همان کد دستوری CSS استفاده کنید، اما :hover را به آن اضافه کنید و استایل آن را تغییر دهید. برای مثال:

این دستور این چنین عمل می کند که وقتی فردی بر روی تگ سرفصل شما (h2) می رود، رنگ آن از مشکی به قرمز تغییر می کند. موضوع جالب درباره ی استفاده از :hover این است که دیگر نیازی نیست بار دیگر اندازه ی فونت را مشخص کنید (اگر نمی خواهید تغییر دهید). این دستور فقط آن چیزی که شما مشخص می کنید را تغییر می دهد.

Transition

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

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

7. وضعیت لینک ها

وضعیت لینک ها موضوعی است که بسیاری از طراحان آن استایل ها را فراموش می کنند و باعث مشکلات قابلیت استفاده برای کاربران می شوند. کلاس کاذب :link تمام لینک هایی که هنوز بر روی آنها کلیک نشده است را کنترل می کند. کلاس کاذب :visited کنترل تمام لینک هایی که شما در حال حاضر بازدید کرده اید را به دست می گیرد. این دستور به بازدیدکنندگان وب سایت می گوید که تا به حال در کجای وب سایت بوده اند و از کجای آن هنوز بازدید نکرده اند.

8. تصاویر را به راحتی اندازه کنید.

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

این کد دستور CSS به این معنی است که حداکثر تصویر می تواند 100% باشد و ارتفاع آن بر اساس عرض عکس به طور خودکار محاسبه خواهد شد. در بعضی از موارد، شاید مجبور باشید عرض تصویر را 100% مشخص کنید.

9. کنترل المان های یک بخش

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

10. Direct Children

اگر این ترفند را از ابتدای آشنایی با CSS بدانید، بسیار خوب خواهد بود. این دستور زمان زیادی را برای شما ذخیره خواهد کرد! از > استفاده کنید تا مستقیماً موارد تحت تأثیر یک المان را انتخاب کنید. برای مثال:

این دستور CSS تمام عناصر لینک فعالی که سریعاً تحت Footer ID هستند را انتخاب می کند و چیزهایی دیگری که در فوتر قرار دارد را انتخاب نمی کند. از این دستور می توان برای ایجاد منوهای حرفه ای استفاده کرد.

المان های بچه خاص

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

کد CSS بالا دومین آیتم لیست را مورد هدف قرار می دهد و آن را بولد کرده، زیر آن را خط می کشد و به رنگ آبی در می آورد. اگر بعد از عدد یک «n» در پرانتز اضافه کنید، می توانید تمام آیتم های دوم لیست را مورد هدف قرار دهید و این تغییر را روی آن اعمال کنید. تصویر کنید می خواهید هر یک خط در میان را برای راحت خواندن مطلب توسط کاربران متفاوت کنید. کد CSS آن اینگونه خواهد بود:

11. اجرای کد CSS به چندین کلاس یا سلکتور

برای مثال می خواهید یک مرز یکسان دور تمام تصاویر، بخش بلاگ و سایدبار اضافه کنید. نیازی نیست همان کد دستور CSS را 3 بار بنویسید. فقط کافی است آن آیتم ها را لیست کرده و با ویرگول (,) جدا کنید. برای مثال:

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

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

Box-sizing:border style;12. 

این کد دستوری CSS مورد علاقه ی بسیاری از طراحان وب می باشد، چرا که مشکلات حاشیه ی داخلی (padding) و صفحه آرایی (layout) را حل می کند. اساساً وقتی شما یک باکس را با یک عرض خاص مشخص می کنید و به آن حاشیه داخلی اضافه می کنید، این حاشیه اندازه باکس را زیاد می کند. هر چند با Box-sizing:border style; این امر منتفی می شود و باکس ها همان اندازه هایی که باید باشند باقی می مانند.

:before.13

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

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

:after.14

مانند سلکتور :before، می توانید از دستور :after برای اضافه کردن محتوا به المان های خاص استفاده کنید. یک استفاده عملی از تکنیک، اضافه کردن «read more» بعد از هر جدا کردن در بلاگ می باشد. این دستور را می توانید به این شکل اجرا کنید.

15. محتوا

content یکی از ویژگی خاص CSS است. شما زمانی می توانید از این ویژگی استفاده کنید که قصد اضافه کردن یک المان را دارید و می خواهید کنترل آن را به دست بگیرید. بیشترین کاربرد این دستور، در زمان ایجاد یک آیکون از یک فونت آیکون در یک محل خاص می باشد. در مثال بالا، می توانید ببینید متنی که می خواهید اضافه کنید را باید در گیومه قرار دهید.

16. ریسِت CSS

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

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

17. حروف بزرگ اولین پاراگراف

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

برای مثال:

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

18. نمایش نوشته ها به صورت تماماً حروف بزرگ، تماماً حروف کوچک یا فقط بزرگ نوشتن حرف اول کلمات

کار بیهوده ای است که یک بخش کامل را با حروف بزرگ بنویسید. تصور کنید زمانی که فرمت وب سایت تغییر می کند یا به روز رسانی می شود، ملزم هستید تمام متن را اصلاح کنید. در عوض، از تکنیک CSS زیر استفاده کنید تا متن را به فرمت خاص تبدیل کنید. هدف این دستور css تگ h2می باشد.

  • h2 { text-transform: uppercase; } – all caps
  • h2 { text-transform: lowercase; } – all lowercase
  • h2 { text-transform: capitalize; } – capitalizes the 1st letter of each word.

19. ارتفاع عمودی صفحه

گاهی اوقات بدون توجه به سایز صفحه نمایش، می خواهید یک بخش، کل صفحه نمایش را پر کند. می توانید این کار را با دستور vh یا ارتفاع نمایش کنترل کنید. عدد قبل از vh یک درصد است، بنابراین اگر می خواهید آن متن 100% مرورگر شما را پوشش دهد، باید آن را 100 تنظیم کنید. شاید بهتر باشد مقدار را 85% قرار دهید تا مطابق با یک منو ثابت باشد.

موضوعی که باید به آن اهمیت دهید، کدهای مربوط به فیلم ها برای صفحه نمایش های خاص یا چرخش ها (مانند گوشی ها در حالت چرخش) می باشد. مثلاً اگر تصویر یک منظره را بکشید تا مطابق با حالت چرخش باشد؛ قطعاً خوب به نظر نخواهد رسید.

20. مدل لینک های شماره تلفن

اگر یک لینک دارید که در زمان انگشت زدن کاربر بر روی آن (در گوشی) با یک شماره تماس می گیرد، احتمالاً برای استایل دادن به آن با استفاده از سلکتور لینک فعال قدیمی به مشکل خواهید خورد. برای این مسئله از کد دستور CSS زیر استفاده کنید:

4.3 از 16 رای

نویسنده : تم شاپ

بزرگترین مرجع خرید و فروش قالب های حرفه ای

اگر می‌خواهید مقالات ویژه ما و قالب های رایگان را در ایمیل خود داشته باشید ، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد اعضای خانواده تم شاپ 20391 نفر

نظرات کاربران

1 نظر

درج نظر مخصوص اعضای سایت می باشد .

gorginm82 ارسال شده در 1399/07/13 - 10:33

عالی

1
20 ترفند و تکنیک CSS که هر طراحی باید بداند بازبینی شده توسط تم شاپ در 12/1/2018. 20 ترفند و تکنیک CSS که هر طراحی باید بداند در دنیای فناوری امروز تکنیک و ترفندهای CSS زیادی وجود دارد که طراحان با استفاده از آن می توانند وب سایت ها را طراحی کنند. اهمیت آگاهی از CSS ثابت شده است. رتبه : 4.3