CSS

Коты

Switch Day and Night

Мяукающий котёнок

Котёнок раскачивается на верёвке

Всё остальное

Советы

Фон для сайта

scroll-margin-top: удобный переход по ссылке при статичном верхнем блоке

Анимация звёздочки и сердечка (Twitter-стиль)

Псевдоэлементы ::before и ::after

Градиенты

Подключаем шрифты

Селекторы

Селектор nth-xxx

Блочные элементы

Стилизация списков

float

position. Примеры с позиционированием

keyframes

border

figure и figcaption

Hover - эффекты при наведении. Часть 1

Hover - Красивые эффекты для значков при наведении с помощью CSS3. Часть 2

Таблицы

Геометрические фигуры

Рисуем треугольники

transition

Стилизация placeholder

Создание кнопки при помощи CSS3

Несколько трюков с тегом textarea

Подготавливаем веб-страницу для печати средствами CSS

Свойства CSS: text-shadow

Создание красивых сообщений

Значки к ссылкам для разных документов

Рисуем британский флаг при помощи 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 будут подсвечены красной рамкой.

Реклама