15 полезных трюков CSS, которые вы могли пропустить

Если вы какое-то время были веб-разработчиком, существует высокая вероятность того, что у вас был момент, когда вы пытались выяснить, как что-то кодировать, и поняли после небольшого поиска, что “для этого есть CSS”. Если вы этого не сделали, вы.

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

1. Нумерация заголовков и подзаголовков

   Скажем, у вас есть набор заголовков и подзаголовков в документе, и вы нумеруете их вручную или с помощью сценария. Вместо этого вы можете использовать счетчики CSS для этого. Здесь уже есть подробный пост. А так как это из спецификации CSS2, вы можете поспорить, что она поддерживается всеми браузерами, кроме, возможно, IE 6.

2. Spice Up Обычные Подчеркивания

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

   CSS3 указал не одно, а три новых свойства для оформления текста текст-отделка цвета, текст-отделка линия, а также текст-отделка-стиль которые могут быть добавлены в старое доброе текст-отделка.

   Вы можете использовать их для подчеркивания, наложения, даже для мерцания текста и многого другого. По состоянию на апрель 2015 года только Firefox поддерживает это свойство, но вы можете включить “экспериментальные возможности веб-платформы” использовать его на Chrome.

3. Цитировать цитату

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

   tag также заботится о заключении внутренних кавычек в одинарные кавычки. Итак, где же “для этого есть «CSS»” момент в этом?

   Допустим, вы не хотите использовать двойные кавычки по умолчанию или у вас есть более одного уровня вложенных кавычек, вы можете определить свои предпочтения цитаты для элемента цитаты с помощью CSS с помощью CSS2 цитаты имущество.

4. Управление непослушными таблицами

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

   Чтобы быть конкретным, исправление находится в раскладка стола: фиксированная; значение. Когда вы назначаете фиксированный макет для таблицы, таблица и ширина ячейки определяются шириной таблицы или первой строки ячеек (которые могут быть определены пользователем), а не содержимым. Это поддерживается всеми браузерами.

5. Сделай это липким

   Липкие элементы - это элементы на странице, которые не будут прокручиваться вне поля зрения. Другими словами, он придерживается видимой области (область просмотра или поле прокрутки). Вы можете создать это с помощью CSS, используя положение: липкое;.

   Они действуют как относительно позиционированные элементы перед прокруткой, а затем как фиксированные элементы после достижения порога прокрутки. Теперь, только Firefox поддерживает это.

6. Получите ваш текст в форме

   Вы хотите, чтобы текст на вашей странице плавно изгибался над изображением, которое вы отображали рядом с ним? Ты можешь попробовать CSS Shapes. Для реализации форм CSS мы можем использовать три свойства формы, за пределами, Форма рентабельность а также Форма-изображения порога. По состоянию на апрель 2015 года CSS Shapes поддерживается веб-браузеры.

7. Обязательные поля

   Если вы получили форму, существует высокая вероятность того, что некоторые поля в ней являются обязательными, а другие нет. Вам нужно будет сообщить пользователям, какие есть какие. CSS для этого :требуется :необязательный псевдо-классы. Все современные браузеры поддерживают их.

8. Придирчивый с цветами

   Если вам не нравится определенный цвет, например синий, мы можем закрасить выделенную область другим цветом и :: выбор псевдоэлемент является CSS для этого. Это поддерживается всеми современными браузерами.

9. Я проверял это?

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

   Существует CSS для того, что использует связь между ближайшими братьями и сестрами, двумя элементами рядом. У CSS есть соседний селектор брата, обозначенный плюсом + подписать, и мы можем использовать его для нацеливания метки рядом с флажком. Но как насчет нацеленного проверенного флажка сначала? Здесь : проверено псевдо класс для этого.

10. Как сборник рассказов

    Тогда было бы неплохо, если бы первый “О” в “Давным-давно” выглядит довольно? Мы можем сделать его красивым, ведь для этого есть CSS. Вот где ::первое письмо на помощь приходит псевдоэлемент. Он нацелен на первую букву первой строки целевого элемента. Об этом подробнее здесь.

11. Хочешь узнать больше?

    Элемент может иметь класс X или данные Y или какое-либо другое значение атрибута. Если нам когда-либо понадобится отобразить такое значение атрибута элемента рядом с ним, мы можем использовать Содержание: атр (Х). Он извлекает значение атрибута X элемента, затем мы можем показать его рядом с элементом.

12. Чуть больше влево

    Центрирование элементов для начинающих CSS - это настоящий подвиг. Разным элементам требуется разный набор свойств CSS для их центрирования. Мы рассмотрим один пример из многих, которые доступны во всемирной паутине, так что вы можете еще раз вспомнить, что есть CSS для центрирования вещей.

13. Раскрыть формат файла ссылок

    Когда-нибудь видели маленькое изображение рядом со ссылкой, указывающее, что это за ссылка? PDF? или DOC? Да, есть CSS для этого. Содержание: URL () это то, что мы будем использовать для отображения изображения за ссылками.

14. Триггерный эффект параллакса

    Эффект параллакса - это эффект, используемый для описания, казалось бы, медленного движения фона относительно переднего плана. Этот эффект популярен на сайтах, где реализована параллаксная прокрутка. Есть разные способы реализовать это, пример ниже работает в Firefox с background-attachment: исправлено;.

15. Сила CSS анимации

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

Прочитайте: 50 полезных фрагментов CSS, которые должен иметь каждый дизайнер