Какие браузеры поддерживают CSS 3 ?
Большинство новых свойств вошедших CSS 3 поддерживают все современные браузеры: IE9+, Opera 10+, Firefox 3.6+, Chrome 12+, Safari 5+ конечно без нюансов о которых в каждом конкретном случае мы поговорим отдельно не обошлось, однако в целом всё исправно работает.
P.S. Разговаривать в этом учебнике мы будем лишь о новых свойствах CSS 3 не вошедших в спецификою CSS 2.1, однако следует понимать, что CSS 3 помимо новых свойств включает в себя так же всё то, что содержит и CSS 2.1 так что если Вы здесь впервые и учите CSS "с нуля" то рекомендую Вам начать обучение с раздела "Учебник CSS".
Глава 2
Свойства Шрифта.
Я думаю не открою для Вас секрет, если скажу что весь Интернет по большей своей части, обходится весьма ограниченным набором безопасных шрифтов которые можно буквально по пальцам пересчитать.. собственно вот они Вам на заметку:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Безопасными эти шрифты называют, потому что они есть в установленном виде практически на любом компьютере так что вебмастера могут смело их использовать, не опасаясь за то что тот или иной пользователь увидит вместо определённого нами шрифта нечто другое.
Хватит ли этого набора безопасных шрифтов, даже если расширить этот список менее безопасными, но которые есть у 95% пользователей для воплощения своих идей придирчивому веб дизайнеру? - конечно нет!.. Да что там придирчивые дизайнеры я думаю и Вы не раз задумывались о том как бы украсить свой сайт.
В этой главе мы научимся использовать нестандартные экзотические шрифты которых обычно нет на компьютере того или иного пользователя.
Так вот для того чтобы указать нестандартный шрифт нужно во-первых загрузить на компьютер пользователя этот самый шрифт указав путь к файлу, а во-вторых присвоить ему имя к которому впоследствии мы будем обращаться. Делается это с помощью правила @font-face а вся конструкция вместе будет выглядеть так:
@font-face {
font-family:Syper Pyper Chrift; /* Присваиваем имя шрифту */
src:url(font/chrift.ttf) /* Путь к шрифту в формате TTF */
}
Ну вот правило создано шрифт загружен и имя у него есть.. Теперь собственно по необходимости можно обращаться к нашему супер пупер шрифту благо Вы это уже умеете.. ну например:
<p style="font-family:Syper Pyper Chrift;">Этот текст использует нестандартный шрифт</p>
А вот пример целиком:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нестандартный шрифт</title>
<style type="text/css">
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.ttf)
}
p {
white-space: pre;
font-size: 42px;
font-family:Syper Pyper Chrift;
}
</style>
</head>
<body>
<p>О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
И случай, бог изобретатель...
А.С. Пушкин</p>
</body>
</html>
Смотреть пример
P.S. Для тренировки и экспериментов Вы можете скачать шрифты использованные в примерах.
Что не работает??? да, к сожалению, такой код не будет работать в Internet Explorer и может быть в Опере.. Про IE расскажу чуть ниже, а пока пара слов про Оперу.
Я неспроста употребил и выделил жирным слова "может быть" потому, как браузер Opera действительно может быть отобразит нестандартный шрифт, а может быть не отобразит.. До определённого момента я сам не знал, да и теперь если честно не совсем понимаю, почему так происходит.. на одних компьютерах Opera отображает шрифт на других противится этому, иногда на своём компе всё исправно работает, а с сервера тот же код в том же браузере уже нет! - думал, что это мистика какая-то и не иначе чем глюком Оперы я этот факт не называл, но потом вычитал в Интернете, что шрифт не отображается в тех случаях, когда имя пользователя в Windows или путь к странице написаны кириллицей - такая вот странность браузера.
Теперь про Internet Explorer..
Ну с IE всё как обычно у него всё всегда не "как у людей" причём это уже не какие-то ошибки и глюки а обыкновенный маразм.. Не знаю чем мотивировались разработчики IE защитой авторских прав, маркетинговыми расчётами или же жутким желанием создать монополию, но их браузер вплоть до 9 версии не поддерживал формат шрифта TTF (TrueType) а поддерживал только EOT (Embedded OpenType) - чего соответственно не делает ни один другой браузер..
Поэтому специально для IE нужно дополнительно указывать на аналогичный шрифт (можно и не на аналогичный), в форматеEOT.
Вот так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Подключаем дополнительный шрифт для браузера Internet Explorer</title>
<style type="text/css">
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.eot); /* Специально для IE указываем путь к шрифту в формате EOT */
}
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.ttf); /* А для всех остальных браузеров грузим шрифт в формате TTF */
}
p {
white-space: pre;
font-size: 42px;
font-family:Syper Pyper Chrift;
}
</style>
</head>
<body>
<p>О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
И случай, бог изобретатель...
А.С. Пушкин</p>
</body>
</html>
Смотреть пример
Теперь этот код будет работать практически везде даже в IE5!!.
Вообще следует отметить, что правило @font-face вошло ещё в спецификацию CSS 2 однако из спецификации CSS 2.1 оно было исключено так как на тот момент не было актуальным.. и вот теперь снова вернулось, войдя в спецификацию CSS 3! Так что правило @font-face будут поддерживать даже сравнительно старенькие браузеры кроме обозначенных выше нюансов.
Аналогичным способом можно подключить шрифты для жирного и курсивного начертания добавив в правило @font-faceсвойства font-style:italic или font-weight:bold
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нестандартный шрифт</title>
<style type="text/css">
/* шрифт для обычного текста*/
@font-face {
font-family:Graffiti;
src:url(font/graffiti.ttf);
}
/* шрифт для жирного текста */
@font-face {
font-family:Graffiti;
font-weight:bold;
src:url(font/graffiti_bold.ttf);
}
p {
font-size: 42px;
font-family:Graffiti;
text-align: center;
}
</style>
</head>
<body>
<p>Welcome to <b>webremeslo.ru</b> !!</p>
</body>
</html>
Смотреть пример
Обратите внимание жирным шрифтом, кстати, он необязательно должен быть именно жирный - может быть и тонкий.. в общем шрифтом который мы определили в качестве жирного выделены те участки кода, которые взяты в тег <b>. А вот если бы мы в правиле @font-face с помощью свойства font-style:italic указали шрифт для курсивного начертания то иным шрифтом выделялся бы текст взятый в тег <i>.
Ну и еще несколько нюансов..
Хоть это и не обязательно, но перед тем как подключать файлы с нестандартными шрифтами их можно поискать на компьютере пользователя.. а вдруг у пользователя уже есть такой шрифт? зачем тогда тратить драгоценный трафик на его загрузку с сервера??
Делается это с помощью src:local вот так:
src:local("Syper Pyper Chrift")
Так же можно дополнительно указать формат шрифта с помощью атрибута format вот так:
url(chrift.eot) format("embedded-opentype") /* Для формата EOT */
url(chrift.ttf) format("truetype") /* Для формата TTF */
Вот таблица форматов шрифтов и их расширений на всякий случай:
| значения | расширения |
| "woff" | .woff |
| "truetype" | .ttf |
| "opentype" | .ttf, .otf |
| "embedded-opentype" | .eot |
| "svg" | .svg, .svgz |
Ну и возьмите за правило всегда в свойстве font-family через запятую указывать несколько дополнительных безопасных, похожих шрифтов на тот случай если с основным шрифтом что то пойдёт не так..
Мы это уже проходили:
font-family: Syper Pyper Chrift, Verdana, sans-serif;
Ну а все вместе это будет выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нестандартный шрифт</title>
<style type="text/css">
@font-face {
font-family:Syper Pyper Chrift;
src:url(font/chrift.eot);
}
@font-face {
font-family:Syper Pyper Chrift;
src:local("Syper Pyper Chrift"),
url(font/chrift.ttf) format("truetype");
}
p {
white-space: pre;
font-size: 42px;
font-family: Syper Pyper Chrift, Verdana, sans-serif;
}
</style>
</head>
<body>
<p>О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
И случай, бог изобретатель...
А.С. Пушкин</p>
</body>
</html>
Смотреть пример
Что видно в этом примере?
Во-первых, видно что мы не применяли format и local к той части кода которая предназначена для браузера Internet Explorer по идее IE должен поддерживать эти команды, но на практике же всё происходит иначе.. тоже по каким то мифическим причинам данный браузер то нормально воспринимает format и local то вовсе отказывается загружать шрифт если в коде присутствуют данные команды.
Ну а во-вторых, как мы и планировали, все остальные браузеры будут пробовать искать шрифт с именем Syper Pyper Chrift на компьютере пользователя и в случае если его не окажется загрузит файл chrif.ttf.
Можно указать несколько локальных шрифтов (src: local) с различными именами.
Полезные советы:
· Помнится я уже не раз говорил о том, что текст на сайте в первую очередь должен быть удобен тля чтения, а уж потом красив! Так что не злоупотребляйте сильно декоративными шрифтами, конечно, все эти закорючки и загогулины очень красивы, но они весьма затрудняют чтение длинного текста, а порой даже раздражают.
· Где скачать одинаковые шрифты "пары" в форматах TTF и EOT?
Такие пары действительно не так уж просто найти в Интернете как и вообще шрифты в формате EOT - ну я относительно конечно.
Однако совсем необязательно искать пары.. достаточно скачать шрифт в распространенном формате TTF а потом специально для браузера IE создать дубликат переконвертировав шрифт в формат EOT например вот здесь.
· Об авторских правах.. Следует понимать, что у каждого шрифта есть свой автор и этот автор защищён законом об авторских правах..
P.S. Да простят меня авторы шрифтов за то что я без разрешения использую их детища в своих примерах.. но я заранее извиняюсь, правда.. честно честно.. не знаю как с Вами связаться уважаемые авторы так как Ваши шрифты уже тысячу раз перекопированы, переименованы и найти первоисточник для меня не представляется возможным.. вот..
P.P.S. А ещё спасибо Александру Сергеевичу Пушкину за стихи..
P.P.P.S. И отдельная благодарность Кириллу и Мефодию за предоставленные буквы!!
Глава 3
Прозрачность.
Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.
Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style type="text/css">
.opacity1 {opacity: 0;} /* Полная прозрачность */
.opacity2 {opacity: 0.05;} /* Почти совсем совсем прозрачный */
.opacity3 {opacity: .3;} /* Можно и так писать без нуля вначале */
.opacity4 {opacity: 0.5;} /* Полупрозрачный */
.opacity5 {opacity: 0.874;} /* Можно задавать очень точную степень прозрачности */
.opacity6 {opacity: 1;} /* Совсем не прозрачный */
</style>
</head>
<body>
<img src="graphics/mammoth.gif" class="opacity1" alt="Полностью прозрачный рисунок">
<img src="graphics/mammoth.gif" class="opacity2" alt="Почти совсем прозрачный 0.05">
<img src="graphics/mammoth.gif" class="opacity3" alt="Прозрачность рисунка .3 да, ноль писать вовсе не обязательно">
<img src="graphics/mammoth.gif" class="opacity4" alt="Полупрозрачный рисунок">
<img src="graphics/mammoth.gif" class="opacity5" alt="Прозрачность рисунка может быть заданна очень точно 0.874">
<img src="graphics/mammoth.gif" class="opacity6" alt="Непрозрачный вовсе">
</body>
</html>
Смотреть пример
Прозрачность в IE
Браузер Internet Explorer не поддерживает свойства opacity вплоть до девятой версии, однако имеет свой собственный фильтр с помощью которого можно задать степень прозрачности:
filter: alpha(opacity=50)
Значение opacity для фильтра браузера Internet Explorer может варьироваться от 0 - полностью прозрачный до 100 - непрозрачный
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность в IE</title>
<style type="text/css">
.menu {
display: block;
width: 180px;
font-size: 16px;
text-decoration: none;
padding: 3px;
margin: 2px;
background-color: #00f;
color: #fff;
}
.menu:hover {
opacity: 0.5; /* Полупрозрачность блока для всех браузеров */
filter: alpha(opacity=50); /* Полупрозрачность блока отдельно для IE */
}
</style>
</head>
<body>
<p>Блоки этого меню при наведении курсора будут полупрозрачными и в IE!!</p>
<a href="#" class="menu">Главная</a>
<a href="#" class="menu">Карта сайта</a>
<a href="#" class="menu">Купить слона</a>
<a href="#" class="menu">Продать слона</a>
<a href="#" class="menu">Взять слона на прокат</a>
</body>
</html>
Смотреть пример
Префиксы.
На этом можно было бы в принципе и закончить главу про прозрачность, но я хотел бы Вам ещё поведать про так называемыевендорные префиксы.. особого отношения эти товарищи к данной главе не имеют, однако дальше по ходу обучения CSS3 они будут встречаться всё чаще и чаще и где-то о них нужно рассказать – поэтому расскажу здесь.
Итак, вендорные префиксы это особые приставки к свойствам CSS используемые браузерами для экспериментальных свойств которые официально не входят в спецификацию CSS.
Мы с Вами помним, что спецификация CSS 3 пока что находится в стадии разработки и формально свойств описанных в этом учебнике не существует в природе, однако браузеры на свой страх и риск уже их активно используют.
Почему на свой страх и риск? Да потому что есть вероятность, что когда будет официально утверждена спецификация CSS 3 описанные в ней свойства по своему действию будут отличатся от свойств с таким же именем которые уже используются браузерами. Ну вот взбрендит допустим разработчикам спецификации CSS 3 обозначить свойство opacity не как степень прозрачности блока, а например как его штриховку или мерцание (бред конечно пишу), что тогда будут отображать уже миллионы установленных браузеров для которых opacity это именно прозрачность!?
Или допустим, разработчики браузера придумали своё собственное свойство – нововведение, которого вообще нигде и ни у кого нет, но документ с таким свойством не проходит проверку на валидность потому что такого свойства в спецификации нет.
По этим и другим причинам браузеры используют префиксы вначале свойств, которые не входят в официальную спецификацию. У каждого браузера свой префикс начинающийся со знака «-» данный знак вначале свойства, как впрочем и этот знак «_», согласно спецификации CSS 2.1 обозначает что свойство зарезервировано для CSS расширений тех или иных браузеров.
Вот наиболее популярные браузеры и их префиксы:
| Браузер | Префикс |
| Opera | -o- |
| Firefox, SeaMonkey, Camino | -moz- |
| Internet Explorer 8 и выше | -ms- |
| Safari до версии 3, Konqueror | -khtml- |
| Safari 3 и выше, Google Chrome | -webkit- |
Использовать префиксы очень легко достаточно взять какое либо свойство CSS и подставить к нему нужный префикс, например к свойству opacity подставляем -moz- получается: -moz-opacity
Хотя на самом деле моё выражение «использовать префиксы» неверно! на самом деле ничего никуда не подставляется, просто есть свойство opacity, а есть -moz-opacity и это два разных свойства которые необязательно должны выполнять одну и ту же функцию!! - это следует понимать..
А ещё следует понимать, что те или иные конкретные браузеры до определённых версий могут поддерживать CSS свойства только со своими префиксами (опять неправильно выражаюсь, правильно говорить свои собственные свойства - браузерные CSS расширения ), а могут изначально полагаться на пусть даже разрабатываемые спецификации. – Каждый конкретный случай в этом учебнике мы будем рассматривать отдельно.
Что же касается этой главы про прозрачность, то следует отметить, что браузер Firefox 3.5 и его более ранние версии используют своё собственное свойство -moz-opacity, а браузер Safari до версии 1.1 использует своё свойство -khtml-opacity.
Так для того чтобы сделать наш пример полностью кроссбраузерным нам понадобится добавить в код ещё пару строк:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Префиксы и прозрачность</title>
<style type="text/css">
.opacity {
filter: alpha(opacity=50); /* Полупрозрачность для IE */
-moz-opacity: 0.5; /* Полупрозрачность для старых версий Firefox */
-khtml-opacity: 0.5; /* Полупрозрачность для старых версий Safari */
opacity: 0.5; /* Полупрозрачность для всех браузеров */
}
</style>
</head>
<body>
<img src="graphics/mammoth.gif" class="opacity" alt="Полупрозрачный рисунок">
</body>
</html>
Смотреть пример
Как видите префиксы значительно растягивают код и их использование не всегда оправданно, если версии браузеров, желающих работать с теми или иными свойствами только с использованием своих префиксов, достаточно старые, как в случае со свойством opacity, то можно их и не указывать.. – хотя конечно это вредный совет..
..ну а теперь полезные советы..
Полезные советы:
Всегда используйте префиксы (ну если конечно тот или иной браузер не может обойтись без них) в тех случаях, когда используемое свойство может сильно повлиять на работоспособность, читабельность и юзабилити сайта. Одно дело когда не будут работать какие либо мелочи в дизайне сайта и совсем другое когда, например не работает меню сайта или на сайте невозможно прочитать текст из-за того что браузер не поддерживает какое-то свойство а вместо него использует аналогичное своё собственное.
Глава 4
Цвет.
Ранее в ходе обучения HTML и CSS 2.1 мы с Вами уяснили что цвет того или иного элемента сайта может быть определён следующими способами:
- Именным значением, например: red - красный.
- Значением цвета RGB, например: RGB(255,0,0) - опять таки красный.
- Шестнадцатеричным значением цвета RGB, например: #ff0000 - всё тот же красный.
Об этих методах определения цвета я писал в главе "Цвет и фон" учебника CSS поэтому повторятся не стану а расскажу о ещё одном способе определения цвета, который предлагает спецификация CSS 3.
HSL
В CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). - это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:
Оттенок.
Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°) цветового спектра замкнутого в цветовой круг - во сказанул!! )) В общем, смотрите на рисунок там наглядно показано откуда берётся этот угол.. Имеется, значит, радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (ну и 360° тоже), 120 градусов это зелёный, 240° синий - это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.
Насыщенность.
Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и "сочно" и наоборот если насыщенность стремится к 0% то цвет "линяет" и становится серым.
Светлота.
Светлота или яркость (Lightness) это третий параметр HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.
Такая вот теория.. теперь к практике..
Как обычно покажу на примере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет HSL</title>
<style type="text/css">
body{
background-color:hsl(120,10%,50%);
color:hsl(60,100%,50%)
}
.blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)}
.blok3 {background-color:hsl(187,61%,54%)}
.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}
</style>
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
<div class="blok4">Блок 4</div>
<div class="blok5">Блок 5</div>
<div class="blok6">Блок 6</div>
</body>
</html>
Смотреть пример
Альфа каналы.
RGBA
На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.
Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue ) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности. Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет RGBA</title>
<style type="text/css">
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
.blok3{background-color:rgba(255,0,0,1)}
</style>
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>
Смотреть пример
HSLA
Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA, поэтому повторятся, не буду просто покажу пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет HSLA</title>
<style type="text/css">
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color:hsla(120,100%,50%,0.1)}
.blok2{background-color:hsla(120,100%,50%,0.5)}
.blok3{background-color:hsla(120,100%,50%,1)}
</style>
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>
Смотреть пример
Полезные советы:
· Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета так как формат RGB был создан специально для электроннолучевых трубок.. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки - ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т.е. по сути цвет HSL будет в итоге переконвертирован в RGB.
· А вот что мне нравится в HSL так это то, что цвет заданный таким способом интуитивно понятен, то есть, взглянув на цифры, допустим hsl(60,100%,50%) можно сразу же представить каким приблизительно в итоге будет цвет достаточно просто держать в голове цветовой круг (радугу) и знать теорию, о которой мы говорили выше. А вот с RGB цветом ничего, как правило, непонятно до тех пор, пока в фотошопе или ещё где-нибудь не посмотришь на цифры сочетания красного, зелёного и синего.
· Форматы HSL, HSLA и RGBA воспринимают версии браузеров начиная с: IE 9.0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.
Ну например:
.blok {
background-color:rgb(255,0,0)
background-color:rgba(255,0,0,0.5)
}
При таком раскладе цвет в старых браузерах хоть и не будет полупрозрачным , но зато будет правильным.. конкретно в этом случае красным.
Глава 5
Фон.
CSS 3 предлагает ряд новых инструментов а так же расширяет возможности старых свойств предназначенных для работы с фоном.
Дата добавления: 2015-11-04; просмотров: 1233;