Рубрика: CSS

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

Обзор свойства line-height в CSS-стилях

С помощью свойства line-height в CSS устанавливается величина пространства между строками. В блочных элементах свойство влияет на минимальную высоту строк внутри элемента. Для встроенных элементов это свойство влияет на высоту, которая используется для вычисления высоты коробки (блока) строки. Но, прежде чем мы начнем рассматривать свойство line-height более детально, мы должны дать пояснение двум важным моментам: область содержимого элемента (content-area) и коробка строки (line-box).   Область содержимого элемента (content-area) – это вычисленная высота области содержимого элемента....

Разбираем свойство display в CSS

Свойство display является одним из самых важных свойств CSS, которые используются верстальщиками для построения макета. Самыми популярными значениями этого свойства являются block, inline и none. Значения table и inline-block также довольно распространены. Но кроме этих значений есть еще масса других, которые можно и нужно использовать, и о которых вы, возможно, не знали. Поэтому, этот пост посвящен рассмотрению различных значений свойства display в CSS-стилях.     Прежде чем мы поговорим о свойстве display, мы должны упомянуть...

Расширенные селекторы CSS, о которых нужно знать

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

Использование различных свойств размера шрифта в CSS-стилях

В CSS есть масса различных свойств, которые позволяют влиять на размер шрифта. Кроме этого разнообразия, у данных свойств фактическая величина их значения часто вычисляется браузерами по-разному. Все это обусловлено исторически и по мере развития технологий. Одни свойства устаревают, а другие появляются и становятся популярными. Например, сегодня некоторые свойства уже считаются устаревшими (ex, pt, pc и др.), а другие наоборот становятся все более популярными (vh, vw, vmin и vmax). Последние свойства завоевали любовь веб-дизайнеров благодаря своей...

Ускоряем свой CSS

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

Псевдоклассы в CSS – минимальный набор знаний

Псевдокласс в CSS стилях – это ключевое слово, которое при добавлении к селектору определяет его особое состояние. К примеру, псевдокласс :focus позволяет применять особые CSS-стили для элементов, которые находятся в фокусе (например, можно подсвечивать фокусное поле ввода формы цветом, отличным от других используемых цветов формы).   Синтаксис: селектор:псевдокласс { свойство: значение; } пример .content:hover { background-color: #06a79d; }     Основные псевдоклассы CSS: :active – придает стиль активной ссылке :checked – используется для элементов (например, checkbox и radio), когда они отмечены...

Использование Flexbox в CSS3 для адаптивного дизайна

В этой статье хотим более детально остановиться на использовании flexbox в CSS3, в качестве одного из продвинутых способов достижения адаптивности на сайте. При создании CSS сложность макетов была не такой, какой она бывает в наши дни. Раньше макеты были с фиксированной шириной и небольшими вариациями расположения блоков, а сегодня макеты сайтов могут приобретать практически любые очертания. Все это заставляет разработчиков придумывать хаки для CSS, чтобы контент отображался более-менее правильно.   Flexbox (гибкие коробки) – это...

Основные способы вертикального выравнивания элементов в CSS

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

Основные трюки CSS стилей для начинающих вебмастеров

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

Скошенные края блоков с помощью CSS-масок и трансформаций

С помощью угловатых, скошенных краев у различных html-элементов (картинок, блоков, целых секций) можно придать уникальный вид любой веб-странице. В этой статье мы рассмотрим практические примеры того, как легко можно добавить скошенные края любому html-элементу с помощью простых методик CSS-масок и CSS-трансформаций.     Чтобы создать углы для краев элементов с помощью CSS трансформаций обычно приходится «перекашивать» родительский элемент, а затем «отвязывать» дочерний элемент, но такой метод имеет ряд лишних ограничений. А что делать, если нужно...

Ознакомление с CSS-анимацией (animation)

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

Основы адаптивного дизайна в HTML5 и CSS3

Когда начали появляться первые смартфоны и планшеты, многие веб-мастера начали разрабатывать под эти устройства отдельные сайты. Чуть позже начали появляться методы по внедрению на сайте адаптивного дизайна. И тогда большинство веб-мастеров подхватило эту идею, тем самым реализуя принцип DRY (Do not repeat yourself – не повторяй себя), которая заключается в том, что информация любого вида не должна дублироваться. Есть много причин, почему адаптивный веб-дизайн перешел от того, чтобы называться тенденцией, к тому, чтобы быть синонимом...

Ознакомление с CSS-переходами (transition)

В сегодняшней статье мы проведем ознакомительный рейд по полезным, как я надеюсь, вопросам CSS-переходов. Это новое свойство в CSS3 позволяет создавать на сайте привлекательную и «магическую» интерактивность, даже без использования JavaScript. Рассмотрим также некоторые практические примеры применения этого свойства в CSS.     Развитие языка CSS в последние годы сделало возможной реализацию некоторых действительно удивительных нововведений. Если еще 5 лет назад для создания некой интерактивности на сайте требовалась такая программа, как, например, Adobe Flash, и...

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

В одной из прошлых статей мы уже рассматривали способы достижения адаптивности в веб-дизайне с помощью медиа-запросов CSS3. С помощью CSS медиа-запросов веб-дизайнеры могут создавать стили для определенных устройств, а также при выполнении определенных условий (например, при определенной ширине, высоте или ориентации экрана устройства). В этой публикации мы рассмотрим примеры наиболее часто используемых медиа-запросов в веб-дизайне.     /* ----- Настольные компьютеры и ноутбуки ----------- */ @media only screen and (min-width: 1224px) { /* ваши CSS-стили...