Фрагменты кода 2024, Декабрь

CSS Text Shadow - CSS-хитрости

CSS Text Shadow - CSS-хитрости

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

Пользовательские флажки и переключатели - CSS-хитрости

Пользовательские флажки и переключатели - CSS-хитрости

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

Повторяющиеся градиенты CSS - CSS-хитрости

Повторяющиеся градиенты CSS - CSS-хитрости

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

Пользовательские радиокнопки - CSS-хитрости

Пользовательские радиокнопки - CSS-хитрости

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

CSS Box Shadow - CSS-хитрости

CSS Box Shadow - CSS-хитрости

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

Пользовательский стиль ввода файлов - CSS-хитрости

Пользовательский стиль ввода файлов - CSS-хитрости

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

CSS Triangle - CSS-хитрости

CSS Triangle - CSS-хитрости

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

Диагональная миллиметровая бумага с градиентом - CSS-хитрости

Диагональная миллиметровая бумага с градиентом - CSS-хитрости

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

Конец статей с листом плюща - CSS-хитрости

Конец статей с листом плюща - CSS-хитрости

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

Точно центрировать изображение / Div по горизонтали и вертикали - CSS-хитрости

Точно центрировать изображение / Div по горизонтали и вертикали - CSS-хитрости

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

Буквицы - CSS-хитрости

Буквицы - CSS-хитрости

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

Расширяющиеся рамки навигации - CSS-хитрости

Расширяющиеся рамки навигации - CSS-хитрости

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

Перевернуть изображение - CSS-хитрости

Перевернуть изображение - CSS-хитрости

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

Необычный амперсанд - CSS-хитрости

Необычный амперсанд - CSS-хитрости

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

Полное руководство по Flexbox - CSS-хитрости

Полное руководство по Flexbox - CSS-хитрости

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

Фиксированный нижний колонтитул - CSS-хитрости

Фиксированный нижний колонтитул - CSS-хитрости

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

Фиксированное позиционирование в IE 6 - CSS-хитрости

Фиксированное позиционирование в IE 6 - CSS-хитрости

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

Сокращение шрифтов - CSS-хитрости

Сокращение шрифтов - CSS-хитрости

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

Стеки шрифтов - CSS-хитрости

Стеки шрифтов - CSS-хитрости

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

Сдвинуть кнопку ввода для загрузки файла в WebKit вправо - CSS-хитрости

Сдвинуть кнопку ввода для загрузки файла в WebKit вправо - CSS-хитрости

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

Принудительная печать в оттенках серого - CSS-хитрости

Принудительная печать в оттенках серого - CSS-хитрости

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

Вертикальная полоса прокрутки - CSS-хитрости

Вертикальная полоса прокрутки - CSS-хитрости

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

Назначьте интерактивным элементам курсор-указатель - CSS-хитрости

Назначьте интерактивным элементам курсор-указатель - CSS-хитрости

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

Светящиеся синие основные моменты ввода - CSS-хитрости

Светящиеся синие основные моменты ввода - CSS-хитрости

Как Twitter середины 2012 года. input, textarea (-webkit-transition: все 0,30 с, легкость входа-выхода; -moz-transition: все 0,30 с, легкость входа-выхода; -ms-transition: все 0,30 с "

Градиентное подчеркивание - CSS-хитрости

Градиентное подчеркивание - CSS-хитрости

A (position: relative; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; height: 1px; "

Градиентный текст - CSS-хитрости

Градиентный текст - CSS-хитрости

Это только WebKit, но это самый чистый способ сделать это, поскольку текст остается редактируемым и выбираемым веб-текстом. h1 (размер шрифта: 72 пикселя; фон: "

Шестиугольник с тенью - CSS-хитрости

Шестиугольник с тенью - CSS-хитрости

.hexagon (width: 100px; height: 55px; position: relative;) .hexagon, .hexagon: before, .hexagon: after (background: red; box-shadow: 0 0 10px "

Язык интернационализации CSS - CSS-хитрости

Язык интернационализации CSS - CSS-хитрости

* Зависит от языка * /: lang (af) (кавычки: '201E' '201D' '201A' '2020-2021';): lang (ak) (семейство шрифтов: Lucida, "DejaVu Sans", наследовать; ): lang (ar) (семейство шрифтов: Tahoma "

CSS для iPad - CSS-хитрости

CSS для iPad - CSS-хитрости

@media only screen и (device-width: 768px) (/ * Для общих макетов iPad * /) @media only screen и (min-device-width: 481px) и (max-device-width: "

Обработка длинных слов и URL-адресов (принудительные разрывы, расстановка переносов, многоточие и т. Д.) - CSS-хитрости

Обработка длинных слов и URL-адресов (принудительные разрывы, расстановка переносов, многоточие и т. Д.) - CSS-хитрости

Мы переместили этот фрагмент в наш канонический фрагмент по этой теме. См .: Обработка длинных слов и URL-адресов "