17 CSS/HTML эффектов с кроссбраузерными решениями

Вернуться назад

Безусловно, есть множество разных способов достигнуть эффектов, описанных ниже, но самое сложное в CSS — заставить их выглядеть одинаково во всех браузерах.

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

Наша статья собрала в себя несколько крутых CSS эффектов, которые вы обязательно должны использовать в своих проектах (некоторые решения могут быть очень спорными, просим это учитывать):

Минимальная/максимальная ширина элемента (с поддержкой IE)

Многим из вас приходится устанавливать фиксированные размеры элементов, только потому что IE не поддерживает свойства min-width, max-width, min-height и max-height, не так ли? Но больше вам не нужно этого делать. IE не относится к тем браузерам, которые придерживаются общих стандартов, и иногда мы можем использовать это в свою пользу: мы можем использовать код, который смотрелся бы ужасно в стандартном CSS.

В данном случае вы можете воспользоваться некоторыми выражениями IE (в основном, JavaScript кодом), чтобы проверить текущую ширину body и подстроить ширину элемента под неё:

	
#content {
	width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 760px;
	max-width: 1240px;
}

RGBA (с поддержкой IE)

На сей раз нам потребуется несколько IE фильтров. У вас будет стандартная разметка, разметка под IE6 и разметка под IE8.

Разметка для IE основана на фильтре градиента, там мы, фактически, указываем один и тот же цвет в начале и в конце, и получаем отличный RGBA фон.

Первые две цифры — это непрозрачность, а последние — непосредственно цвет. Неизвестно почему, но прозрачность всё равно не работает правильно… Возможно, это баг только этого конкретного кода.

	
.element {
  background-color: transparent;
  background-color: rgba(255, 255, 255,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

Непрозрачность (с поддержкой IE)

И снова фильтры! Но на сей раз у нас разный синтаксис для IE8 и более ранних версий. И снова убедитесь, что добавили khtml, moz и стандартные атрибуты.

	
.selector {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
	filter: alpha(opacity=50); /* internet explorer 5~7 */
	-khtml-opacity: 0.5;      /* khtml, старые версии safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}

Вращение/масштабирование изображений (с поддержкой IE)

Ещё одна довольно крутая и практически не используемая возможность — это вращение/масштабирование изображений. Здесь используется другой фильтр, который позволяет вращать изображения, но к сожалению он поддерживает вращение только с шагом на 90 градусов.

Хотя, вы также можете отражать изображения, это даёт вам большие возможности редактирования изображения на всех браузерах, включая IE. Для основных браузеров мы будем использовать свойство transform с соответственными префиксами разработчиков.

	
img {
	transform:
		rotate(180deg)
		scale(-1, 1);

	/* для firefox, safari, chrome и т.д. */
	-webkit-transform:
		rotate(180deg)
		scale(-1, 1);
	-moz-transform:
		rotate(180deg)
		scale(-1, 1);

	/* для ie */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

	/* opera */
	-o-transform:
		rotate(180deg)
		scale(-1, 1);
}

Полноэкранный фон (с поддержкой IE)

Иногда возникает необходимость быстро создать полноэкранные фоны. Надеемся, вы не используете JavaScript только для этого, потому что это можно реализовать с помощью всего нескольких CSS строк.

Фишка здесь заключается в том, что вы создаёте div, который будет полноэкранным, а внутрь него вы можете поместить горизонтальное, вертикальное или полноразмерное изображение.

	
.content {
	position: relative;
	width: 760px;
	z-index: 10;
 }
 .background {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index:2;
 }

/* Вертикальное изображение */
.portrait {
	height: 100%;
}
/* Горизонтальное изображение */
.landscape {
	width: 100%;
}
/* Полноразмерное изображение */
.full {
	width: 100%;
	height: 100%;
}

	
<div class="content">

aaaaaaaaaaaaaaaaaaaaaaaaaaaa

</div> <div class="background"> <img class="full | portrait | landscape" src="imgURL" alt="" /> </div>

Фон или маркеры списка без файлов изображений

Жаль, что IE не позволяет вам использовать кодирование base64 вместо реальных файлов. Это, по большей части, для мобильных телефонов, т.к. позволяет сократить количество http запросов, и, соответственно, сохранить драгоценное время.

В данном случае это использовано для пользовательского list-style без изображения. Мы только сгенерировали base64 с помощью Patternfy в вставили в CSS следующим образом:

	
ul {
	list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
}

Текстовые тени (с поддержкой IE)

И снова нам понадобятся фильтры IE. Но здесь они могут испортить читабельность шрифта, поэтому постарайтесь использовать этот эффект не очень часто, и желательно только на больших шрифтах.

	
p {
	text-shadow: #000000 0 0 1px;
	zoom:1;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}

Множественные границы (с поддержкой IE)

Когда вам нужно больше, чем одна граница, для большинства браузеров вы можете использовать outline или элементы :before и :after. Для IE вы опять-таки можете прибегнуть к использованию фильтров.

	
div {
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
}
div:before {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	border-top: 1px solid #212121; /* верхняя граница! */
	content: '';
}
div:after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 1px;
	border-bottom: 1px solid #212121; /* нижняя граница! */
	content: '';
}

Тени блока (с поддержкой IE)

Тот же фильтр, который мы использовали для создания второй границы, может быть использован для получения эффекта тени блока. Учтите, что это может изменить ширину элемента. Поэтому, если вы используете какую-то систему сетки, приготовьтесь к проблемам.

	
.shadow {
    -moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
	filter:
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
	box-shadow: 0 0 4px #000;
}

Закруглённые углы

Плохая сторона свойств CSS3 заключается в том, что каждый браузер осуществляет синтаксис по-своему. Так с закруглёнными углами дело обстоит довольно странно, когда все стандартные браузеры используют разные выражения, чтобы добиться одного и того же:

	
.rounded  {
	-moz-border-radius: 10px; /* gecko */
	-webkit-border-radius: 10px; /* webkit */
	border-radius: 10px; /* CSS3 standard */
	-khtml-border-radius: 10px; /* old konkeror */
 
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
 
	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;
 
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
 
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
 }

Контент, доступный только для скринридеров

Иногда, когда вы хотите улучшить доступность своего сайта, вы добавляете ссылки, вроде “Перейти к содержимому” или “Перейти к навигации”. Для них вы устанавливаете “display: none” или “visibility: hidden” и надеетесь, что это работает, не правда ли? В таком случае вы ошибаетесь. Тесты показывают, что многие скринридеры просто игнорируют части кода с display:none или visibility: hidden, таким образом у вас нет никакого выигрыша в доступности сайта.

Вместо этого вы можете использовать абсолютное позиционирование и скрыть соответствующий контент за границей окна браузера. Но этот метод также представляет некоторый риск, поскольку скрытый контент может плохо повлиять на индексацию страницы в Google.

	
.hidden  {
	position: absolute;
	top: -10000px;
	left: -10000px;
 }

Не используйте отрицательные значения text-indent

Т.к. мы говорим о скрытом контенте, запомните ещё кое-что — никогда не используйте отрицательные значения text-indent для описания изображений. Это очень известная методика, но она имеет много минусов в плане SEO, т.к. в наши дни многие боты могут распознавать такой текст Используйте атрибут alt, который намного безопаснее, чем скрытый контент.

	
<h1><img src="myLogo" alt="My company" /></h1>

Clearfix (с поддержкой IE)

Многие из вас знают о методе .clearfix для исправления высот при работе с float. Во многих из этих случаев, весь этот большой код можно заменить всего двумя строками:

	
.clearfix {
	zoom:1;
	overflow:hidden;
}

@font-face (с поддержкой IE)

Если вы всё ещё используете cufon, только потому что не доверяете @font-face, то подумайте ещё раз. Font Squirrel предоставляет удивительный сервис @font-face generator, который позволяет вам добавлять на свой сайт действительно красивые шрифты, не утруждая себя разработкой JavaScript кода.

Окончательный код выглядит примерно так:

	
@font-face {
    font-family: 'MandatoryRegular';
    src: url('font/mandator-webfont.eot');
    src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/mandator-webfont.woff') format('woff'),
         url('font/mandator-webfont.ttf') format('truetype'),
         url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Красивые цитаты без изображений кавычек

Это совсем не сложно, потребуется только :before и blockquote:

	
blockquote:before {
	display: block;
	float: left;
	margin: 10px 15px 0 0;
	font-size: 100px; /* сделаем большие кавычки! */
	content: open-quote; /* здесь мы определяем :before, как кавычку. Это может быть что угодно, даже альтернативный HTML объект, вроде “ *, который будет выполнять роль кавычки/
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
}

CSS код для владельцев iPhone4 (высокое разрешение)

Время идёт и у нас появляются всё более мощные мобильные устройства. Это хорошая практика, и мы должны оставить лучшее впечатление владельцам новых устройств.

Т.к. у iPhone4 достаточно высокое разрешение экрана, если вы не предоставите лучший (и больший) вариант своего логотипа, к примеру, то пользователи получат его размытый вариант. Эту проблему можно решить всего несколькими строками:

	
@media handheld, only screen and (max-width: 767px) {
	.logo {
		/* малые разрешения и малые размеры */
		background: url(logo.jpg) no-repeat;
	}
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}
}

CSS горизонтальная/портретная ориентация изображений для мобильных телефонов

Это хорошая отправная точка для определения ориентации мобильного телефона.

	
/* Смартфоны (портретная и горизонтальная ориентация изображений) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	/* Стили */
}

/* Смартфоны (горизонтальная) ----------- */
@media only screen
and (min-width : 321px) {
	/* Стили */
}

/* Smartphones (портретная) ----------- */
@media only screen
and (max-width : 320px) {
	/* Стили */
}

/* iPad (портретная и горизонтальная) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	/* Стили */
}

/* iPad (горизонтальная) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	/* Стили */
}

/* iPads (портретная) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	/* Стили */
}

/* Настольные компьютеры и лэптопы ----------- */
@media only screen
and (min-width : 1224px) {
	/* Стили */
}

/* Большие экраны ----------- */
@media only screen
and (min-width : 1824px) {
	/* Стили */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	/* Стили */
}

2.89
1
2
3
4
5

Голосов: 1565

10 редких тегов HTML, которые редко используют Косая граница блока или граница с наклоном Как в CSS связывать объекты? Масштабирование в CSS средствами zoom и transform Эффект пульсации элемента на чистом CSS Красивая форма обратной связи на чистом CSS Что такое Pixel Perfect верстка? Адаптивная верстка. Правильные медиа выражения для retina. Формат ссылки для телефонных звонков Icon Fonts или SVG? Скошенные элементы на CSS3 Стилизуем placeholder при помощи CSS Адаптивный CSS3 Manasory без JavaScript Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. CSS прижать footer к низу окна браузера Создаём отзывчивые письма без медиа-запросов Кроссбраузерная стилизация select на CSS Специальные символы HTML Треугольники по средствам CSS Стилизация элементов checkbox и radio button на CSS3 Как убрать свечение вокруг текстового поля? Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах 17 CSS/HTML эффектов с кроссбраузерными решениями Пять полезных CSS селекторов Медиа типы в CSS Базовые правила HTML верстки писем для E-Mail рассылки Создаём адаптивный сайт

Возможно, вам будет интересно

Стилизуем placeholder при помощи CSS

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Читать подробнее