RU UA

CSS (AMP версия)

Как добиться адаптивности картинок с помощью CSS

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

Как создать простые кнопки с помощью CSS3

В сегодняшнем уроке мы на практике сделаем несколько классных, но простых, кнопок с помощью CSS3 стилей. Вы можете их использовать для красивого оформления пользовательского интерфейса своих проектов. Итак, приступим…  …

Пример использования функции calc() для изменения размера шрифта в CSS

Ранее мы делали краткий обзор функции calc() в CSS. Сегодня мы хотим рассмотреть небольшой практический пример, который даст решение для плавного масштабирования размера шрифта в зависимости от размера экрана. Если…

Ознакомление с функцией calc() в CSS

Функция calc() в CSS – это простой способ выполнить простые математические действия прямо в CSS стилях без использования, например, языка программирования PHP. Функция умеет работать с четырьмя простыми математическими операторами:…

Основные виды 3D-трансформаций в CSS

Когда появились CSS-трансформации, с элементами стало возможным проводить разные преобразования: их можно смещать, поворачивать, наклонять, сдавливать и растягивать. А с помощью 3D-преобразований в CSS стали возможными еще более невероятные вещи.…

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

С помощью свойства line-height в CSS устанавливается величина пространства между строками. В блочных элементах свойство влияет на минимальную высоту строк внутри элемента. Для встроенных элементов это свойство влияет на высоту,…

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

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

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

С помощью CSS можно создавать поистине потрясающие сайты. А правильный подход к использованию стилей позволяет реализовать практически любые идеи в веб-дизайне. И одним из главных моментов здесь является эффективное использование…

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

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

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

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

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

Псевдокласс в CSS стилях – это ключевое слово, которое при добавлении к селектору определяет его особое состояние. К примеру, псевдокласс :focus позволяет применять особые CSS-стили для элементов, которые находятся в фокусе (например, можно подсвечивать фокусное…

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

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

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

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

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

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

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

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