Webmaster общности: Predpriemach.com | SearchEngines.bg
    10. октомври 2026
       
    web-tourist03/02/202011min00

    Сходни публикации

    CSSУроци

    Лепкав хедър със скролиране.

    CSSУроци

    Tooltip без jQuery/Javascript

    CSSУроци

    Background image – Създаване на линк

    CSSУроци

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

    CSS уроци

    Автор: 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 за градиенти в кои браузъри се поддържат.

    Виж Още:

    Default ThumbnailЗаобляне чрез CSS3 CSS уроциCSS3 преходи и трансформации html css уроциCSS меню с картинка Default ThumbnailХоризонтално меню

    web-tourist

    ВИЖТЕ ВСИЧКИ СТАТИИ

    предишнаCodeIgniter Framework - Как да скрием index

    следващаЧаст от новите свойства на HTML 5

    Оставете коментар