CSS → Микро clearfix
Микро Clearfix от Nicolas Gallagher:
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* IE 6/7 */ }
CSS → Кроссбраузерный @font-face
Без нудного вступления про бардак в реализации стандартов, хочу поделиться ссылкой на сервис @font-face Kit Generator. Сервис позволяет закачать свой шрифт и с помощью одного клика получить архив, в котором содержится всё для кроссбраузерного подключения закачанного шрифта:
1. шрифт в формате eot для работы в IE 6/7/8
2. шрифт в формате woff для работы в IE9+, FF3.6+, Chrome 5+
3. шрифт в формате ttf
4. шрифт в формате svg для работы в iOS младше 4.2
5. css файл с кроссбраузерной записью @font-face
6. демо страница с примером подключения шрифта и инструкцией
CSS → Стилизация checkbox-ов на чистом CSS
Когда дизайнер не может «выдать» нормальный дизайн, он начинает стилизовать стандартные контролы (c) @petrovnn
Ниже, пример стилизации чекбоксов под MacOS.
CSS → Подробно о CSS анимации (видео)
Видео, в котором Michael Mullany рассказывает и показывает, как создавать анимацию с помощью CSS3:
CSS → Прижать футер к низу страницы
Наверное самый распространённый способ прижатия футера к низу страницы:
Необходимая разметка:
<body> <div class="wrapper"> Контент <div class="footer-push"></div> </div> <div class="footer"> Подвал </div> </body>
CSS → Как отцентрировать элемент с фиксированными размерами
Пример центрирования элемента с фиксированными размерами как по вертикали, так и по горизонтали:
<style> .parent { position: relative; } .centered { position: absolute; top: 50%; left: 50%; width: 60px; height: 20px; margin-left: -30px; /* width/2 */ margin-top: -10px; /* height/2 */ } </style> <div class="parent"> <div class="centered">Отцентрированный элемент</div> </div>
Демо.
CSS → border-radius, box-shadow и linear-gradient в Internet Explorer 6+
Нашёл костыль под IE 6-8, который позволяет использовать CSS3 правила border-radius, box-shadow и linear-gradient без написания лишней разметки и магии с javascript-ом. Называется чудо CSS3 PIE.
CSS → Эмуляция box-shadow в IE6+ с помощью фильтра
IE вплоть до 8-ой версии не поддерживает свойство box-shadow, которое предназначено для создания тени. Но есть способ получить нечто похожее на тень, с помощью фильтра DXImageTransform.Microsoft.Shadow:
CSS → Стилизуем поля под Mac с помощью CSS3 свойства border-image
Пример того, как с помощью пары строчек CSS кода можно сделать вот такие Mac-оподобные поля ввода, которые так часто мелькают в видеокастах западных девелоперов :)
CSS → Селекторы по атрибутам
Постоянно забываю селекторы по атрибутам из CSS3. Перевёл часть доки w3c, чтобы всегда была под рукой.
E[foo]
Элемент E с существующим атрибутом foo.
a[title] { color:red; }
<a>Link 1</a>
<a title="Title">Link 2</a>
<a>Link 3</a>