همه چیز در مورد CSS3

آشنایی با CSS3 ، زبان CSS برای طراحی سایت و قالب بندی وب سایت ها استفاده میشود.مزیتی که CSS را نسبت به HTML برتری داده استفاده چندباره از یک دستور در صفحات مختلف و برای عناصر مختلف است که این کار به سرعت و زمان برنامه نویس کمک بسیاری میکند. همچنین سفارشی کردن در CSS خیلی بیشتر شده و دستورات زیادی ارائه شده تا طراحی ها زیبا تر و سفارشی تر شوند. در ادامه بیشتر با این زبان آشنا خواهیم شد.

آشنایی با CSS3

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

با استفاده از CSS یا Cascading Style Sheet میتوان وب سایت خود را کاملا شخصی سازی کرد و انواع طراحی ها ازجمله کنترل رنگ , استایل فونت , ترازبندی و فواصل پاراگراف ها , تصاویر پس زمینه یا رنگ , اندازه صفحات , اعمال انواع افکت برروی عناصر و بسیاری دیگر را در سایت به بهترین نحو پیاده سازی کرد.

CSS توسط Hakon Wium Lie در سال ۱۹۹۴ ایجاد شد. از آن زمان تا به حال ۳ ورژن CSS ارائه شده که هرکدام نیز دارای ویژگی هایی بود که هر نسخه , نسخه قبل خود را تکمیل میکرد برای مثال

CSS1 توسط تیم W3C توصیه شد در سال ۱۹۹۶ .این نسخه در واقع توصیفی بر زبان CSS و همچنین فرمت ساده ای برای تمامی تگ های HTML بود.

CSS2 در سال ۱۹۹۸    توسط تیم W3C ارائه شد. این نسخه مسلما براساس CSS1 ساخته شده بود با ویژگی های بهتر از جمله اضافه کردن پشتیبانی از رسانه مانند پرینتر ها و دستگاه های شنیداری , فونت های قابل دانلود , موقعیت عناصر و جداول

CSS3 که اخرین نسخه از CSS است نیز توسط تیم W3C ارائه شد در سال ۱۹۹۹٫ این نسخه درون مستنداتی تقسیم شده که ماژول نامیده میشود که هر ماژول ویژگی هایی دارد که در CSS2 تعریف شده(در ادامه ماژول هارا نام خواهیم برد)

ماژول های CSS3

• Selectors
• Box Models
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• ۲D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

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

• صرفه جویی در زمان

میتوان یک دستور CSS را نوشت و بعد در صفحات مختلف و برای عناصرHTML  مختلف از آن استفاده کرد. برای مثال

.testclass {

    color: white;

    font-weight: bold;

}

<input type="text" name="name" class=”testclass” />

<div class=”testclass”>

</div>

• بارگذاری سریعتر صفحات

این امکان در CSS که یک ویژگی را یکبار برای یک تگ HTML تعریف کنیم که در ادامه در هر جای سایت از آن تگ استفاده شد ویژگی تعریف شده نیز لحاظ شود , وجود دارد. و این ویژگی CSS باعث بارگزاری سریعتر صفحات خواهد شد مانند

a {

    text-decoration: none;

    color: #ffffff;

}

• سرعت در ویرایش

برای ایجاد ویرایش های عمومی برروی تعداد زیادی از عناصر میتوان با تغییر در بخش تعریف CSS به راحتی برروی تمامی عناصری که از آن ویژگی پیروی میکردند تغییر ایجاد کرد.

• سازگار با چندین دستگاه

CSS محتوی  تولید شده را با انواع دستگاه ها از جمله PDA  , موبایل و پرینتر سازگار میکند.

• مطابق با استاندارد جهانی

در حال حاظر ویژگی های(attributes) HTML منسوخ شده و توصیه میشود از CSS استفاده شود همچنین CSS سازگاری بیشتری با مرورگر های موجود دارد.

در ادامه مثال هایی از اشکال کاربردی در CSS را برای شما آورده ایم

• Comment Bubble

<div class=”comment_bubble”></div>

.comment_bubble{

width: 140px;

height: 100px;

background: #088cb7;



-moz-border-radius: 12px;

-webkit-border-radius: 12px;

position: relative;

border-radius: 12px;

}

. comment_bubble:before {

content: "";

width: 0;

height: 0;

right: 100%;

top: 38px;

position: absolute;

border-top: 13px solid transparent;

border-right: 26px solid #088cb7;

border-bottom: 13px solid transparent;

}

• Infinity Symble

<div id="infinity"></div>

#infinity {
width: 220px;
 height: 100px;
 position: relative;}

#infinity:before,#infinity:after {content: "";
width: 60px;
 height: 60px;
 position: absolute;
 top: 0;
left: 0;
 border: 20px solid #06c999;
-moz-border-radius: 50px 50px 0;
 border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
 transform:  rotate(-45deg);}

#infinity:after { left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
 transform: rotate(45deg);}

• Diamond

</div>

#diamond {

    border-style: solid;

    border-color: transparent transparent red transparent;

    border-width: 0 25px 25px 25px;

    height: 0;

    width: 50px;

    position: relative;

    margin: 20px 0 50px 0;

}

#diamond:after {

    content: "";

    position: absolute;

    top: 25px;

    left: -25px;

    width: 0;

    height: 0;

    border-style: solid;

    border-color: red transparent transparent transparent;

    border-width: 70px 50px 0 50px;

}