9 ویژگی مهم CSS در طراحی وب

خانه » بلاگ » css » 9 ویژگی مهم CSS در طراحی وب

در این آموزش از تیم وب یار شما را با 9 ویژگی مهم CSS در طراحی وب که دانستن آن برای هر طراح سایت الزامی است آشنا می‌کنیم.

9 ویژگی مهم CSS در طراحی وب

در طی یادگیری css به طور کامل با تمامی ویژگی های Css آشنا شدیم و یادگرفتیم که هر کدام از این ویژگی ها چه کاربردی دارند و چگونه باید از انها استفاده کنیم،در این مقاله نیز میخواهیم به صورت کاملا خلاصه با 9 ویژگی کاربردی css آشنا شویم .

1) font-face    

یکی از ویژگی های  CSS3 که درسال های اخیر باعث تحولاتی در بخش طراحی وب شده  font-faceاست. این ویژگی به ما  این امکان را میدهد  که هر فونتی که می خواهیم ، به راحتی با فرمت های مختلف و تنظیمات دلخواه در هر بخش از کدCSS  استفاده کنیم. از این ویژگی برای انتخاب ازبین چندین هزار فونت رایگان ، برای صفحه وب خود استفاده کنید.

@font-face { font-family: Blackout; src: url(“assests/blackout.ttf”) format(“truetype”); }

2)  media

از کوئری های media برای ساخت صفحات واکنش گرا یا طراحی وبسایت بر اساس شرایط دستگاه مورد استفاده قرار میگیرند. با استفاده از کوئری media  و ویژگی min-width  ما می توانیم عناصر صفحه ی وب را به شکل بهتری و با توجه به شرایط موجود به نمایش کاربر در بیاورید.

@media screen and (max-width: 960px) { }

3)   clearfix

استفاده از clearfix   برای مواقعی که overflow: hidden کار نمیکند, جایگزین خوبی است . نکته ای که اینجا حائز اهمیت است ، این است که لازم نیست از نام کلاس  clearfix   استفاده کنید, فقط کافیست  کد زیر را در یکی از عناصر html مورد نظر اعمال کنید.

.clearfix:after {

content: “.”;

display: block;

clear: both;

visibility: hidden;

line-height: 0; height: 0;

}

4)   overflow:hidden و لیست کامل ویژگی های CSS

ساده ترین راه کار برای پاک کردن float ها, استفاده از overflow: hidden در container عنصری که float  شده است. این کد بار اضافی به استایل شما اضافه نمیکنه و در بیشتر مواقع بدرستی کار می کند.

.container {

overflow: hidden; }

5) color:rgba

تصاویر PNG  معمولا برای ساخت افکت های transparency در طراحی وب استفاده می شوند. اما یکی از قابلیت های مهم CSS یعنی حالت رنگ RGBa باعث شده قابلیت transparency  به راحتی وارد CSS شود. استفاده از RGBa به جای مقدار hex به شما اجازه میدهد یک رنگ را با استفاده از رنگ های  قرمز, سبز و آبی انتخاب کنید و به راحتی میزان تاری یا opacity رنگ را مشخص کنید. مثلا از 0.5 برای 50% opacity استفاده میشود.

.btn {

color: rgba(0,0,0,0.5);

}

6)   background-size

یکی از 9 ویژگی مهم CSS در طراحی وب ، ویژگی فوق العاده background-size است که با پشتیبانی مرورگرهای معروف, گسترش پیدا کرده. اوایل استفاده از بک گراند ها با سایز مورد نظر و در مکان دلخواه بسیار سخت و شایدم غیرممکن بود اما امروزه با استفاده از یک خط کد می شود سایز بک گراند را عوض کرد و به شکل دلخواه درآورد. با بهره بردن از این نکته می توانید بک گراند های کامل با افکت های تصویری بسازید.

body {

background: url(image.jpg) no-repeat;

background-size: 100%;

}

7) margin: 0 auto  

تعریف margin: 0 auto از نکات مهمی است که ما باید برای کار کردن با CSS بدانیم. این شگفت انگیزه که هیچ تعریف خاصی برای وسط چین کردن یک عنصر به تعاریف css اضافه نشده. اما برای اینکار میتونید کد margin : 0 auto را به عنصر مورد نظرتون اضافه کنید و اون رو در بلاک موجود وسط چین کنید.

#container { margin: 0 auto; }

8)   [input[“type=”text

استفاده از این ویژگی باعث می شود میزان مهارت CSS  شما از متوسط به حرفه ای رشد کند. سلکتورهای attribute ها برای استایل دهی عناصر بدون نیاز به کلاس های اضافی, مفید هستند.

input[type=”text”] { width: 200px; }

9)   (transform:rotate;(30deg

ویژگی transform در پروژه های معمول استفاده خاصی ندارند. اما قابلیت دستکاری کردن عناصر html بدون کد جاوا اسکریپت بسیار جذاب هست. استفاده ی ترکیبی از این قابلیت میتونه برای وبسایت شما افکت های جدیدی را خلق کند.

.title { transform: rotate(30deg); }

در این مطلب 9 ویژگی مهم CSS در طراحی وب را یاد گرفتیم. با کمک این لیست می توانید طراحی سایت مطلوب تری داشته باشید.