Фрагменты кода 2025, Февраль
.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px пунктирная)
P (font-size: 24px! important;) Правило! important в конце значения переопределит любые другие объявления стиля этого атрибута, включая встроенный "
A (/ * полностью действующий URL, вероятно, внешняя ссылка * /) a (/ * ссылка на конкретный веб-сайт * /) a, a (/ * внутренняя относительная ссылка * /) a (/ * ссылка на электронную почту * /) a (/ * "
Популярным методом проектирования является создание контейнера содержимого, который выглядит как лист бумаги, и складывание других листов бумаги под ним, добавляя слой "
Главная Каталог Цена О контакте nav (width: 960px; height: 100px; margin: 120px auto; text-align: center;) .top-menu li (display: inline-block; "
Вот для Google Code Prettify (найден в этом источнике). .prettyprint (цвет: # 839496; цвет фона: # 002b36;) .prettyprint .pln (цвет: наследование;) "
H1 # logo (width: 200px; // ширина изображения height: 100px; // высота фона изображения: url (../ path / to / image.jpg.webp); text-indent: -9999px;) Этот метод "
Цитата отображается в браузерах, соответствующих стандартам, с эффектом «большие кавычки перед», а в IE - с толстой левой рамкой и светло-серым цветом.
Для фактического слайдера требуется jQuery и jQuery UI. Лицо состоит из элементов, образованных кругами с радиусом границы. Рот, указывающий на счастье »
Из нижнего колонтитула дизайна v8 CSS-Tricks. Просмотреть нижний колонтитул демонстрации (clear: both; overflow: hidden; font-size: 16px; line-height: 1.3;) # footer-box ("
По умолчанию все версии IE имеют полосу прокрутки в текстовых областях, даже если они пусты. Никакие другие браузеры не делают этого, поэтому, если вы хотите удалить его, чтобы IE мог "
Любая старая ссылка привязки может быть ссылкой на документ PDF, но щелчок по такой ссылке, думающий иначе, может быть удивительным и неудобным для пользователя. Этот"
Это предполагает использование автопрефикса. .face: hover (анимация: встряхните 0.82s кубической кривой Безье (.36, .07, .19, .97) оба; transform: translate3d (0, 0, 0); "
Стандарт: -moz-border-radius: 10px; -webkit-border-radius: 10 пикселей; радиус границы: 10 пикселей; / * на будущее * / -khtml-border-radius: 10px; / * для старых "
Принесите свои приставки! .grow (переход: все .2s легкость входа-выхода;) .grow: hover (transform: scale (1.1);) "
Все любят ленты
.ribbon (font-size: 16px! important; / * Эта лента "Для включения графики с высоким разрешением, но только для экранов, которые могут ее использовать. "Retina" - это "2x": @media (-webkit-min-device-pixel-ratio: 2), "
Бывают случаи, когда действительно длинная строка текста может переполнять контейнер макета. Например: в URL обычно нет пробелов, поэтому они "
Для языков с письмом справа налево вы можете поменять местами макет по умолчанию слева направо в большинстве браузеров просто через атрибут dir. текст справа налево "
A (outline: 0;) Будьте осторожны, удаляя стили контура из ссылок, так как они удобны для использования. Если да, не забудьте определить четкие стили фокуса. Если"
Иногда может потребоваться удалить верхнее или левое поле первого элемента в контейнере. Точно так же правое или нижнее поле от последнего "
На этой странице перечислено множество различных устройств и медиа-запросов, специально предназначенных для этого устройства. Вероятно, это не очень хорошая практика, но полезно знать, каковы размеры всех этих устройств в контексте CSS ".
Webkit-tap-highlight-color: rgba (0,0,0,0); А затем, чтобы разрешить: active стилям работать в вашем CSS на странице в Mobile Safari: "
Пунктирные границы вокруг ссылок - это функция доступности, которая есть в большинстве браузеров по умолчанию. Это для пользователей, которые должны или хотят использовать клавиатуру, вот "
HTML: .. или .. Go CSS: input.button (text-indent: -9000px; text-transform: capitalize;) Один только отрицательный отступ, к сожалению, не помогает удалить текст "
Немного более светлый цвет (если текст черный), пунктирная нижняя граница и курсор в виде вопросительного знака. Это стало несколько стандартизированным подходом ",
Для фоновых изображений CSS .yourselector (width: 200px; height: 100px; background: url (/folder/yourimage.png.webp) no-repeat; _background: none; "
Важное примечание! Раздвижные двери - довольно старая техника. Это было время в сети, но, вероятно, это не самый разумный способ в наши дни. У нас есть"
Sup, sub (vertical-align: baseline; position: relative; top: -0.4em;) sub (top: 0.4em;) "
@media print (a :: after (content: "(" attr (href) ")";)) "