Вёрстка с помощью CSS Grid
Очень просто и доходчиво рассказано как использовать CSS Grid на практике.
css
Подключение шрифта к html странице
Уже стало обычным то, что шрифты на сайте используются сторонние, т.к. стандартный набор шрифтов установленных в вашу операционную систему не подходит по каким-либо причинам (как правило – не устраивает вид и начертание). Поэтому возникает необходимость в использовании разнообразных шрифтов, разработанных другими компаниями.
Как же подключить шрифт к странице? Существует несколько способов:
Элементы типографики для новичков
Полезное видео про узкие колонки, выравнивание текста, высоту строк, модульные шкалы.
5 flexbox техник при создании сайта
Flexbox – это стандарт CSS, оптимизированный для проектирования пользовательских интерфейсов. Используя различные flexbox свойства можно создать страницу из блоков, которые легко позиционировать и изменять любым способом. Сайты и приложения, созданные таким образом хорошо адаптируются ко всем размерам экрана.
В этой статье мы рассмотрим пять flexbox подходов для решения проблем компоновки страницы. В статье показаны практические примеры для демонстрации сценариев из реальных html страниц, в которых эти методы применяются.
Геометрические фигуры на CSS
Во всех примерах используется один HTML-элемент
Квадрат
#square {
width: 100px;
height: 100px;
background: red;
}Подстройка html элементов под ширину контента
Контент при верстке всегда помещается в элементы-контейнеры, и затем они стилизуются. В некоторых случаях необходимо определить размеры контейнера для контента, не задавая принудительно ему значение. Существует свойство min-content – это одно из встроенных свойств CSS, которые верстальщики используют для создания content-first дизайна. В этой статье рассмотрим CSS свойство max-content, позволяющее задавать неразрывные области.
Использование свойства max-content для обертки групп изображений
К примеру, у нас есть набор изображений:
CSS и Javascript анимационные библиотеки для создания эффектов
Любой современный сайт содержит в себе какой-то объем анимации на своих страницах. Самый простой способ привести внешний вид вашего проекта к привлекательному виду – это использование анимации с использованием CSS3. Использование Javascript позволяет сделать страницы с более мощной логикой анимации, иначе мы будем ограничены только тем, что нам позволяет сделать CSS, хотя и это уже позволяет выполнять основные задачи.
CSS библиотеки
Опытные разработчики уже потратили уйму времени на то, чтобы создать готовые библиотеки с CSS анимацией. Используя эту информацию, остается добавить элемент и класс в таблицу стилей и использовать анимацию как угодно.