طراحی وب آموزش CSS 3

[سیده آمین ارمان]

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


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

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

Please, ورود or عضویت to view URLs content!

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

Please, ورود or عضویت to view URLs content!

Please, ورود or عضویت to view URLs content!

Please, ورود or عضویت to view URLs content!

Please, ورود or عضویت to view URLs content!

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

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

Please, ورود or عضویت to view URLs content!

Please, ورود or عضویت to view URLs content!

Please, ورود or عضویت to view URLs content!

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

Please, ورود or عضویت to view URLs content!

 

[سیده آمین ارمان]

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

Css3 چیست؟

به تعریف دیگر، 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 و کاربرد آنها در طراحی سایت شرح داده شده است.



ویژگی





کاربرد

box-sizing

این امکان را به شما می دهد تا padding و border را در عرض و ارتفاع کلی یک عنصر شامل کنید.

nav-down

مشخص می کند که زمانی که از کلید هدایت arrow-down (فلش به سمت پایین) استفاده می کنید به کجا هدایت شوید.

nav-index



nav-left

مشخص می کند که زمانی که از کلید هدایت arrow- left (فلش به سمت چپ) استفاده می کنید به کجا هدایت شوید.

nav-right

مشخص می کند که زمانی که از کلید هدایت arrow- right (فلش به سمت راست) استفاده می کنید به کجا هدایت شوید.

nav-up

مشخص می کند که زمانی که از کلید هدایت arrow- up (فلش به سمت بالا) استفاده می کنید به کجا هدایت شوید.

outline-offset

اضافه کردن فضا بین outline و border (یا edge) در یک عنصر



resize

مشخص کننده وجود و یا عدم وجود امکان تغییر سایز یک عنصر توسط کاربر است

 

[سیده آمین ارمان]

متن در 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 ارائه شده است.



ویژگی



خصوصیات





text-align-last





بیانگر چگونگی تنظیم چینش آخرین خط در یک متن است.





text-emphasis



در واقع کوتاه شده دو ویژگی text-emphasis-style و text-emphasis-color در یک اعلان است





text-justify



مشخص کننده چگونگی چینش و فاصله ها در متن است





text-overflow



بیانگر این است که متن در صورت سرریز شدن ( به اصطلاح overflowed ) چگونه به کاربر نمایش داده شود.





word-break



مشخص کننده قوانین شکستن خط برای اسکریپت های غیر CJK است.





word-wrap



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

 

[سیده آمین ارمان]

ویژگی تغییر شکل (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);
}

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



ویژگی



توضیحات



Transform

ایجاد یک دگرگونی 2D یا 3D در یک عنصر

transform-origin

این امکان را به شما می دهد تا موقعیت یک عنصر تغییر شکل یافته را تغییر دهید

transform-style

چگونگی قرار گرفتن عناصر رندر شده در فضای سه بعدی را مشخص می کند

perspective

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

perspective-origin

مشخص کننده موقعیت پایین عناصر 3D است

backface-visibility

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