۹ ویژگی Css که هر طراح وب باید بداند
در طول دوره اموزش ویدئویی Css و Css3 به طور کامل با تمامی ویژگی ها یا property های Css آشنا شدیم و یادگرفتیم که هر کدام از این ویژگی ها چه کاربردی دارند و چگونه باید از انها استفاده کنیم،در این مقاله نیز میخواهیم به صورت کاملا خلاصه با 10 ویژگی Css جذاب و بسیار کاربردی Css آشنا شویم.
ویژگی Css شماره یک : font-face@
یکی از پراپرتی های CSS3 که درسال های اخیر باعث اتفاقات جذابی در بخش طراحی وب شده, font-face@ است. این گزینه به شما امکان میدهد هر فونتی که می خواهید را به راحتی با فرمت های مختلف و تنظیمات دلخواه در هر بخش از کد CSS استفاده کنید. از font-face@ استفاده کنید و از بین چندین هزار فونت رایگان,فونت دلخواه تان را در صفحه ی وب قرار دهید. برای اینکار می توانید از سرویس هایی مثل Google Webfonts یا Typekit هم استفاده کنید.
@font-face { font-family: Blackout; src: url("assests/blackout.ttf") format("truetype"); }
ویژگی شماره دو : media@
امروزه از کوئری های media برای ساخت صفحات واکنش گرا یا طراحی وبسایت بر اساس شرایط دستگاه مورد استفاده قرار میگیرند. با استفاده از کوئری media به همراه پراپرتی هایی مثل min-width شما می توانید عناصر صفحه ی وب را به شکل بهتری و با توجه به شرایط موجود به نمایش کاربر در بیاورید.
@media screen and (max-width: 960px) { }
ویژگی شماره سه : clearfix.
برای مواقعی که overflow: hidden کار نمیکند, بهترین جایگزین استفاده از تکنیک clearfix هست. به یاد داشته باشید حتما نباید از نام کلاس clearfix استفاده کنید, فقط کافیه کد زیز را در یکی از عناصر html مورد نظر اعمال کنید.
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
ویژگی شماره چهار : overflow:hidden
راه های زیادی برای پاک کردن float ها وجود دارد, اما یکی از بهترین و ساده ترین راه ها برای پاک کردن float ها, استفاده از overflow: hidden در container عنصری که float شده است. این کد بار اضافی به استایل شما اضافه نمیکنه و در 90 درصد مواقع بدرستی کار می کند.
.container { overflow: hidden; }
ویژگی شماره پنج : ;()color:rgba
دسترسی نامحدود به دوره های آموزشی کدفرند به ارزش ۵ میلیون تومان،تنها با پرداخت ۵۹ تومان
تصاویر PNG معمولا برای ساخت افکت های transparency در طراحی وب استفاده می شوند, اما یکی از قابلیت های مهم CSS یعنی حالت رنگ RGBa باعث شده قابلیت transparency به راحتی وارد CSS شود. استفاده از RGBa به جای مقدار hex به شما اجازه میدهد یک رنگ را با استفاده از کانال های قرمز, سبز و آبی انتخاب کنید و به راحتی میزان تاری یا opacity رنگ را مشخص کنید, مثلا از 0.5 برای 50% opacity استفاده میشود.
.btn { color: rgba(0,0,0,0.5); }
ویژگی شماره شش : background-size
یک پراپرتی فوق العاده از CSS3 است که با پشتیبانی مرورگرهای معروف, گسترش پیدا کرده. اوایل استفاده از بک گراند ها با سایز مورد نظر و در مکان دلخواه بسیار سخت و شایدم غیرممکن بود اما امروزه با استفاده از یک خط کد می شود سایز بک گراند را عوض کرد و به شکل دلخواه درآورد. با بهره بردن از این نکته می توانید بک گراند های کامل با افکت های تصویری بسازید.
body { background: url(image.jpg) no-repeat; background-size: 100%; }
ویژگی شماره هفت : ;margin: 0 auto
تعریف margin: 0 auto یکی از نکات اولیه ای هست که شما باید برای کار کردن با CSS بدانید. این شگفت انگیزه که هیچ تعریف خاصی برای وسط چین کردن یک عنصر به تعاریف css اضافه نشده. اما برای اینکار میتونید کد margin : 0 auto را به عنصر مورد نظرتون اضافه کنید و اون رو در بلاک موجود وسط چین کنید.
#container { margin: 0 auto; }
ویژگی شماره هشت : [input[“type=”text
استفاده از سلکتورهایی مثل این یا حتی پیشرفته تر از این باعث می شوند میزان مهارت CSS شما از متوسط به حرفه ای رشد کند. سلکتورهای attribute ها برای استایل دهی عناصر بدون نیاز به کلاس های اضافی, مفید هستند.
input[type="text"] { width: 200px; }
ویژگی شماره نه : (transform:rotate;(30deg
اگرچه پراپرتی transform در پروژه های معمول استفاده خاصی ندارند. اما قابلیت دستکاری کردن عناصر html بدون کد جاوا اسکریپت بسیار جذاب هست. استفاده ی ترکیبی از این قابلیت میتونه برای وبسایت شما افکت های جدیدی را خلق کند.
.title { transform: rotate(30deg); }
تمامی نکاتی که در این پست به آن ها اشاره شد به صورت کامل در دوره های آموزشی کدفرند تدریس شده اند.