17 CSS/HTML эффектов с кроссбраузерными решениями
Безусловно, есть множество разных способов достигнуть эффектов, описанных ниже, но самое сложное в CSS — заставить их выглядеть одинаково во всех браузерах.
Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.
Наша статья собрала в себя несколько крутых CSS эффектов, которые вы обязательно должны использовать в своих проектах (некоторые решения могут быть очень спорными, просим это учитывать):
- Минимальная / Максимальная ширина (с поддержкой IE);
- RGBA (с поддержкой IE);
- Непрозрачность (с поддержкой IE);
- Вращение / масштабирование изображений (с поддержкой IE);
- Полноэкранный фон (с поддержкой IE);
- Фон или маркеры списка без файлов изображений;
- Текстовые тени (с поддержкой IE);
- Множественные границы (с поддержкой IE);
- Тени блока (с поддержкой IE);
- Закруглённые углы;
- Контент, доступный только для скринридеров;
- Не используйте отрицательные значения text-indent;
- Clearfix (с поддержкой IE);
- @font-face (с поддержкой IE);
- Кавычки для цитат без изображений;
- CSS для iPhone4 (высокое разрешение);
- Горизонтальная / вертикальная ориентация изображений для мобильных устройств.
Минимальная/максимальная ширина элемента (с поддержкой 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) {
/* Стили */
}