آموزش CSS 3

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

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

بدون برنامه CSS3 و بدون کد نویسی کد های CSS3 را ایجاد کنید

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

در این سایت ها این امکان وجود دارد که بدون برنامه CSS3 و بدون کد نویسی، کد های CSS3 را ایجاد کنید! این سایت به نظر من بسیار مفید و سودمند به نظر آمد چرا با استفاده از این سایت ها میتوانید در زمان خود بسیار صرفه جویی کنید و دیگر نیازی نیست وقتی برای یاد گیری و رفع مشکلات بگزارید.

در سایت زیر میتوانید انواع مختلف تکنیک های خلاقانه را که با CSS قابل ایجاد است را مشاهده کنید. مانند نوع باز شدن فرم به صورت POP UP، اسکرول لیست،کلید های داخلی و...

http://h5bp.github.io/Effeckt.css/dist

برخی از سایت ها نیز این امکان را می دهد که در تصویری از ویژوال امکان مد نظر خود را انتخاب کنید، تغییرات لازم را روی پارامتر ها و متغیر ها ایجاد کنید و در آخر کد خروجی را تحویل بگیرید.

http://css3generator.com

http://www.css3maker.com

http://www.css3.me

http://css3gen.com

سایت های آموزشی CSS3

سایت هایی هم برای آن دسته از افرادی که علاقه به کد زنی دارند وجود دارد، شما در سایت های زیر میتوانیدآموژش CSS3 را ببیند البته اگر به زبان انگلیسی مسلط هستید!

http://www.w3.org/Style/CSS/learning.en.html

http://www.w3schools.com/css

http://learnlayout.com/no-layout.html

سایت learn layout به آموزش CSS3 نمی پردازد اما دستورات و مفاهیم اولیه را به خوبی شرح داده است وبخشی فارسی را برای افرادی که به زبان انگلیسی تسلط ندارند قرار داده است.

http://fa.learnlayout.com

Css3 چیست؟

CSS3 بر خلاف CSS 2، که یک خصوصیت بزرگ به تنهایی معرف ویژگی های مختلف بود، CSS 3 به چند سند جداگانه به نام "ماژول" تقسیم شده است. هر ماژول قابلیت های جدیدی را در طراحی سایت ارائه می کند و یا ویژگی های تعریف شده در CSS 2 را با حفظ قابلیت های سابق گسترش می دهد. اولین پیش نویس های CSS 3 در ماه ژوئن سال 1999 منتشر شد.

به تعریف دیگر، CSS3 آخرین تحول زبان شیوه نامه آبشاری (Cascading Style Sheets) است و با هدف گسترش و توسعه CSS2 ارائه شد. این زبان چیزهای تازه ای را که مدت ها در انتظارش بودیم را به ارمغان آورد. برای مثال: انحنای حاشیه ها، سایه ها، شیب، انتقالات و انیمیشن ها و همچنین طرح بندی های جدیدی مانند چند ستونه کردن، باکس های انعطاف پذیر و یا طرح بندی های شبکه ای.

وضعیت ماژول های CSS3 به صورت زیر است:

•  ماژول های پایدار
•  ماژول های در مرحله پالایش
•  ماژول های در مرحله تجدید نظر
•  ماژول های در مرحله کاوش
•  ماژول های در مرحله بازنویسی

در واقع CSS3 آخرین استاندارد CSS است. CSS3 به "ماژول ها" تقسیم می شود. در طراحی سایت، CSS3 شامل "مشخصات CSS قدیمی" (که به قطعات کوچکتر تقسیم شده است). علاوه بر این، ماژول های جدید نیز به آن اضافه شده اند.

برخی از مهم ترین ماژول های CSS3 عبارتند از:

•  انتخابگرها (Selector)
•  جعبه مدل (Box Model)
•  پس زمینه و حاشیه ها
• سنجش تصاویر و جایگزین کردن محتوا
•  افکت های متن
•  تحولات دو بعدی یا سه بعدی
•  انیمیشن ها و تصاویر متحرک
•  طرح ستون های متعدد
•  رابط کاربری (User Interface)

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

پس زمینه در CSS3

CSS3 در بردارنده چند خاصیت جدید برای پس زمینه (background) است، که امکان کنترل بیشتر بر روی پس زمیه را فراهم می کند. در این بخش به شما کاربران عزیز می آموزیم که چگونه چند تصویر پس زمینه به عنصر اضافه کنید. علاوه بر این خواص جدید زیر را نیز در CSS3 می آموزید.

• background-size (اندازه پس زمینه)
• background-origin (منشا پس زمینه)
• background-clip

چند تصویر زمینه در CSS3

استفاده از CSS3 در طراحی سایت به شما این امکان را می دهد که از طریق ویژگی background-image (تصویر پس زمینه)، چند تصویر به یک عنصر اضافه کنید. تصاویر مختلف پس زمینه با استفاده از کاما از هم جدا می شوند و عکس ها در بالای یکدیگر قرار می گیرند به طوریکه اولین تصویر به بیننده نزدیکتر است.

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

#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

اندازه تصویر پس زمینه

ویژگی اندازه پس زمینه (background-size) در CSS3 امکان تعیین اندازه تصویز زمینه را به شما می دهد. در نسخه های قبلی CSS، اندازه تصویر پس زمینه، اندازه واقعی تصویر بود. اما در CSS3 این امکان وجود دارد که از تصویر پس زمینه در زمینه های مختلف، مجددا استفاده کنید. اندازه تصویر را می توان با طول (lengths)، درصد (percentages)، و یا با به کار بردن دو کلمه کلیدی؛ پوشش (contain) یا کاور (cover) مشخص کرد.

مثال 1:

#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}

مثال 2؛ تعیین اندازه با استفاده از پوشش (contain) یا کاور (cover)

#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}

#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}

تعیین اندازه تصاویر پس زمینه چندگانه

ویژگی اندازه پس زمینه (background-size)، در هنگام کار با پس زمینه چندگانه، چند مقدار برای تصاویر پس زمینه را نیز می پذیرد (با استفاده از یک کاما برای جداسازی).
در مثال زیر سه تصویر برای پس زمینه مشخص شده است و هر تصویر دارای مقدار اندازه پس زمینه مختلف هستند.

#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}

تصویر پس زمینه با اندازه کامل

در صورتی که در طراحی سایت در نظر داشته باشیم که یک تصویر پس زمینه، تمام صفحه مرورگر را به طور دائم پوشش دهد باید مراحل زیر را در طراحی سایت و برنامه نویسی رعایت کنیم:

• پر کردن کل صفحه با تصویر (بدون فضای سفید)
• تعیین مقیاس مورد نظر برای تصویر
• تصویر را در وسط صفحه قرار دهیم
• عدم ایجاد اسکرول

مثال زیر نشان دهنده چگونگی انجام این مراحل است؛ از عناصر HTML استفاده کنید. سپس یک پس زمینه ثابت (fixed) و محور (centered) بر روی آن تنظیم کنید. در نهایت اندازه آن را با استفاده از ویژگی background-size تعیین کنید.

html {
background: url(img_flower.jpg) no-repeat center center fixed;
background-size: cover;
}

ویژگی منشا پس زمینه (background-origin) در CSS3

از این ویژگی برای تعیین موقعیت تصویر پس زمینه استفاده می شود. این ویژگی سه مقدار زیر را در بر می گیرد.
• border-box : تصویر پس زمینه از از گوشه بالا سمت چپ مرز شروع می شود.
• padding-box : (پیش فرض) تصویر پس زمینه از گوشه سمت چپ بالای لبه لایه شروع می شود.
• content-box : تصویر پس زمینه از گوشه سمت چپ بالای محتوا شروع می شود.

مثال زیر نشان دهنده این ویژگی است:

#example1 {
border: 10px solid black;
padding:35px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}

ویژگی background-clip در CSS3

در طراحی سایت این ویژگی تعیین کننده منطقه نقاشی در پس زمینه است و سه مقدار زیر را به خود می گیرد.

• border-box
• padding-box
• content-box

مثال :

#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}

ایجاد سایه در CSS3

با استفاده از CSS در طراحی سایت شما می توانید به متن و عناصر خود سایه اضافه کنید. در CSS3 این ویژگی توسعه یافته است. در اینجا ایجاد سایه در CSS3 را برای ما کاربران عزیز شرح می دهیم.

ویژگی سایه در CSS3

در زیر ویژگی های سایه در CSS3 را معرفی کرده است:

سایه جعبه (box-shadow) : یک یا چند سایه به یک عنصر اضافه می کند.
سایه متن (text-shadow) : افزودن یک یا چند سایه به متن
ویژگی text-shadow در CSS3 برای اعمال سایه به متن استفاده می شود. در ساده ترین حالت شما سایه افقی (مقدار 2px) و عمودی (مقدار 2px) را به متن اعمال می کنید.

h1 {
text-shadow: 2px 2px;
}

سپس، اضافه کردن یک رنگ به سایه:

h1 {
text-shadow: 2px 2px red;
}

پس از آن، اضافه کردن یک افکت محو به سایه:

h1 {
text-shadow: 2px 2px 5px red;
}

مثال زیر یک متن سفید با سایه سیاه و سفید را نشان می دهد:

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

سایه های متعدد

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

h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

ویژگی box-shadow درCSS3

این ویژگی برای اضافه کردن سایه به عنصر استفاده می شود. استفاده و کاربرد این ویژگی نیز کاملا شبیه سایه در متن است با این تفاوت که این ویژگی به یک عنصر مانند <div> اضافه می شود نه متن.

در مثال زیر عنصر <div> دارای سایه افقی و عمودی (به مقدار 10px) ، افکت محو (5px) خاکستری رنگ است.

div {
box-shadow: 10px 10px 5px grey;
}

بنابراین در طراحی سایت شما می توانید با به کار گیری CSS3 به کار خود جلوه ببخشید.

انیمیشن ها در CSS3

انیمیشن ها در CSS3 این امکان را فراهم می کند تا هر عنصر HTML را بدون نیاز به جاوا اسکریپت و یا فلش، تبدیل به انیمیشن کنید.

انیمیشن های CSS3 چه چیزهایی هستند؟

یک انیمیشن اجازه می دهد تا یک عنصر به تدریج از یک سبک به سبک دیگری تغییر کند. شما می توانید ویژگی های CSS را هر زمان که بخواهید تغییر دهید. به منظور استفاده از انیمیشن CSS3 ، ابتدا باید چند فریم پایه (keyframe) برای انیمیشن خود مشخص کنید. keyframe ها تعیین می کنند که عناصر در زمان مشخص باید چه سبکی داشته باشند.

قانون keyframes@

زمانی که شما سبک های CSS را در داخل keyframes@ مشخص می کنید، انیمیشن به تدریج از سبک فعلی به سبک جدید در زمان های مشخص تغییر خواهد کرد. به منظور فعال کردن انیمیشن، باید انیمیشن را به یک عنصر پیوست دهید.

در مثال زیر نمونه انیمیشن به عنصر <div> متصل شده است. انیمیشن به مدت 4 ثانیه طول می کشد، و به تدریج رنگ پس زمینه عنصر <div> از قرمز به زرد تغییر می کند:

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

توجه: اگر ویژگی مدت زمان انیمیشن (animation-duration) مشخص نشده باشد، انیمیشن هیچ تاثیری نخواهد داشت زیرا مقدار پیش فرض آن صفر است. در مثال بالا زمان تغییر سبک را با استفاده از عبارات "from" و "to" مشخص کرده ایم.

همچنین می توانید از درصد استفاده کنید. با استفاده از درصد شما می توانید هر چند تغییر سبک که می خواهید اضافه کنید. در مثال زیر رنگ پس زمینه <div> زمانی که 25% ، 50% و 100% انیمیشن کامل شد، تغییر خواهد کرد.

/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

در مثال زیر، علاوه بر رنگ پس زمینه، موقعیت عنصر <div> نیز زمانی که 0%، 25%، 50% و 100% انیمیشن کامل شد، تغییر خواهد کرد.

/* The animation code */
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

تاخیر یک انیمیشن

ویژگی تاخیر انیمیشن (animation-delay) مشخص کننده تاخیر در شروع انیمیشن است. در مثال زیر قبل از شروع انیمیشن 2 ثانیه تاخیر وجود دارد.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

تنظیم تعداد دفعات اجرای انیمیشن

ویژگی animation-iteration-count (دفعات تکرار انیمیشن) تعیین کننده تعداد دفعات اجرای یک انیمیشن است. برای مثال در نمونه زیر انیمیشن قبل از توقف 3 بار اجرا می شود.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

با استفاده از عبارت "infinite" در هنگام طراحی سایت ، برای ویژگی animation-iteration-count می توانید انیمیشن را به طور بی نهایت اجرا کنید.

اجرا انیمیشن در جهت معکوس یا چرخه جایگزین

ویژگی animation-direction (جهت انیمیشن) این امکان را فراهم می کند که انیمیشن در جهت معکوس و یا در یک چرخه متناوب اجرا شود. به منظور جابه جایی انیمیشن در جهت معکوس از عبارت "reverse" و برای اجرای انیمیشن به صورت متناوب از "alternate" nv طراحی سایت استفاده کنید.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}

رابط کاربری در CSS3

CSS3 دارای ویژگی های جدید رابط کاربری مانند عناصر تغییر سایز، طرح های کلی (outlines)، و اندازه باکس ها است. در این مقاله از طراحی سایت شما ویژگی رابط کاربری های زیر را می آموزید:

• resize
• outline-offset

تغییر اندازه در CSS3

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

مثال زیر امکان تغییر عرض در عنصر <div> را به کاربر می دهد:

div {
resize: horizontal;
overflow: auto;
}

در صورتی که میخواهید امکان تغییر ارتفاع را به کاربر بدهید در مثال بالا به جای “horizontal” از عبارت “vertical” در طراحی سایت خود استفاده کنید. و اگر تمایل به تغییر سایز هردو عرض و ارتفاع را دارید از عبارت “both” استفاده کنید.

افست زمینه (Outline Offset) در CSS3

این ویژگی در طراحی سایت ، فضایی را بین زمینه و حاشیه یا مرز یک عنصر اضافه می کند.
Outlineها به دو روش از حاشیه ها متفاوت هستند:

• یک Outline خطی است که در اطراف عنصرها و در خارج از مرز حاشیه کشیده می شود.
• یک Outline ممکن است غیر مستطیلی باشد.
در مثال زیر از ویژگی outline-offset برای اضافه کردن یک فضای 15px بین حاشیه و outline استفاده شده است.

div {
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

ویژگی های رابط کاربری CSS3

در جدول زیر ویژگی های رابط کاربری در CSS3 و کاربرد آنها در طراحی سایت شرح داده شده است.

متن در CSS3

همانطور که به کرار گفته شد امروزه اکثر افراد در طراحی سایت از CSS3 بهره می گیرند. CSS3 شامل چندین ویژگی متن جدید است. در این فصل شما ویژگی های متن زیر را یاد خواهید گرفت:

• text-overflow
• word-wrap
• word-break

این ویژگی بیانگر این است که زمانی که متن سر ریز کرد چه علامتی باید به کاربر نشان داده شود. این ویژگی می تواند خصوصیات زیر را به خود بگیرد:

clipدر واقع کوتاه شدن متن است

Ellipsisحذف شدن متن است

مثال:

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}

ویژگی word-wrap در CSS3

ویژگی word-wrap در CSS3 این امکان را در طراحی سایت فراهم می کند که کلمات طولانی شکسته شده و در خط بعدی قرار بگیرد.

مثال: کد css این ویژگی به صورت زیر است:

p {
word-wrap: break-word;
}

ویژگی word-break در CSS3

این ویژگی معرف قوانین شکستن خط است. کدهای css آن به قرار زیر است :

p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

در جدول زیر لیست ویژگی های جدید متن در CSS3 ارائه شده است.

ویژگی تغییر شکل (Transform) در CSS3

ویژگی تغییر شکل (Transform) در CSS3 به شما این امکان را می دهد تا عناصر را برگردانید، بچرخانید و یا آنها را مورب کنید. در واقع تغییر شکل در طراحی سایت ، افکتی است که اجازه می دهد که یک عنصر از نظر شکل، اندازه و موقعیت تغییر کند. CSS3 از تغییر شکل دو بعدی و سه بعدی پشتیبانی می کند.

تغییر شکل دو بعدی (2D) در CSS3

در این بخش در مورد روش های تغیر شکل دو بعدی در طراحی سایت می آموزید. روش های زیر روش هایی هستند که با کمک آنها می توانید در طراحی سایت خود، تغییر شکل های دو بعدی ایجاد کنید.

1. Translate() : روش translate()، عنصر را از موقعیت کنونی خود جابه جا می کند. (با توجه به پارامترهای داده شده برای محور X و محور Y). در مثال زیر عنصر <div> از موقعیت کنونی خود 50 پیکسل به سمت راست و 100 پیکسل به سمت پایین حرکت می کند.

div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}

2. ()rotate : روش ()rotate عنصر را با توجه به درجه داده شده در جهت عقربه های ساعت و یا خلاف جهت عقربه های ساعت می چرخاند. در مثال زیر عنصر <div> در جهت عقربه های ساعت به میزان 20 درجه می چرخد. استفاده از مقادیر منفی موجب چرخش عنصر در خلاف جهت عقربه های ساعت می شود.

div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}

3. ()scale : روش ()scale اندازه یک عنصر را کم و یا زیاد می کند (با توجه به پارامترهای داده شده برای عرض و ارتفاع). در مثال زیر عنصر <div> به میزان دوبرابر عرض اصلی و سه برابر ارتفاع اصلی خود تغییر اندازه می دهد. برای کاهش اندازه عنصر از مقادیر کمتر از یک باید استفاده کنید.

div {
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}

4. skewX() ، skewY() و skew () : روش skewX() ، عنصر را در امتداد محور x براساس زاویه داده شده منحرف می کند. و در روش skewY() عنصر در امتداد محور Y ها منحرف می شود. و در نهایت در روش skew () عنصر در هر دو امتداد محور X محور Y منحرف می شود. در روش skew () میزان درجه اول، درجه انحراف از محور X است که با یک کاما از میزان درجه انحراف از محور Y جدا می شود(در صورت صفر بودن یکی از درجه ها از نوشتن آن خودداری می کنیم). در نمونه ارائه شده در زیر عنصر <div> به میزان 20 درجه در امتداد محور x منحرف می شود.

div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

5. matrix() : روش matrix() ترکیبی از تمام روش های تغییر شکل دو بعدی در یک روش است. این روش شش پارامتر به خود می گیرد که شامل توابع ریاضی است که امکان چرخش، مقیاس، جابه جایی و انحراف را به شما می دهد.

div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

خواص ستون چندگانه در CSS3

در این بخش در مورد خواص ستون چندگانه در CSS3 صحبت خواهیم کرد. ویژگیهای زیر برخی از ویژگی هایی هستند که برای ایجاد ستون چندگانه در طراحی سایت استفاده می شود.

1. column-count : ویژگی column-count بیانگر تعداد ستون هایی است که یک عنصر می تواند به آنها تقسیم شود. در مثال زیر عنصر <div> به سه ستون تقسیم شده است.

div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

2. column-gap : ویژگی column-gap، فاصله و شکاف بین ستون ها را مشخص می کند. نمونه زیر بیانگر 40 پیکسل فاصله بین ستون است.

div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}

3. column-rule-style : ویژگی column-rule-style، تعیین کننده سبک قاعده بین ستون ها است.

div {
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}

4. column-rule-width : این ویژگی بیانگر عرض قاعده بین ستون ها است.

div {
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}

5. column-rule-color : ویژگی column-rule-color بیانگر رنگ قاعده بین ستون ها است.

div {
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}

6. column-rule : این ویژگی در واقع در طراحی سایت ، یک ویژگی مختصر نویسی برای تنظیم تمام ویژگی های قاعده ستون که در بالا گفته شد است.

div {
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}

7. column-span : از این ویژگی برای تعیین تعداد ستون هایی است که یک عنصر باید پوشش دهد. در مثال زیر مشخص شده است که <h2> باید تمام طول ستون ها را پوشش دهد.

h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}

8. column-width : این ویژگی عرض مطلوب برای ستون را در طراحی سایت پیشنهاد می کند. در نمونه زیر عرض مطلوب پیشنهاد شده برای ستون معادل 100 پیکسل است.

div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}

جابه جایی سه بعدی (3D) در CSS3

در این مقاله سه متد جابه جایی سه بعدی (3D) در CSS3 زیر را برای شما کاربران عزیز در طراحی سایت شرح می دهیم.

• rotateX() : ویژگی rotateX() ، یک عنصر را در حول محور X ها با توجه به درجه داده شده به آن می چرخاند.

div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}

• rotateY() : ویژگی rotateY() ، یک عنصر را در حول محور Y ها با توجه به درجه داده شده به آن می چرخاند.

div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}

• rotateZ() : ویژگی rotateZ() ، یک عنصر را در حول محور Zها با توجه به درجه داده شده به آن می چرخاند.

div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}

جدول زیر تمام ویژگی های جابجایی سه بعدی را در خود جای داده است.

ویژگی box-sizing در CSS3

در این مقاله در مورد ویژگی box-sizing در CSS3 و کاربرد آن در طراحی سایت صحبت می کنیم.

بدون ویژگی box-sizing در CSS3

به صورت پیش فرض عرض و ارتفاع هر عنصر به صورت زیر محاسبه ی شود:

width + padding + border= عرض واقعی یک عنصر

height + padding + border = ارتفاع واقعی یک عنصر

این بدین معنی است که، زمانی که شما عرض و یا ارتفاع یک عنصر را تنظیم می کنید، عنصر معمولا بزرگتر از آن چیزی که شما تنظیم کرده اید ظاهر می شوند ( زیرا عناصر border و padding به عنصر مشخص (عرض و یا ارتفاع) اضافه شده اند.). نمونه های زیر دو عنصر <div> را نشان می دهند که دارای عرض و ارتفاع مشخص شده یکسانی هستند.

دو عناصر <div> بالا با داشتن عرض و ارتفاع یکسان، دارای اندازه متفاوتی هستند (زیرا div2 دارای یک padding مشخص است). کد نویسی دو عنصر <div> بالا در طراحی سایت به صورت زیر است:

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

بنابراین تا مدت ها در طراحی سایت، عرض و ارتفاع را کوچکتر از آنچه که مورد نیاز بود مشخص می کردند زیرا باید padding و border ها را از آن تفریق می کردند.
اما با استفاده از CSS3 در طراحی سایت ، این مشکل با روی کار آمدن ویژگی box-sizing برطرف شد.

ویژگی box-sizing در CSS3

این ویژگی این امکان را به ما می دهد تا padding و border را در یک عنصر نهایی عرض و ارتفاع مشمول کنیم. هنگامی که شما برای این ویژگی، border-box را مانند مثال زیر بنویسید، مشکل مذکور برطرف خواهد شد.

.div {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

از زمان ارائه این ویژگی در طراحی سایت ، طراحان سایت از آن بهره زیادی برده اند.

ماژول ها در CSS3

CSS3 نسخه جدید CSS و یکی از زبان های برنامه نویسی پرکاربرد در طراحی سایت است. در واقع CSS3 آخرین استاندارد زبان CSS است. CSS3 به ماژول ها تقسیم شده است. این ماژول ها در CSS3 دربردارنده مشخصات قدیمی CSS است. (که به قطعات کوچکتر تقسیم شده اند). علاوه بر این ماژول های جدید اضافه شده اند. در این بخش برخی از ماژول های مهم در CSS3 را برای شما کاربران عزیز شرح می دهیم تا بتوانید از آنها در طراحی سایت بهره ببرید.

ماژول های مهم در CSS3:

• Selectors (گزینشگرها)
• Box Model
• Backgrounds and Borders (ماژول پس زمینه ها و حاشیه ها)
• Image Values and Replaced Content
• Text Effects (افکت های متن)
• 2D/3D Transformations (جابه جایی و تحول دو بعدی و سه بعدی)
• Animations (ماژول انیمیشن ها)
• Multiple Column Layout (طرح چند ستونه)
• User Interface (ماژول رابط کاربری)

از این رو بیشتر افراد برای طراحی سایت از ماژول ها در CSS3 استفاده می کنند. لازم به ذکر است که بسیاری از ویژگی های جدید در CSS3 قابل اجرا در مرورگرهای مدرن است.

نمایش رسانه ها (Media Queries) در CSS3

CSS2 انواع رسانه ها و مدیا را معرفی کرد

قانون media@ که در CSS2 معرفی شد، این امکان را فراهم کرد تا بتوان سبک های مختلفی را برای انواع متفاوت رسانه ها تعریف کرد. برای مثال شما می توانید سبک قواعدی را برای صفحه نمایش کامپیوترها، یک سبک برای پرینتر ها، سبکی برای دستگاه های دستی و یک سبک برای انواع تلوزیون و غیره تنظیم کنید. متاسفانه این انواع رسانه ها به جز رسانه های چاپی، توسط دستگاه ها پشتیبانی چندانی نمی شوند

CSS3 نمایش رسانه ها (Media Queries) را معرفی کرد

نمایش رسانه ها در CSS3 ایده انواع رسانه ها در CSS2 را گسترش داد: در CSS3 به جای توجه به نوع دستگاه به قابلیت های دستگاه توجه می شود. نمایش رسانه ها برای بررسی چیزهای بسیاری مورد استفاده قرار می گیرد. از جمله:

• عرض و ارتفاع دید

• عرض و ارتفاع دستگاه

• جهت گیری ( آیا تبلت یا تلفن در حالت عمودی نگه داشته شده است و یا در حالت افقی؟)

• وضوح

استفاده از این ویژگی در طراحی سایت یک تکنیک محبوب برای ارائه یک سبک متناسب با تبلت، آیفون و اندروید است.

ترکیب نمایش رسانه ها

یک media query شامل یک نوع رسانه (media type) است و می تواند دربردارنده یک یا چند عبارت (expressions) باشد.

@media not|only mediatype and (expressions) {
CSS-Code;
}

مثال ساده ای از نمایش رسانه ها در CSS3

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

ویژگی border-radius در CSS3

با استفاده از CSS3 در طراحی سایت شما می توانید با به به کاربردن ویژگی border-radius به هر عنصری مشخصه های گوشه های گرد شده را بدهید. به مثال زیر توجه کنید:

#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

ویژگی border-radius در CSS3 - مشخص شده برای هر گوشه

اگر شما تنها یک مقدار برای برای ویژگی border-radius انتخاب کنید، این مقدار به چهار گوشه اعمال می شود. با این حال شما می توانید در صورت تمایل شما می توانید برای هر گوشه مقدار جداگانه تعیین کنید. در این قسمت قوانین مربوط به آن را برای شما کاربران عزیز شرح می دهیم.

• چهار مقدار: مقدار اول به گوشه بالا سمت چپ، مقدار دوم به گوشه بالا سمت راست، مقدار سوم به گوشه پایین سمت راست و مقدار چهارم به گوشه پایین سمت چپ اعمال می شود.

• سه مقدار: مقدار اول به گوشه بالا سمت چپ، مقدار دوم به گوشه بالا سمت راست، مقدار سوم به گوشه پایین سمت راست اعمال می شود.

• دو مقدار: مقدار اول به گوشه بالا سمت چپ و گوشه پایین سمت راست اعمال می شود و مقدار دوم به گوشه بالا سمت راست و گوشه پایین سمت چپ اعمال می شود.

• یک مقدار: در هر چهار گوشه به همان مقدار اجرا می شود.

مثال برای چهار مقدار:

#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

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

جعبه های انعطاف پذیر (Flexbox) در CSS3

جعبه های انعطاف پذیر، و یا flexbox، یک فن طرح جدید در CSS3 است. استفاده از این ویژگی متضمن این است که عناصر، زمانی که طرح صفحه باید با سایز های مختلف صفحه نمایش و همچنین صفحه نمایش های دستگاه های مختلف همسان شود، همانطور که پیش بینی شده است، رفتار می کنند. برای بسیاری از برنامه ها، مدل جعبه انعطاف پذیر، بهبود در مدل بلوک است که در آن از float ها استفاده نشده است.

مفاهیم جعبه انعطاف پذیر (Flexbox Concepts) در CSS3

جعبه انعطاف پذیر از flex containers و flex items تشکیل شده است.
یک flex container از طریق تنظیم ویژگی نمایش (display) یک عنصر به صورت flex (نمایش به صورتیک بلوک) و یا inline-flex (نمایش به صورت خطی)، شناخته می شود. در داخل یک ظرف انعطاف پذیر (flex containers) یک یا چند آیتم انعطاف پذیر (flex items) وجود دارد.

نکته: هر چیزی خارج از یک ظرف انعطاف پذیر و داخل یک آیتم انعطاف پذیر به صورت معمول نمایش داده می شود. Flexbox تعیین کننده این است که آیتم های انعطاف پذیر چگونه داخل یک ظرف انعطاف پذیر گذاشته شوند.

flex item ها در طول یک خط انعطاف پذیر ( flex line) در داخل flex containers قرار می گیرند. به صورت پیش فرض تنها یک flex line در هر flex containers وجود دارد.
مثال زیر نشان دهنده سه flex item است. آنها به صورت پیش فرض قرار گرفته اند: در طول flex line افقی از سمت چپ به راست:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

</body>
</html>

همچنین امکان تغییر جهت flex line نیز وجود دارد. اگر در هنگام طراحی سایت ویژگی جهت (direction) را به صورت rtl (راست به چپ) تنظیم کنیم، متن به صورت راست به چپ کشیده می شود و flex line نیز تغییر جهت می دهد و در نتیجه طرح بندی صفحه تغییر می کند.

جهت فلکس (Flex Direction)

ویژگی flex-direction تعیین کننده جهت flexible item ها در داخل flex container است. مقدار پیش فرض این ویژگی ردیف یا row (از چپ به راست، از بالا به پایین) است.
سایر مقادیری که در طراحی سایت می توان برای این ویژگی در نظر گرفت به صورت زیر هستند:

• row-reverse (معکوس ردیف): اگر جهت writing-mode از چپ به راست باشد، flex item ها به صورت راست به چپ قرار می گیرند.

• column (ستون): اگر سیستم نوشتن به صورت افقی است، flex item ها به صورت عمودی گذاشته می شوند.

• column-reverse: مشابه column اما به صورت معکوس آن.

مثال:

.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}

سایر ویژگی هایی که در قرار می گیرند به شرح زیر هستند:

1. ویژگی justify-content

این ویژگی در بر دارنده مقادیر زیر است:

• flex-start ( مقدار پیش فرض) : آیتم ها در ابتدای ظرف قرار می گیرند.
• flex-end: آیتم ها در انتهای ظرف قرار می گیرند.
• center: آیتم ها در مرکز ظرف قرار می گیرند.
• space-between: آیتم ها با فضای بین خطوط قرار می گیرند.
• space-around: آیتم ها با فاصله قبل، بین و بعد از خطوط جای گذاری می شوند.

2. ویژگی align-items در طراحی سایت با CSS3

مقادیر مجاز در این ویژگی عبارتند از :

• stretch (مقدار پیش فرض): آیتم ها به تناسب ظرف فلکس کشیده می شوند.
• flex-start: آیتم ها در بالای ظرف قرار می گیرند.
• flex-end : آیتم ها در پایین ظرف گذارده می شوند.
• center : آیتم ها در مرکز ظرف قرار داده می شوند.
• baseline: آیتم ها در مبنای ظرف قرار می گیرند.

3. ویژگی flex-wrap

مقادیر قابل قبول برای استفاده در این ویژگی به شرح زیر می باشند.

• nowrap (مقدار پیش فرض) : در این حالت، ایتم ها، لفافه دار و یا به اصطلاح wrap نمی شوند.
• wrap : در این حالت در صورت لزوم آیتم ها پوشانده می شوند.
• wrap-reverse : در صورت لزوم آیتم ها به صورت معکوس wrap می شوند.

4. ویژگی align-content

مقادیری که می توان به این ویژگی اتلاق کرد عبارتند از:

• stretch (مقدار پیش فرض): خطوط به منظور پر کردن فضای باقی مانده کشیده می شوند.
• flex-start: خطوط به سمت ابتدای ظرف فلکس بسته بندی می شوند.
• flex-end:خطوط به سمت انتهای ظرف فلکس بسته بندی می شوند.
• center:خطوط به سمت مرکز ظرف فلکس بسته بندی می شوند.
• space-between:خطوط به طور مساوی در سطح ظرف توزیع می شوند.
• space-around:خطوط به طور مساوی با نصف اندازه فاصله در دو سطح انتهایی ظرف توزیع می شوند.

ویژگی های آیتم ها را در ادامه در بخش مقالات مربوط به طراحی سایت و در قسمت آموزش CSS3 بیان خواهیم کرد.

ویژگی felex item ها در CSS3

همانطور که در مقاله " جعبه های انعطاف پذیر (Flexbox) در CSS3 " توضیح داده شد، felex box شامل دو بخش felex container و felex item است. در مقاله قبل به طور کامل در مورد ویژگی های felex container توضیح دادیم در این مقاله در مورد ویژگی felex item ها در CSS3 صحبت خواهیم کرد. اگر تمایل به کاربرد CSS3 در طراحی سایت خود دارید در این بخش با ما همراه باشید.

مرتب سازی (Ordering)

این ویژگی تعیین کننده ترتیب یک آیتم انعطاف پذیر نسبت به سایر آیتم ها در داخل ظرف مشابه است.

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

.first {
-webkit-order: -1;
order: -1;
}

حاشیه (Margin)

تنظیم ویژگی Margin در حالت خودکار (margin: auto) در طراحی سایت ؛ موجب فرا گرفتن فضای اضافی می شود. با تنظیم margin: auto مشکل perfect centering نیز برطرف خواهد شد. از این ویژگی می توان برای قرار دادن flex item ها در موقعیت های مختلف استفاده کرد.

در مثال زیر ما ویژگی margin-right را به صورت خودکار (margin-right: auto) برای اولین آیتم فلکس تنظیم کردیم، که موجب می شود تا تمام فضای اضافی به سمت راست آن عنصر جذب شود.

.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}

.flex-item:first-child {
margin-right: auto;
}

ویژگی align-self

ویژگی align-self در flex item، ویژگی align-items در flex container را باطل می کند. این ویژگی مقدارهای مشابه ویژگی align-items را به خود می گیرد.

.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}

.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}

.item3 {
-webkit-align-self: center;
align-self: center;
}

.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}

.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}

ویژگی flex

این ویژگی در طراحی سایت با CSS3 معین طول فلکس آیتم نسبت به سایر فلکس آیتم ها در داخل یک ظرف مشخص است. در مثال زیر اولین فلکس آیتم 2/4 فضا و دو فلکس آیتم بعدی 1/4 فضای آزاد را به خود اختصاص می دهند:

.flex-item {
background-color: cornflowerblue;
margin: 10px;
}

.item1 {
-webkit-flex: 2;
flex: 2;
}

.item2 {
-webkit-flex: 1;
flex: 1;
}

.item3 {
-webkit-flex: 1;
flex: 1;
}

قاعده keyframes@

در طراحی سایت با استفاده از css3، قاعده keyframes@ مشخص کننده کد انیمیشن است. انیمیشن به تدریج از یک مجموعه css به مجموعه دیگر در حال تغییر است. در طول انیمیشن شما می توانید مجموعه سبک های css را چندین بار تغییر دهید. زمان تغییر سبک را با درصد مشخص کنید و یا از عبارات "from" و "to" ("از " و "به") استفاده کنید. برای مثال 0% و 100%، که 0% ابتدای انیمیشن و 100% انتهای انیمیشن است.

نکته: برای پشتیبانی بهتر از مرورگرها، شما همیشه باید هر دو 0% و 100% را برای انیمیشن تعریف کنید.

توجه: از ویژگی های انیمیشن ها در css3 برای کنترل ظاهر انیمیشن، و همچنین به منظور اتصال انیمیشن ها به سلکتورها، استفاده کنید.

این ویژگی در طراحی سایت با css3 به شیوه زیر نوشته می شود:

@keyframes animationname {keyframes-selector {css-styles;}}

در جدول زیر مقادیر ویژگی را به همراه توضیحات آن برای شما کاربران عزیز توضیح داده ایم.

مثال:

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}

/* Standard syntax */
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}

صفحه بندی در css3

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

در این مقاله برخی از انواع رایج صفحه بندی در css3 را توضیح می دهیم. عنصر صفحه بندی در css3، با عنوان Pagination اعمال می شود.

1. صفحه بندی ساده (Simple Pagination)

اگر در حال طراحی سایت با تعداد زیادی صفحه هستید، ممکن تمایل داشته باشید تا صفحات را به طور مرتب صفحه بندی کنید. برای این منظور از Pagination در css3 استفاده کنید.

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

2. صفحه بندی فعال و دارای هاور

در طراحی سایت با css3 می توانید با به کاربردن "active class." ، صفحه فعلی را برجسته کنید و همچنین این امکان را دارید تا با استفاده از سلکتور "hover:" ، رنگ لینک هر صفحه را در زمانی که موس بر روی آن قرار می گیرد، تغییر دهید.

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

ایجاد دکمه فعال و دارای هاور با حاشیه گرد

با اضافه کردن ویژگی border-radius، می توانید این کار را انجام دهید. مانند مثال زیر:

ul.pagination li a {
border-radius: 5px;
}

ul.pagination li a.active {
border-radius: 5px;
}

3. صفحه بندی دارای مرز (Bordered Pagination)

در طراحی سایت با css3 شما می توانید با استفاده از ویژگی border، به صفحه بندی خود مرز اضافه کنید.

ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}

مدیا کوئری در طراحی سایت با css3

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

معرفی نمایش رسانه ها (مدیا کوئری) در CSS3

مدیا کوئری در طراحی سایت با css3 در واقع گسترش ایده های رسانه ها در CSS2 است: در طراحی سایت با css3 ، مدیا کوئری ها به جای توجه به نوع دستگاه، به قابلیت دستگاه ها توجه می کنند.

مدیا کوئری ها در طراحی سایت می توانند، چیزهای زیادی را بررسی کنند که برخی از آنها در زیر اشاره شده است:

• عرض و ارتفاع دید

• عرض و ارتفاع دستگاه

• جهت گیری (آیا تلفن و یا تبلت در حالت افقی قرار دارند و یا عمودی؟)

• وضوح و رزولیشن

• استفاده از مدیا کوئری ها، یک تکنیک محبوب برای ارائه یک صفحه متناسب با تبلت ها، آیفون ها و اندرویدها هستند.

نحوه نوشتن مدیا کوئری

یک مدیا کوئری متشکل از نوع مدیا و یک یا چند عبارت دیگر است که در مورد صحیح و نادرست بودن تصمیم می گیرد.

@media not|only mediatype and (expressions) {
CSS-Code;
}

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

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

به مثال زیر در زمینه استفاده از مدیا کوئری در طراحی سایت با css3 توجه نمایید:

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

ldkh : hghtfhtrd

10 10

site khobi hast khaste nabashed

:

15 8

سایتتون عالیه

فاطمه :

9 5

عالیه

:

8 1

سایتتون عالیه و برای یک مبتدی سکوی پرش

شهرام :

5 1

سلام عالیه

نام شما :

ایمیل :

تلفن تماس :

متن پیغام :