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

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

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

» » Сообщение:

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

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

  • Минимальная / Максимальная ширина (с поддержкой IE)
  • RGBA (с поддержкой IE)
  • Непрозрачность (с поддержкой IE)
  • Вращение / масштабирование изображений (с поддержкой IE)
  • Полноэкранный фон (с поддержкой IE)
  • Фон или маркеры списка без файлов изображений
  • Текстовые тени (с поддержкой IE)
  • Множественные границы (с поддержкой IE)
  • Тени блока (с поддержкой IE)
  • Закруглённые углы
  • Контент, доступный только для скринридеров
  • Не используйте отрицательные значения text-indent
  • Clearfix (с поддержкой IE)
  • @[anchor=http://likbezz.ru/viewtopic.php?t=1441|Использование веб-шрифтов или как не применять правило @font-face]font-face[/anchor] (с поддержкой IE)
  • Кавычки для цитат без изображений
  • CSS для iPhone4 (высокое разрешение)
  • Горизонтальная / вертикальная ориентация изображений для мобильных устройств
rgba, с поддержкой ie, непрозрачность, вращение/масштабирование изображений, полноэкранный фон, фон или маркеры списка без файлов изображений, base64, текстовые тени, множественные границы, тени блока, закруглённые углы, контент, доступный только для скринридеров, не используйте отрицательные


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

Admin » » Сообщение:

Разметка для 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)";
}
rgba, с поддержкой ie

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

Admin » » Сообщение:

И снова фильтры! Но на сей раз у нас разный синтаксис для 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

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

Admin » » Сообщение:

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

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

Admin » » Сообщение:

Иногда возникает необходимость быстро создать полноэкранные фоны. Надеемся, вы не используете 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">
   <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="background">
   <img class="full | portrait | landscape" src="imgURL" alt="" />
</div>
полноэкранный фон, с поддержкой ie

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

Admin » » Сообщение:

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

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

Код: Выделить всё Развернуть
ul {
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
}
фон или маркеры списка без файлов изображений, base64

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

Admin » » Сообщение:

И снова нам понадобятся фильтры 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

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

Admin » » Сообщение:

Когда вам нужно больше, чем одна граница, для большинства браузеров вы можете использовать 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

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

Admin » » Сообщение:

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

Код: Выделить всё Развернуть
.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;
}
тени блока, с поддержкой ie

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

Admin » » Сообщение:

Плохая сторона свойств 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;
}
закруглённые углы

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

Admin » » Сообщение:

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

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

Код: Выделить всё Развернуть
.hidden  {
  position: absolute;
  top: -10000px;
  left: -10000px;
}
контент, доступный только для скринридеров

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

Admin » » Сообщение:

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

Код: Выделить всё Развернуть
<h1><img src="myLogo" alt="My company" /></h1>
не используйте отрицательные значения text-indent

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

Admin » » Сообщение:

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

Код: Выделить всё Развернуть
.clearfix {
  zoom:1;
  overflow:hidden;
}
clearfix, с поддержкой ie

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

Admin » » Сообщение:

Если вы всё ещё используете cufon, только потому что не доверяете @font-face, то подумайте ещё раз.
Font Squirrel предоставляет удивительный сервис @[anchor=http://likbezz.ru/viewtopic.php?t=1441|Использование веб-шрифтов или как не применять правило @font-face]font-face[/anchor] 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;
}
@font-face, с поддержкой ie

След.