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

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

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

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

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

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

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

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

1 div



عنصر <div> با عرض 300 و ارتفاع 100 پیکسل

(عنصر <div> کوچکتر)



2 div







عنصر <div> با عرض 300 و ارتفاع 100 پیکسل

(عنصر <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 در CSS
با استفاده از 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) در CSS310
جعبه های انعطاف پذیر، و یا 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:خطوط به طور مساوی با نصف اندازه فاصله در دو سطح انتهایی ظرف توزیع می شوند.

 

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

ویژگی felex item ها در CSS310
همانطور که در مقاله " جعبه های انعطاف پذیر (Flexbox) در CSS3 " توضیح داده شد، felex box شامل دو بخش felex container و felex item است. در مقاله قبل به طور کامل در مورد ویژگی های felex container توضیح دادیم در این مقاله در مورد ویژگی felex item ها در 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;}}

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



مقادیر



توضیحات





Animationname





الزامی است و معرف نام انیمیشن است.









keyframes-selector



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

0-100%

from (مانند 0%)

to (مشابه 100%)

نکته : شما می توانید چندین keyframes-selector در یک انیمیشن داشته باشید.



css-styles (سبک های css)





الزامی است.

مثال:

/* 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;
}
}

 

[morishut]

بسیار عالی و کاربردی :aiwan_light_wink: