Фрагменты кода 2024, Декабрь
Обычная тень текста: 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, уделяя особое внимание всем различным возможным свойствам родительского элемента (гибкого контейнера) и дочерних элементов (гибких элементов). Он также включает в себя историю, демонстрации, шаблоны и диаграмму поддержки браузера ».
#footer (position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: # 999;) / * IE 6 * / * html #footer (position: absolute; "
* (margin: 0; padding: 0;) html, body (height: 100%;) body #fixedElement (position: fixed! important; position: absolute; / * ie6 и выше * / top: 0; "
Текст синтаксиса (font: font-style font-variant font-weight font-size / line-height font-family;) Используемое тело (font: italic small-caps normal 13px / 150% Arial, "
* Стек на основе Times New Roman * / font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman №9 L Regular", Times, "Times New"
Firefox и IE имеют кнопку «выбрать файл» справа от пути к файлу, тогда как WebKit помещает ее слева. Это заставляет WebKit помещать его справа как "
На момент написания этой статьи это будет работать только в Chrome 18+, но оно стандартизировано, поэтому в конечном итоге поддержка будет доступна повсюду. @media print (body ("
Html (overflow-y: scroll;) Это недопустимый CSS, но он работает во всем, кроме Opera. Причина в том, чтобы предотвратить «центрирующие скачки», когда »
A, input, input, label, select, button, .pointer (cursor: pointer;) Некоторые элементы, которые таинственным образом активируются при нажатии, не запускают курсор указателя в "
Как Twitter середины 2012 года. input, textarea (-webkit-transition: все 0,30 с, легкость входа-выхода; -moz-transition: все 0,30 с, легкость входа-выхода; -ms-transition: все 0,30 с "
A (position: relative; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; height: 1px; "
Это только WebKit, но это самый чистый способ сделать это, поскольку текст остается редактируемым и выбираемым веб-текстом. h1 (размер шрифта: 72 пикселя; фон: "
.hexagon (width: 100px; height: 55px; position: relative;) .hexagon, .hexagon: before, .hexagon: after (background: red; box-shadow: 0 0 10px "
* Зависит от языка * /: lang (af) (кавычки: '201E' '201D' '201A' '2020-2021';): lang (ak) (семейство шрифтов: Lucida, "DejaVu Sans", наследовать; ): lang (ar) (семейство шрифтов: Tahoma "
@media only screen и (device-width: 768px) (/ * Для общих макетов iPad * /) @media only screen и (min-device-width: 481px) и (max-device-width: "
Мы переместили этот фрагмент в наш канонический фрагмент по этой теме. См .: Обработка длинных слов и URL-адресов "