Безусловно, есть множество разных способов достигнуть эффектов, описанных ниже, но самое сложное в CSS — заставить их выглядеть одинаково во всех браузерах.
Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.
Наша статья собрала в себя несколько крутых CSS эффектов, которые вы обязательно должны использовать в своих проектах (некоторые решения могут быть очень спорными, просим это учитывать):
Многим из вас приходится устанавливать фиксированные размеры элементов, только потому что 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;
}
На сей раз нам потребуется несколько 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)";
}
И снова фильтры! Но на сей раз у нас разный синтаксис для 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 */
}
Ещё одна довольно крутая и практически не используемая возможность — это вращение/масштабирование изображений. Здесь используется другой фильтр, который позволяет вращать изображения, но к сожалению он поддерживает вращение только с шагом на 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);
}
Иногда возникает необходимость быстро создать полноэкранные фоны. Надеемся, вы не используете 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. Но здесь они могут испортить читабельность шрифта, поэтому постарайтесь использовать этот эффект не очень часто, и желательно только на больших шрифтах.
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)";
}
Когда вам нужно больше, чем одна граница, для большинства браузеров вы можете использовать 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: '';
}
Тот же фильтр, который мы использовали для создания второй границы, может быть использован для получения эффекта тени блока. Учтите, что это может изменить ширину элемента. Поэтому, если вы используете какую-то систему сетки, приготовьтесь к проблемам.
.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 для описания изображений. Это очень известная методика, но она имеет много минусов в плане SEO, т.к. в наши дни многие боты могут распознавать такой текст Используйте атрибут alt, который намного безопаснее, чем скрытый контент.
<h1><img src="myLogo" alt="My company" /></h1>
Многие из вас знают о методе .clearfix для исправления высот при работе с float. Во многих из этих случаев, весь этот большой код можно заменить всего двумя строками:
.clearfix {
zoom:1;
overflow:hidden;
}
Если вы всё ещё используете 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;
}
Время идёт и у нас появляются всё более мощные мобильные устройства. Это хорошая практика, и мы должны оставить лучшее впечатление владельцам новых устройств.
Т.к. у 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;
}
}
Это хорошая отправная точка для определения ориентации мобильного телефона.
/* Смартфоны (портретная и горизонтальная ориентация изображений) ----------- */
@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) {
/* Стили */
}
Голосов: 1474 | Просмотров: 5696