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

Плавная типография - CSS-хитрости

Плавная типография - CSS-хитрости

Перейдем непосредственно к коду, вот рабочая реализация: html (font-size: 16px;) @media screen и (min-width: 320px) (html (font-size: calc (16px + "

Скрыть полосу прокрутки в Edge, IE 10/11 - CSS-хитрости

Скрыть полосу прокрутки в Edge, IE 10/11 - CSS-хитрости

Вы можете сделать его автоматически скрытым вместо постоянного отображения: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Получается так: Спасибо Тьерри "

Ссылочные псевдоклассы (по порядку) - CSS-хитрости

Ссылочные псевдоклассы (по порядку) - CSS-хитрости

A: ссылка (цвет: синий;) a: посещенный (цвет: фиолетовый;) a: наведение (цвет: красный;) a: активный (цвет: желтый;) Ссылка, посещение, наведение курсора, активный L, V, H, A Любовь ненависть"

Миксины для изменения размера шрифта Rem - CSS-хитрости

Миксины для изменения размера шрифта Rem - CSS-хитрости

Единица размера шрифта rem похожа на em, только вместо каскадирования она всегда относительно корневого (html) элемента (дополнительная информация). Это довольно "

Многослойная бумага - CSS-хитрости

Многослойная бумага - CSS-хитрости

Привет .layered-paper (background: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0.15), / * Тень верхнего слоя * / 0 10px 0 -5px #eee, / * Второй слой * / 0 "

Монотонное изображение изображения с помощью CSS - CSS-хитрости

Монотонное изображение изображения с помощью CSS - CSS-хитрости

Вы всегда можете применить фильтр к элементу, чтобы сделать его монотонным в оттенках серого: см. «Монотонное перо для изображения» Криса Койера (@chriscoyier) "

Сделать "предварительный" перенос текста - CSS-хитрости

Сделать "предварительный" перенос текста - CSS-хитрости

Текст в тегах

 по умолчанию не переносится. Например, см. Фрагмент кода ниже! Если это вызывает проблемы с макетом, одно из решений - указать "

Сброс Мейера - CSS-хитрости

Сброс Мейера - CSS-хитрости

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, шрифт, "

Синтаксис нескольких фонов - CSS-хитрости

Синтаксис нескольких фонов - CSS-хитрости

Браузеры, поддерживающие несколько фонов (WebKit с самых первых дней, Firefox 3+), используют следующий синтаксис: #box (background: url (icon.png.webp) top left "

Прокрутка Momentum в элементах переполнения iOS - CSS-хитрости

Прокрутка Momentum в элементах переполнения iOS - CSS-хитрости

Веб-страницы на iOS по умолчанию имеют прокрутку в стиле «импульс», когда легкое движение пальца заставляет веб-страницу прокручиваться, и она продолжается до тех пор, пока, в конце концов,

Синтаксис анимации по ключевым кадрам - CSS-хитрости

Синтаксис анимации по ключевым кадрам - CSS-хитрости

Базовая декларация и использование @ -webkit-keyframes NAME-YOUR-ANIMATION (0% (opacity: 0;) 100% (opacity: 1;)) @ -moz-keyframes NAME-YOUR-ANIMATION (0% ("

Множественные границы - CSS-хитрости

Множественные границы - CSS-хитрости

Использование псевдоэлемента (ов) Вы можете разместить псевдоэлемент так, чтобы он находился либо позади элемента, либо больше, создавая эффект границы с его собственным "

Внешний вид без набора полей - CSS-хитрости

Внешний вид без набора полей - CSS-хитрости

Это не набор полей

Booyah!

.fieldset (position: relative; border: 1px solid "

Неутешительное изменение размера изображения в IE - CSS-хитрости

Неутешительное изменение размера изображения в IE - CSS-хитрости

Img (-ms-interpolation-mode: bicubic;) Если вы уменьшите изображение с помощью атрибутов ширины и / или высоты, оно будет выглядеть ужасно в IE, если вы не используете "

Блокировка ориентации - CSS-хитрости

Блокировка ориентации - CSS-хитрости

@media screen и (минимальная ширина: 320 пикселей) и (максимальная ширина: 767 пикселей) и (ориентация: альбомная) (html (transform: rotate (-90deg); transform-origin: left top; "

Тени загиба страницы - CSS-хитрости

Тени загиба страницы - CSS-хитрости

Ul.box (position: relative; z-index: 1; / * предотвращение падения теней за контейнерами с фоном * / overflow: hidden; list-style: none; margin: 0; "

Несколько столбцов - CSS-хитрости

Несколько столбцов - CSS-хитрости

Вот пример простого класса с тремя столбцами: .three-col (-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : "

Вложенные и расширяемые папки - CSS-хитрости

Вложенные и расширяемые папки - CSS-хитрости

Первоначально это была демонстрация Мартина Иванова, в которой использовались скрытые флажки и смежные одноуровневые комбинаторы для установки «состояния» каждой папки. Живая демонстрация "

Именованные цвета и шестнадцатеричные эквиваленты - CSS-хитрости

Именованные цвета и шестнадцатеричные эквиваленты - CSS-хитрости

Название цвета HEX Цвет AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "

Используйте маркеры для ввода без пароля (или альтернативные маркеры) - CSS-хитрости

Используйте маркеры для ввода без пароля (или альтернативные маркеры) - CSS-хитрости

Это работает для текстовых вводов (например, текст, электронная почта и т. Д.), Но вы не можете изменить фактический ввод пароля. Вариант использования = ???. input (-webkit-text-security: none;) "

Пуговицы в стиле пикросс - CSS-хитрости

Пуговицы в стиле пикросс - CSS-хитрости

Как и в игре PICROSS3D. Технология CSS3 Кнопка Кнопка Кнопка .btn (цвет: белый; семейство шрифтов: Helvetica, Arial, Sans-Serif; размер шрифта: "

Предотвращение отскока прокрутки в Lion - CSS-хитрости

Предотвращение отскока прокрутки в Lion - CSS-хитрости

Просто убедитесь, что вы обнулили поля и отступы для этих элементов (нормально при любом сбросе или нормализации). html, body (height: 100%; overflow: "

Печатать URL после ссылок - CSS-хитрости

Печатать URL после ссылок - CSS-хитрости

@media print (a :: after (content: "(" attr (href) ")";)) "

Perfect CSS Sprite / кнопка раздвижных дверей - CSS-хитрости

Perfect CSS Sprite / кнопка раздвижных дверей - CSS-хитрости

Важное примечание! Раздвижные двери - довольно старая техника. Это было время в сети, но, вероятно, это не самый разумный способ в наши дни. У нас есть"

PNG Hack / Fix для IE 6 - CSS-хитрости

PNG Hack / Fix для IE 6 - CSS-хитрости

Для фоновых изображений CSS .yourselector (width: 200px; height: 100px; background: url (/folder/yourimage.png.webp) no-repeat; _background: none; "

Сокращения качества - CSS-хитрости

Сокращения качества - CSS-хитрости

Немного более светлый цвет (если текст черный), пунктирная нижняя граница и курсор в виде вопросительного знака. Это стало несколько стандартизированным подходом ",

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

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

HTML: .. или .. Go CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Один только отрицательный отступ, к сожалению, не помогает удалить текст "

Удалить пунктирные границы ссылок - CSS-хитрости

Удалить пунктирные границы ссылок - CSS-хитрости

Пунктирные границы вокруг ссылок - это функция доступности, которая есть в большинстве браузеров по умолчанию. Это для пользователей, которые должны или хотят использовать клавиатуру, вот "