Фрагменты кода 2025, Январь

A, input, input, label, select, button, .pointer (cursor: pointer;) Некоторые элементы, которые таинственным образом активируются при нажатии, не запускают курсор указателя в "

Html (overflow-y: scroll;) Это недопустимый CSS, но он работает во всем, кроме Opera. Причина в том, чтобы предотвратить «центрирующие скачки», когда »

На момент написания этой статьи это будет работать только в Chrome 18+, но оно стандартизировано, поэтому в конечном итоге поддержка будет доступна повсюду. @media print (body ("

Firefox и IE имеют кнопку «выбрать файл» справа от пути к файлу, тогда как WebKit помещает ее слева. Это заставляет WebKit помещать его справа как "

* Стек на основе Times New Roman * / font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman №9 L Regular", Times, "Times New"

Текст синтаксиса (font: font-style font-variant font-weight font-size / line-height font-family;) Используемое тело (font: italic small-caps normal 13px / 150% Arial, "

* (margin: 0; padding: 0;) html, body (height: 100%;) body #fixedElement (position: fixed! important; position: absolute; / * ie6 и выше * / top: 0; "

#footer (position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: # 999;) / * IE 6 * / * html #footer (position: absolute; "

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tbody tr: nth-child (odd) (цвет фона: #ccc;) "

В наши дни вам действительно не нужно беспокоиться о том, что непрозрачность - это сложная кроссбраузерная вещь. Вы просто используете свойство opacity, например: .thing ("