Тысячи советов по CSS, PHP, скриптам. Полезные уроки и видео-советы

Sans-Serif Arial, без засечек; Helvetica, без засечек; Gill Sans, без засечек; Lucida, без засечек; Helvetica Narrow, без засечек; без засечек; Serif Times, "

Находите ошибки в HTML и выделяйте из них дерьмо. / * Пустые элементы * / div: empty, span: empty, li: empty, p: empty, td: empty, th: empty (padding: "

Одна из основных причин использовать предварительную загрузку изображения - это если вы хотите использовать изображение для фонового изображения элемента в событии mouseOver или: hover. Если бы ты только "

Firefox 2 html> / ** / body .selector, x: -moz-any-link (color: lime;) Firefox 3 html> / ** / body .selector, x: -moz-any-link, x: default (цвет: салатовый;) Любой "

Это набор начальных шаблонов для макетов и шаблонов с использованием CSS Grid. Идея здесь в том, чтобы показать, на что способна эта техника, и "

Обычная тень текста: p (text-shadow: 1px 1px 1px # 000;) Несколько теней: p (text-shadow: 1px 1px 1px # 000, 3px 3px 5px blue;) Первые два значения "

Селекторы здесь специфичны для разметки Wufoo, но используемые концепции могут работать для любой формы. Общая идея состоит в том, чтобы вы сделали радио по умолчанию "

Повторение градиентов - уловка, которую мы уже можем сделать с творческим использованием цветовых остановок в обозначениях linear-gradient () и radial-gradient (), и "

#foo: checked :: before, input (position: absolute; clip: rect (0,0,0,0); clip: rect (0 0 0 0);) #foo: checked, input + label :: before ( содержание:"

Используется для отбрасывания теней от блочных элементов (например, div). .shadow (-moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; "

Если вас интересует стиль, специфичный для Webkit / Blink / Chrome, существует собственный псевдоэлемент, который нужно скрыть, а затем использовать нестандартный "

HTML. Их можно создать с помощью одного div. Приятно иметь классы для каждого направления. CSS Идея - это коробка с нулевой шириной и высотой. "

# example-gradient (height: 200px; margin: 0 0 20px 0; background-color: #eaeaea; background-size: 20px 20px; background-image: "

P: last-child: after (content: "2766"; / * А вот и лист плюща * / font-size: 150%; / * Делает лист больше обычного текста * / padding-left: 10px; "

.center (width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;) Отрицательные поля точно равны "

Доступный способ Лучше всего посмотреть 5-минутное видео Итана и затем сослаться на это: CodePen Embed Fallback Кроссбраузерный способ (дополнительная разметка) "

Из дизайна v8 CSS-Tricks. Просмотреть демонстрационную навигацию (background: # 444; border-bottom: 8px solid # E6E2DF; overflow: hidden; position: relative; width: 100%;) "

Вы можете переворачивать изображения с помощью CSS! Возможный сценарий: есть только один рисунок для «стрелки», но он переворачивается, чтобы указывать в разных направлениях ».

Дэн Седерхольм уже давно использует амперсанд Baskerville Italic и советует нам использовать лучший из имеющихся амперсанд (также здесь). К лучшему или худшему, но это "

Наше исчерпывающее руководство по разметке CSS flexbox. Это полное руководство объясняет все о flexbox, уделяя особое внимание всем различным возможным свойствам родительского элемента (гибкого контейнера) и дочерних элементов (гибких элементов). Он также включает в себя историю, демонстрации, шаблоны и диаграмму поддержки браузера ».