Фрагменти коду 2025, Січень
Просто переконайтеся, що ви також обнуляєте поля та відступи для цих елементів (нормально при будь-якому скиданні або нормалізації). html, body (висота: 100%; переповнення: "
Як і в грі PICROSS3D. Кнопка кнопки CSS3 Кнопка кнопки .btn (колір: білий; сімейство шрифтів: Helvetica, Arial, Sans-Serif; розмір шрифту: "
Це працює з текстовими введеннями (наприклад, текстом, електронною поштою тощо), але ви не можете змінити фактичні введення пароля. Приклад використання = ???. введення (-webkit-text-security: none;) "
Назва кольору HEX Color AliceBlue # F0F8FF AntiqueWhite # FAEBD7 "
Це демонстраційна версія, яку спочатку створив Мартін Іванов, використовуючи приховані прапорці та суміжні комбінатори братів та сестер, щоб встановити "стан" кожної папки. Демо-версія "
Ось приклад простого класу з трьох колон: .three-col (-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : "
Ul.box (позиція: відносна; z-індекс: 1; / * запобігання відпаданню тіней за контейнерами з фонами * / переповнення: приховане; стиль списку: немає; поле: 0; "
Екран @media та (мінімальна ширина: 320 пікселів) та (макс. ширина: 767 пікселів) та (орієнтація: альбомний) (html (перетворення: обертання (-90deg); перетворення-початок: лівий верх; "
Img (-ms-interpolation-mode: bicubic;) Якщо зменшити зображення за допомогою атрибутів width та / або height, це буде виглядати жахливо в IE, якщо ви не використовуєте "
Фонове зображення:"
Буя! Це не набір полів
Використовуючи псевдоелемент (и) Ви можете розташувати псевдоелемент таким чином, що він знаходиться або позаду елемента, і більше, роблячи ефект кордону своїм "
Основна декларація та використання @ -webkit-keyframes ІМЯ-ВАША АНІМАЦІЯ (0% (непрозорість: 0;) 100% (непрозорість: 1;)) @ -moz-ключові кадри ІМ'Я-ВАША АНІМАЦІЯ (0% ("
Веб-сторінки в iOS за замовчуванням мають прокрутку в стилі "імпульсу", коли одним натисканням пальця веб-сторінка прокручується, і вона продовжується до кінця
Браузери, які підтримують кілька фонів (WebKit з самого початку, Firefox 3+), використовують такий синтаксис: #box (background: url (icon.png.webp) угорі ліворуч "
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, акронім, адреса, великий, цитувати, код, del, dfn, em, шрифт, "
Текст у тегах
не обертається за замовчуванням. Наприклад, дивіться фрагмент коду нижче! Якщо це спричиняє проблеми з макетом, одним із рішень є вказати "
Ви завжди можете застосувати фільтр до елемента, щоб зробити його монотонним у сенсі відтінків сірого: Дивіться Монотонний перо - зображення Кріса Койєра (@chriscoyier)
Howdy .layered-paper (background: #eee; box-shadow: 0 1px 1px rgba (0,0,0,0.15), / * Тінь верхнього шару * / 0 10px 0 -5px #eee, / * Другий шар * / 0 "
Одиниця розміру шрифту rem схожа на em, лише замість каскадної обробки вона завжди відносно кореневого (html) елемента (додаткова інформація). Це досить "
A: посилання (колір: синій;) a: відвідане (колір: фіолетовий;) a: наведення курсора (колір: червоний;) a: активне (колір: жовтий;) посилання, відвідуване, наведення, активне L, V, H, A Любовна ненависть"
Ви можете зробити так, щоб він автоматично ховався, а не завжди показував: html (-ms-overflow-style: -ms-autohiding-scrollbar;) Виходить так: Кредит Тьєррі "
Потрапляючи прямо до коду, ось робоча реалізація: html (розмір шрифту: 16px;) @media screen та (min-width: 320px) (html (size-font: calc (16px + "
Ми перенесли цей фрагмент у наш канонічний фрагмент щодо цієї теми. Див .: Обробка довгих слів та URL-адрес "
Екран лише для @media та (ширина пристрою: 768px) (/ * Для загальних макетів iPad * /) Екран лише для @media та (min-device-width: 481px) та (max-device-width: "
* Мовно специфічно * /: lang (af) (лапки: '201E' '201D' '201A' '2020-2021';): lang (ak) (сімейство шрифтів: Lucida, "DejaVu Sans", спадкувати; ): lang (ar) (сімейство шрифтів: Tahoma "
. шестикутник (ширина: 100 пікселів; висота: 55 пікселів; позиція: відносна;). шестикутник,. шестикутник: до,. шестикутник: після (фон: червоний; коробка-тінь: 0 0 10 пікс. "
Це лише WebKit, але це найчистіший спосіб зробити це, оскільки текст залишається редагованим та вибирається веб-текстом. h1 (розмір шрифту: 72 пікселів; фон: "
A (position: relative; padding-bottom: 2px; text-decoration: none;) a: hover :: after (content: ""; position: absolute; bottom: 2px; left: 0; height: 1px; "
Як у середині 2012 року Twitter. вхід, текстова область (-webkit-перехід: всі 0,30 с легкість входу-out; -moz-перехід: всі 0,30 с легкість виходу; -ms-перехід: всі 0,30 с "