Част от новите свойства на CSS 3
06-08-2010
Първото, което искам да спомена в урока е, че повечето от свойствата, които ще напиша не са валидни според CSS валидатора, но въреки това работят в повечето съвременни браузъри.
* Цветовете в урока, който ще използвам са предимно сиво, червено и синьо (крайно неприятни ефекти се получават, но се виждат хубаво резултатите от ефектите)

I. border-radius
Това свойство прави модерните напоследък заоблени ъгли. Чрез леки модификации работи във всички браузъри с изключение на Internet Explorer 6,7,8. Версия 9 на браузъра обещава да поддържа оригиналното css свойство.
Mozilla и Webkit имат собствени еквиваленти на това свойство и те са съответно:
-moz-border-radius
-webkit-border-radius


Могат да се задават и различни стойности за различните ъгли както следва:

border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius


-moz-border-radius-topright
-moz-border-radius-topleft
-moz-border-radius-bottomright
-moz-border-radius-bottomleft


-webkit-border-top-right-radius
-webkit-border-top-left-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius


Кратък пример на казаното по-горе:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Някакво заглавие</title>
<style type="text/css">
#content {
width: 300px;
height: 300px;
padding: 20px;
background: red;
border-radius: 20px; /* работи в последните версии на Chrome, Opera и Safari */
-moz-border-radius: 20px; /* работи в последните версии на Mozilla и Netscape */
-webkit-border-radius: 20px; /* работи в последните версии на Chrome и Safari */
}
</style>
</head>
<body>
<div id="content">
Lorem Ipsum е елементарен примерен текст, използван в
печатарската и типографската индустрия. Lorem Ipsum е
индустриален стандарт от около 1500 година, когато неизвестен
печатар взема няколко печатарски букви и ги разбърква, за да
напечата с тях книга с примерни шрифтове. Този начин не само
е оцелял повече от 5 века, но е навлязъл и в публикуването на
електронни издания като е запазен почти без промяна.
</div>
</body>
</html>


Резултатът ще бъде това:



II. box-shadow
Това свойство прави сянка на дивове, картинки и т.н. Чрез леки модификации работи във всички браузъри с изключение на Internet Explorer 6,7,8 и Netscape. Версия 9 на браузъра обещава да поддържа оригиналното css свойство.
Mozilla и Webkit имат собствени еквиваленти на това свойство и те са съответно:
-moz-box-shadow
-webkit-box-shadow


И трите свойства приемат 4 стойности.
1. На какво разстояние по x координатата да се намира сянката
2. На какво разстояние по y координатата да се намира сянката
3. Колко blur да е сянката
4. Цвят на сянката

Кратък пример за казаното по-горе:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Някакво заглавие</title>
<style type="text/css">
#content {
width: 300px;
height: 300px;
padding: 20px;
background: red;
box-shadow: 2px 10px 10px blue; /* работи във версиите след 10.53 включително на Opera */
-moz-box-shadow: 2px 10px 10px blue; /* работи в последните версии на Mozilla */
-webkit-box-shadow: 2px 10px 10px blue; /* работи в последните версии на Chrome и Safari */
}
</style>
</head>
<body>
<div id="content">
Lorem Ipsum е елементарен примерен текст, използван в
печатарската и типографската индустрия. Lorem Ipsum е
индустриален стандарт от около 1500 година, когато неизвестен
печатар взема няколко печатарски букви и ги разбърква, за да
напечата с тях книга с примерни шрифтове. Този начин не само
е оцелял повече от 5 века, но е навлязъл и в публикуването на
електронни издания като е запазен почти без промяна.
</div>
</body>
</html>


Резултатът ще бъде това:




III. text-shadow
Това свойство прави сянка текстовете. Работи без модификации във всички браузъри с изключение на Internet Explorer. Версия 9 дори няма да го поддържа.

Свойството приема същите 4 стойности като box-shadow
1. На какво разстояние по x координатата да се намира сянката
2. На какво разстояние по y координатата да се намира сянката
3. Колко blur да е сянката
4. Цвят на сянката

Кратък пример за казаното по-горе:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Някакво заглавие</title>
<style type="text/css">
#content {
width: 300px;
height: 300px;
padding: 20px;
background: red;
text-shadow: 0 3px 5px blue; /* Работи във всички браузъри с изключение на IE */
}
</style>
</head>
<body>
<div id="content">
Lorem Ipsum е елементарен примерен текст, използван в
печатарската и типографската индустрия. Lorem Ipsum е
индустриален стандарт от около 1500 година, когато неизвестен
печатар взема няколко печатарски букви и ги разбърква, за да
напечата с тях книга с примерни шрифтове. Този начин не само
е оцелял повече от 5 века, но е навлязъл и в публикуването на
електронни издания като е запазен почти без промяна.
</div>
</body>
</html>

Резултатът ще бъде това:



IV. box-sizing
Това свойство е малко по-трудно за разбиране и действието му не е толкова очевидно колкото на предните 3. Свойството чрез леки модификации за Mozilla и Webkit работи във всички съвремени браузъри, в това число и IE 8+.

Mozilla и Webkit имат собствени еквиваленти на това свойство и те са съответно:
-moz-box-sizing
-webkit-box-sizing


Свойството приема 3 стойности:
1. content-box (стойност по подразбиране)
2. border-box (ще обърнем специално внимание)
3. inherit

За да се разбера напълно какво върши това свойство нека разгледаме следния пример. Нека предположим, че имаме един див 300px широк. Ако в него сложим 3 дива с широчина 100px един до друг (подравнение с float: left) тогава всичко ще е наред - ще си седят един до друг. Но ако решим да им добавим рамка или padding тогава ще се разширят със съответните стойности от рамката и padding и ще се получи разместване.

Това е кодът, по който ще работим:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Някакво заглавие</title>
<style type="text/css">
#content {
width: 300px;
height: 300px;
border: 1px solid red;
}
.left {
float: left;
width: 100px;
height: 300px;
}
.cc { background: #CCCCCC; }
.ff { background: #FFFFFF; }
.blue { background: #0000FF; }
.cb { clear: both; }
</style>
</head>
<body>
<div id="content">
<div class="left cc">
left
</div>
<div class="left FF">
center
</div>
<div class="left blue">
right
</div>
<br class="cb" />
</div>
</body>
</html>


Ако добавим border: 1px solid black; padding: 20px; на трите дива (т.е добавим предните две декларации в .left { }) ще се получи разместване.

Точно тук идва box-sizing на помощ. Със стойността си по подразбиране (content-box) нищо няма да се промени, но ако използваме border-box, тогава автоматично ще се извадят от дължината стойностите на padding и рамката. Или все едно както преди ръчно се правеше 100-(2*1)-(2*20)= 58px и това число да го зададем на width.
След новите добавени неща .left трябва да изглежда така:


.left {
float: left;
width: 100px;
height: 300px;
border: 1px solid black;
padding: 20px;
box-sizing: border-box; /* работи във последните версии на Opera и IE 8*/
-moz-box-sizing: border-box; /* работи в последните версии на Mozilla и Netscape */
-webkit-box-sizing: border-box; /* работи в последните версии на Chrome и Safari */
}


И сега малко картинки за да видите, точно какво прави box-sizing

Това си е обикновени три колони без padding и рамка. Както виждате всичко си седи на мястото



Сега добавяме padding и рамка на трите колони и се разместват, защото широчината вече е width+border+padding



И след като добавим box-sizing всичко е наред:




V. Columns
Това свойство включва в себе си няколко неща. Аз ще разгледам само column-count. Другите неща, които може да погледнете са column-gap и column-rule. Като последното има една разлика с първите 2, че не работи в Netscape.
С леки модификации за Mozilla и Webkit колоните работят навсякъде без Opera и IE.

-moz-column-count
-webkit-column-count


На това свойство се задава число и то прави текста в броя колони, които сте му задали. column-gap задава разстоянието между колоните, а column-rule е нещо като рамка между колоните.

Кратък пример за казаното по-горе:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Някакво заглавие</title>
<style type="text/css">
#content {
width: 400px;
height: 400px;
padding: 20px;
background: red;
column-count: 4; /* Не се поддържа от нито един от съвременните браузъри */
-moz-column-count: 4; /* работи в последните версии на Mozilla и Netscape */
-webkit-column-count: 4; /* работи в последните версии на Chrome и Safari */
}
</style>
</head>
<body>
<div id="content">
Lorem Ipsum е елементарен примерен текст, използван в
печатарската и типографската индустрия. Lorem Ipsum е
индустриален стандарт от около 1500 година, когато неизвестен
печатар взема няколко печатарски букви и ги разбърква, за да
напечата с тях книга с примерни шрифтове. Този начин не само
е оцелял повече от 5 века, но е навлязъл и в публикуването на
електронни издания като е запазен почти без промяна. Популяризиран
е през 60те години на 20ти век със издаването на Letraset листи,
съдържащи Lorem Ipsum пасажи, популярен е и в наши дни във софтуер
за печатни издания като Aldus PageMaker, който включва различни
версии на Lorem Ipsum.
</div>
</body>
</html>


Резултатът ще бъде това:



Този файл съдържа таблица с всички изброени свойства в урока + 2 за градиенти в кои браузъри се поддържат.




/ Трябва да сте регистриран за да напишете коментар /
От: rxfeniks
0:29 07-08-2010
Супер, супер! Браво за старанието! :) ... да внедрят CSS 3 напълно и в Internet Explorer, и всичко ще е както трябва.
От: rombeca
14:39 07-08-2010
Браво! Много хубаво си го обяснил. А относно IE...
не се ли сещате вече, че от Microsoft мразят да ползват нещо, което не са направили те. А ако трябва да го плащат... абсурд.
Цяла година не мога да си валидирам CSS-а, защото скапания им браузър не го поддържа.
От: adrian
19:28 07-08-2010
С IE 9 мисля, че са тръгнали в правилната посока. CSS 3 има още много възможности, но те се поддържат частично и от "нормалните" браузъри, затова не съм ги включил тук, но има много неща, които колкото по-скоро се внедрят в повече браузъри, толкова по-добре :)
От: gLaVoReZa
21:18 08-08-2010
Много полезен урок. Браво!
От: delicious
16:04 28-08-2010
Много полезен урок, обаче CSS3 не под всички браузъри работи ...
От: misho
22:37 31-08-2010
Браво! Чудесен урок. С нетърпение ще чакам продължение. :)
От: I_V_O
21:03 03-09-2010
CSS3 свойствата може да се ползват, но не бива да се разчита на тях. Те трябва да бъдат един малък бонус за хората с модерни браузъри ;) Не си споменал най-интересните свойства - анимациите и трансформациите. Побързай да направиш продължение, че ще те изпреваря :P
От: adrian
21:13 03-09-2010
Не съм разучавал анимациите на ниво за урок, защото поддръжката им е сравнително малка. Свойствата изброени в този урок съм ги написал, защото до голяма степен могат да се ползват с изключение на IE :)
От: adrian
21:05 27-11-2010
Благодарение на този код повечето неща изброени в урока работят и за IE 6 - 8, което значи, че се получава пълна поддръжка от браузъри за някои свойства
http://css3pie.com/
От: batmanabg
13:16 22-07-2011
Полезен урок.
1