Здравствуй, дорогой читатель!
Сегодня хочу познакомить Вас с кроссбраузерными правилами CSS3, которые отлично работают во всех браузерах и облегчают работу каждого верстальщика.
Для начала, договоримся что будем использовать разметку HTML5 и условные комментарии для браузера Internet Eplorer. Условные комментарии нужны, потому что браузеры IE7 и IE8 по разному интерпретируют CSS правила, да и синтаксис их записи отличается. Итак наш HTML документ будет иметь такую разметку:
<!doctype html> <!--[if IE 7 ]><html class="ie7"> <![endif]--> <!--[if IE 8 ]><html class="ie8"> <![endif]--> <!--[if IE 9 ]><html class="ie9"> <![endif]--> <!--[if (gte IE 10)|!(IE)]><!--><html> <!--<![endif]--> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Кроссбраузерные правила CSS3</title> <link type="text/css" rel="stylesheet" href="css/style.css" media="all" /> </head> <body> ... тут будет разметка элементов для которых будут применяться правила CSS3 </body> </html>
Прозрачность
Прозрачность, довольно, заезженная тема для верстальщика, но все-таки напомню, что для всех нормальных (современных) браузеров правило прозрачности выглядит так:
.box_opacity { opacity: .7; }
Значение задается в пределах от 0 до 1.
Для Internet Explorer 7 правило прозрачности выглядит так:
.ie7 .box_opacity { filter: alpha(opacity=70); }
Для Internet Explorer 8 правило прозрачности выглядит так:
.ie8 .box_opacity { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; }
Для браузеров IE7-8 значение прозрачности задается в пределах от 0 до 100.
Тень
Тень это еще один замечательный инструмент, который креативщики (дизайнеры) применяют в своих макетах и хочу сказать выглядит это прекрасно. Все же, вернемся к нам верстальщикам, которым дизайнерские штучки порядком надоедают, но работать хочется. Для создания тени в арсенале CSS3 есть волшебное правило box-shadow
, оно имеет 5 параметров:
- сдвиг по оси X
- сдвиг по оси Y
- размытие
- растяжение
- цвет
а синтаксис данного правила имеет следующий вид:
.box_shadow { box-shadow: 2px 2px 2px 0px #444444; /* несколько теней */ box-shadow: 2px 2px 2px 0px #444444, 3px 3px 3px 0px #ed0000; /* внутрення тень */ box-shadow: inset 2px 2px 2px 0px #444444; }
Также его можно использовать как замену CSS правилу border
, что как по мне намного лучше, и как плюс это не влияет на ширину элемента к которому применяется рамка:
.box_shadow.border { box-shadow: inset 0 0 0 1px #444444; }
Для современных браузеров, но не обновленных (так сказать устаревших) следует использовать префиксы поставщиков браузеров:
.box_shadow { -webkit-box-shadow: 2px 2px 2px 0px #444444; -moz-box-shadow: 2px 2px 2px 0px #444444; -o-box-shadow: 2px 2px 2px 0px #444444; }
Для браузеров IE7 и IE8 следует использовать фильтры и фильтры для тени имеют следующие параметры:
- Цвет тени —
Color
- Направление тени (угол) —
Direction
- Плотность (толщина) тени —
Strength
- Радиус размытия —
PixelRadius
- Прозрачность тени —
ShadowOpacity
Для IE7 правило тени задается так:
.ie7 .box_shadow { filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=90, Strength=2); /* размытая тень */ filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40'); }
Для IE8 правило тени задается так:
.ie8 .box_shadow { -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color='#cccccc')"; /* размытая тень */ -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40')"; }
Но как всегда бывает с браузерами Internet Explorer есть минуса, причем существенные, особенно в IE8: если к элементу применена тень то на его дочерних (вложенных) элементах не работает эффект наведения hover
. Нос этим можно справиться, нужно для IE8 добавить пустой вложенный элемент, позиционированный абсолютно, занимающий всю площадь элемента и к нему применить тень. Все сделать можно, нужно всего лишь чуток фантазии)
Поворот
Поворот довольно крутая штука, и смотрится всегда очень эффектно и дизайнеры тоже любят его нарисовать, поэтому верстальщику позарез нужно знать как его реализовать в верстке. А в верстке это реализуется довольно простым правилом CSS3 transform
, кстати у этого правила есть куча параметров, но сегодня конкретно говорим про поворот, а за него отвечает правило rotate
.
В общем синтаксис для реализации поворота такой:
.box_rotate { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); }
Для IE7 следует использовать следующий фильтр с матрицей:
.ie7 .box_rotate { filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865474, M12=0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand'); }
Для IE8 правила поворота такие:
.ie8.box_rotate { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')"; }
Чтобы все было понятно скажу, что значения M11, M12, M21, M22 — это косинусы угла на который требуется повернуть элемент. Это не все замечания (хехе), следует учитывать, что ИЕ7 и ИЕ8 поворачивают по своему, не соблюдают позицию элемента, поэтому для точности верстки с макетом приходится задавать позиционирование элемента (relative
) и с помощью значений top, left, bottom, right
подбирать необходимое положение.
Линейный градиент
Градиент в макетах всегда наводит красоту и подчеркивает квалификацию дизайнера, который разрабатывал макет. Честно говоря, в своей верстке я уже давненько отошел от фоновых картинок для создания градиента, да и нецелесообразны они, если высота элемента к которому нужно применить градиент резиновая, как ни крути никакая картинка тут не поможет. Именно для таких случаев рекомендую Вам использовать следующие правила для задания градиента:
.box_gradient { /* Для вообще устаревших браузеров задаем цвет фона без градиента */ background-color: #ffffff; /* Градиент для Mozilla */ background-image: -moz-linear-gradient(top, #ffffff, #454545); /* Градиент для Chrome, Safari */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#454545)); background-image: -webkit-linear-gradient(top, #ffffff, #454545); /* Градиент для Opera */ background-image: -o-linear-gradient(top, #ffffff, #454545); /* Градиент для самых современных браузеров */ background-image: linear-gradient(to bottom, #ffffff, #454545); /* Градиент для Internet Explorer 7-9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff454545', GradientType=0); }
В принципе с градиентом ничего сложного и все красиво. Что касается браузеров Internet Explorer, то надеюсь, Вы заметили параметр GradientType
— это направление градиента, если значение 0 — то градиент идет сверху вниз, а если значение 1 — то слева направо, вот и вся тайна.
Цветное изображения в черно-белое
Ух! помнятся времена когда не было CSS3 и для таких фокусов приходилось пользоваться jQuery скриптами для реализации такой штуки, причем скрипты в основном серверные, то есть ставится локальный сервер, создается там проект и в проекте уже делаешь верстку, чтобы видеть, что все получается ровненько и скрипт работает. Очень, очень хорошо, что теперь в арсенале есть CSS3 и его правило filter
, которое позволяет сделать инверсию изображений, без лишних движений и достаточно быстро. Кстати доставший Internet Explorer поддерживает инферсию изображений, по-моему, еще с версии IE 5.5.
Итак, следующий кусок кода преобразовывает цветное изображение в черно-белое, средствами CSS:
.box_grayscale img { /* CSS3 */ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); /* IE 5.5+ */ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
И если добавить эффект наведения, при котором происходит обратная операция, то смотрится очень эффектно!
Результат
Результат наших действий Вы можете пронаблюдать кликну по кнопке «Demo» ниже, и соответственно нажав на «Source» можете скачать исходники (они Вам пригодятся, так как имеют более полный листинг кода для приведенных примеров):
Заключение
В данном уроке мы рассмотрели 5 кроссбраузерных, современных решений CSS, весьма облегчающих верстку сложных, креативных проектов. В частности мы теперь умеем делать прозрачность, тень, поворот, градиент, инверсию элементов. Как бонус, замечу, что при использовании тени и градиента мы получаем векторное изображение, которое при массштабировании проекта в браузера дает четкую картину пользователю, и никакие фоновые изображения не смогут повторить такой красоты.
Пожелания, вопросы, пропущенные правила, пожалуйста оставляйте в комментариях, буду очень рад. И по возможности делитесь уроком в соц. сетях, ведь чем больше мы читаем, тем больше знаем. Спасибо за внимание!
судя по описанию тоже самое и я использовал, моё так же создаёт дабл имедж
Батон, я юзал вот такой скрипт
он создает такую же картинку тока черно-белую ну и хувер там написан)
один минус он работает или на хостинге или на локальном сервере
JAH, есть нормальные jQuery скрипты ч/б картинок на наведение/отведение плавно, которые не только поддерживаются ВЕЗДЕ, но ещё и нормально работают с каруселями, т.е. при оверфлоу, висибилити хайдден и движении не сбиваются, сам такой недавно ставил
Батон, есть jquery скрипт который решает эту задачу работает везде, кроме ие. В ие фильтр для этого дела еще с версии 5.5 присутсвует.
Штука в том, что скрипт серверный, тоесть версточку нужно на локадльном сервере делать и проверять, тогда все норм
в ie и firefox не работает, но для ФФ есть фильтр-хак, а вот для ИЕ я так и не нашёл решение
JAH, Цветное изображения в черно-белое, в одном браузере при hover просто не становится ч/б в другом вообще объекты с таким css не отображает, так что на выходе имеем то, что без jQuery нормально это не реализовать
Батон, что именно не работает?
в ie 10-м и фаерфоксе 30-м не работает, придётся вывозить через jQuery
И в IE10 не сработает…
Владислав, спасибо)
кстати раньше работало (на момент публикации), странно, что в обновлениях эту крутую штучку не поддерживают
Эффект черно-белое фото не срабатывает в Firefox((
Виктория, класс для IE после doctype, потому что он(класс) присваивается тегу html
а градиент больше чем в 2 цвета для ИЕ можно сделать помоему только с помощmю PIE (http://css3pie.com/)
Спасибо, Владимир! Здорово, Именно то, что искала! Очень полезная информация. Вопрос (от начинающего developer): почему class*=ie после doctype, а не в head? А второй вопрос (он важнее, 3-й день голову ломаю): каким способом можно сделать градиент трехцветным в ie, как например (фрагмент без префиксов):
body {
background-image: linear-gradient(top, #3e061c 5%, #e10087 50%, #2C0414 95%) ;
}?
Selebros, в Опере 17, уже все норм)
selebros, в самом деле не работает %(
удар ниже пояса
В Опере Версия:12.14
не работает Цветное изображения в черно-белое, в демке.