Котёнок раскачивается на верёвке
scroll-margin-top: удобный переход по ссылке при статичном верхнем блоке
Анимация звёздочки и сердечка (Twitter-стиль)
Псевдоэлементы ::before и ::after
position. Примеры с позиционированием
Hover - эффекты при наведении. Часть 1
Hover - Красивые эффекты для значков при наведении с помощью CSS3. Часть 2
Создание кнопки при помощи CSS3
Несколько трюков с тегом textarea
Подготавливаем веб-страницу для печати средствами CSS
Значки к ссылкам для разных документов
Рисуем британский флаг при помощи CSS
Смена оформления сайта при помощи CSS и Javascript
Существует несколько предопределенных медиатипов: screen, print, all, braille, tv, aural.
Объявить можно так:
@media screen { /* правила для экранов */ }
}
Также можно задать внешние таблицы стилей, которые будут применяться к нужным медиатипам.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Также существуют CSS-запросы.
@media screen and (min-width: 480px) { /* CSS-rules */}
min - это префикс медиазапроса относительно минимальной ширины (также есть max). Мы спрашиваем - осуществляем ли рендеринг содержимого на экране и является ли ширина окна в текущий момент равно по крайней мере 480 пикселям?
Другой пример.
@media print, screen and (monochrome) {}
Запятая означает логическое ИЛИ (глупое правило). Рендеринг осуществляется с использованием принтера ИЛИ на монохромной (черно-белом) экране? Да? Использовать наши стили.
Еще примеры
@media all and (orientation: landscape) {} - применить стили для всех медиатипов при альбомной ориентации
@media screen and (color) - применить стили для цветных экранов.
В некоторых случаях картинки без явного указания их размеров (атрибуты width, height тега img) могу поломать вёрстку. Нужно не забывать прописывать всем изображениям вышеперечисленные атрибуты. А если случайно забыли? Есть простой и эффективный способ решения проблемы. Достаточно вставить в файл стилей вот такой кусочек кода:
img:not([width]):not([height]) {
border: 2px solid red !important;
}
После этого, все добавленные на сайт картинки с отсутствующими атрибутами width и height будут подсвечены красной рамкой.