Кроссбраузерные правила CSS3

Здравствуй, дорогой читатель!

Сегодня хочу познакомить Вас с кроссбраузерными правилами CSS3, которые отлично работают во всех браузерах и облегчают работу каждого верстальщика.

Кроссбраузерные правила 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 — то слева направо, вот и вся тайна.

Кстати в подробности градиента я не вдавался, но если очень интересно то советую посетить очень интересный проект htmlbook.ru, где Вы сможете почерпнуть довольно полезной информации, как о линейном так и о радиальном градиенте.

Цветное изображения в черно-белое

Ух! помнятся времена когда не было 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» можете скачать исходники (они Вам пригодятся, так как имеют более полный листинг кода для приведенных примеров):

Демо 2799 Скачать 1080

Заключение

В данном уроке мы рассмотрели 5 кроссбраузерных, современных решений CSS, весьма облегчающих верстку сложных, креативных проектов. В частности мы теперь умеем делать прозрачность, тень, поворот, градиент, инверсию элементов. Как бонус, замечу, что при использовании тени и градиента мы получаем векторное изображение, которое при массштабировании проекта в браузера дает четкую картину пользователю, и никакие фоновые изображения не смогут повторить такой красоты.

Пожелания, вопросы, пропущенные правила, пожалуйста оставляйте в комментариях, буду очень рад. И по возможности делитесь уроком в соц. сетях, ведь чем больше мы читаем, тем больше знаем. Спасибо за внимание!

Добавить комментарий:

Комментарии
  1. батон:
    28.07.2014 в 14:24

    судя по описанию тоже самое и я использовал, моё так же создаёт дабл имедж

  2. JAH:
    28.07.2014 в 00:53

    Батон, я юзал вот такой скрипт

    // Обесцвечиваем картинки на главной, при наведении цветная
	// On window load. This waits until images have loaded which is essential
	jQuery(window).load(function(){
		
		// Fade in images so there isn't a color "pop" document load and then on window load
		jQuery(".album img").fadeIn(500);
		// clone image
		jQuery('.album img').each(function(){
			var el = jQuery(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = jQuery(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			// Brother version
			var ua = jQuery.browser;
			// IE < 9 Brother
			if ( ua.msie && ua.version.slice(0,3) < 9 ) {
				el.css('filter',"progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)");
			}
			// Canvas Brother
			else {
				this.src = grayscale(this.src);
			}
		});
		// Fade image 
		jQuery('.album img').mouseover(function(){
			jQuery(this).parent().find('img:first').stop().animate({opacity:1}, 500);
		})
		jQuery('.img_grayscale').mouseout(function(){
			jQuery(this).stop().animate({opacity:0}, 500);
		});		
	});
	
	// Grayscale w canvas method
	function grayscale(src){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }

    он создает такую же картинку тока черно-белую ну и хувер там написан)
    один минус он работает или на хостинге или на локальном сервере

  3. батон:
    27.07.2014 в 14:04

    JAH, есть нормальные jQuery скрипты ч/б картинок на наведение/отведение плавно, которые не только поддерживаются ВЕЗДЕ, но ещё и нормально работают с каруселями, т.е. при оверфлоу, висибилити хайдден и движении не сбиваются, сам такой недавно ставил

  4. JAH:
    08.07.2014 в 22:03

    Батон, есть jquery скрипт который решает эту задачу работает везде, кроме ие. В ие фильтр для этого дела еще с версии 5.5 присутсвует.

    Штука в том, что скрипт серверный, тоесть версточку нужно на локадльном сервере делать и проверять, тогда все норм

  5. батон:
    08.07.2014 в 03:19

    в ie и firefox не работает, но для ФФ есть фильтр-хак, а вот для ИЕ я так и не нашёл решение

  6. батон:
    08.07.2014 в 03:10

    JAH, Цветное изображения в черно-белое, в одном браузере при hover просто не становится ч/б в другом вообще объекты с таким css не отображает, так что на выходе имеем то, что без jQuery нормально это не реализовать

  7. JAH:
    06.07.2014 в 07:56

    Батон, что именно не работает?

  8. батон:
    26.06.2014 в 13:57

    в ie 10-м и фаерфоксе 30-м не работает, придётся вывозить через jQuery

  9. Анна:
    16.05.2014 в 14:19

    И в IE10 не сработает…

  10. JAH:
    12.04.2014 в 00:01

    Владислав, спасибо)
    кстати раньше работало (на момент публикации), странно, что в обновлениях эту крутую штучку не поддерживают

  11. Владислав:
    09.04.2014 в 10:48

    Эффект черно-белое фото не срабатывает в Firefox((

  12. JAH:
    21.10.2013 в 07:48

    Виктория, класс для IE после doctype, потому что он(класс) присваивается тегу html

    а градиент больше чем в 2 цвета для ИЕ можно сделать помоему только с помощmю PIE (http://css3pie.com/)

  13. Виктория:
    20.10.2013 в 19:04

    Спасибо, Владимир! Здорово, Именно то, что искала! Очень полезная информация. Вопрос (от начинающего developer): почему class*=ie после doctype, а не в head? А второй вопрос (он важнее, 3-й день голову ломаю): каким способом можно сделать градиент трехцветным в ie, как например (фрагмент без префиксов):
    body {
    background-image: linear-gradient(top, #3e061c 5%, #e10087 50%, #2C0414 95%) ;
    }?

  14. JAH:
    11.10.2013 в 11:57

    Selebros, в Опере 17, уже все норм)

  15. JAH:
    05.03.2013 в 20:26

    selebros, в самом деле не работает %(
    удар ниже пояса

  16. selebros:
    05.03.2013 в 08:23

    В Опере Версия:12.14
    не работает Цветное изображения в черно-белое, в демке.

© 2018 Howtomake/