CSS уроци

Част от новите свойства на CSS 3

Автор: adrian

Първото, което искам да спомена в урока е, че повечето от свойствата, които ще напиша не са валидни според 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-(21)-(220)= 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 за градиенти в кои браузъри се поддържат.

Вашият коментар