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

"Прошитый" вид - CSS-хитрости

"Прошитый" вид - CSS-хитрости

.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px пунктирная)

Техника переопределения стиля - CSS-хитрости

Техника переопределения стиля - CSS-хитрости

P (font-size: 24px! important;) Правило! important в конце значения переопределит любые другие объявления стиля этого атрибута, включая встроенный "

Стиль ссылок в зависимости от назначения - CSS-хитрости

Стиль ссылок в зависимости от назначения - CSS-хитрости

A (/ * полностью действующий URL, вероятно, внешняя ссылка * /) a (/ * ссылка на конкретный веб-сайт * /) a, a (/ * внутренняя относительная ссылка * /) a (/ * ссылка на электронную почту * /) a (/ * "

Эффект сложенной бумаги - CSS-хитрости

Эффект сложенной бумаги - CSS-хитрости

Популярным методом проектирования является создание контейнера содержимого, который выглядит как лист бумаги, и складывание других листов бумаги под ним, добавляя слой "

Меню Spinny Leaf - CSS-хитрости

Меню Spinny Leaf - CSS-хитрости

Главная Каталог Цена О контакте nav (width: 960px; height: 100px; margin: 120px auto; text-align: center;) .top-menu li (display: inline-block; "

Тема Solarized для CodeMirror и Prettify - CSS-хитрости

Тема Solarized для CodeMirror и Prettify - CSS-хитрости

Вот для Google Code Prettify (найден в этом источнике). .prettyprint (цвет: # 839496; цвет фона: # 002b36;) .prettyprint .pln (цвет: наследование;) "

Стандартная замена изображений CSS - CSS-хитрости

Стандартная замена изображений CSS - CSS-хитрости

H1 # logo (width: 200px; // ширина изображения height: 100px; // высота фона изображения: url (../ path / to / image.jpg.webp); text-indent: -9999px;) Этот метод "

Простой и приятный стиль цитат - CSS-хитрости

Простой и приятный стиль цитат - CSS-хитрости

Цитата отображается в браузерах, соответствующих стандартам, с эффектом «большие кавычки перед», а в IE - с толстой левой рамкой и светло-серым цветом.

Смайлик слайдер - CSS-хитрости

Смайлик слайдер - CSS-хитрости

Для фактического слайдера требуется jQuery и jQuery UI. Лицо состоит из элементов, образованных кругами с радиусом границы. Рот, указывающий на счастье »

Вставить поля изображений - CSS-хитрости

Вставить поля изображений - CSS-хитрости

Из нижнего колонтитула дизайна v8 CSS-Tricks. Просмотреть нижний колонтитул демонстрации (clear: both; overflow: hidden; font-size: 16px; line-height: 1.3;) # footer-box ("

Удалить полосу прокрутки из Textarea в IE - CSS-хитрости

Удалить полосу прокрутки из Textarea в IE - CSS-хитрости

По умолчанию все версии IE имеют полосу прокрутки в текстовых областях, даже если они пусты. Никакие другие браузеры не делают этого, поэтому, если вы хотите удалить его, чтобы IE мог "

Подпись "PDF-бомбы" - CSS-хитрости

Подпись "PDF-бомбы" - CSS-хитрости

Любая старая ссылка привязки может быть ссылкой на документ PDF, но щелчок по такой ссылке, думающий иначе, может быть удивительным и неудобным для пользователя. Этот"

CSS анимация ключевых кадров «встряхнуть» - CSS-хитрости

CSS анимация ключевых кадров «встряхнуть» - CSS-хитрости

Это предполагает использование автопрефикса. .face: hover (анимация: встряхните 0.82s кубической кривой Безье (.36, .07, .19, .97) оба; transform: translate3d (0, 0, 0); "

Закругленные углы - CSS-хитрости

Закругленные углы - CSS-хитрости

Стандарт: -moz-border-radius: 10px; -webkit-border-radius: 10 пикселей; радиус границы: 10 пикселей; / * на будущее * / -khtml-border-radius: 10px; / * для старых "

Масштабирование при наведении с переходом - CSS-хитрости

Масштабирование при наведении с переходом - CSS-хитрости

Принесите свои приставки! .grow (переход: все .2s легкость входа-выхода;) .grow: hover (transform: scale (1.1);) "

Лента - CSS-хитрости

Лента - CSS-хитрости

Все любят ленты

.ribbon (font-size: 16px! important; / * Эта лента "

Медиа-запрос Retina Display - CSS-хитрости

Медиа-запрос Retina Display - CSS-хитрости

Для включения графики с высоким разрешением, но только для экранов, которые могут ее использовать. "Retina" - это "2x": @media (-webkit-min-device-pixel-ratio: 2), "

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

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

Бывают случаи, когда действительно длинная строка текста может переполнять контейнер макета. Например: в URL обычно нет пробелов, поэтому они "

Переворот текста - CSS-хитрости

Переворот текста - CSS-хитрости

Для языков с письмом справа налево вы можете поменять местами макет по умолчанию слева направо в большинстве браузеров просто через атрибут dir. текст справа налево "

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

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

A (outline: 0;) Будьте осторожны, удаляя стили контура из ссылок, так как они удобны для использования. Если да, не забудьте определить четкие стили фокуса. Если"

Удалить поля для первых / последних элементов - CSS-хитрости

Удалить поля для первых / последних элементов - CSS-хитрости

Иногда может потребоваться удалить верхнее или левое поле первого элемента в контейнере. Точно так же правое или нижнее поле от последнего "

Медиа-запросы для стандартных устройств - CSS-хитрости

Медиа-запросы для стандартных устройств - CSS-хитрости

На этой странице перечислено множество различных устройств и медиа-запросов, специально предназначенных для этого устройства. Вероятно, это не очень хорошая практика, но полезно знать, каковы размеры всех этих устройств в контексте CSS ".

Удаление серого выделения при нажатии на ссылки в Mobile Safari - CSS-хитрости

Удаление серого выделения при нажатии на ссылки в Mobile Safari - CSS-хитрости

Webkit-tap-highlight-color: rgba (0,0,0,0); А затем, чтобы разрешить: active стилям работать в вашем CSS на странице в Mobile Safari: "

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

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

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

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

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

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

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

Сокращения качества - 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; "

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

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

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

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

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

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