css

Вёрстка с помощью CSS Grid

Очень просто и доходчиво рассказано как использовать CSS Grid на практике.

Подключение шрифта к html странице

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

Как же подключить шрифт к странице? Существует несколько способов:

Подробнее

Элементы типографики для новичков

Полезное видео про узкие колонки, выравнивание текста, высоту строк, модульные шкалы.

 


5 flexbox техник при создании сайта

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

Подробнее

Геометрические фигуры на CSS

Во всех примерах используется один HTML-элемент

Квадрат

square

#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 анимацией. Используя эту информацию, остается добавить элемент и класс в таблицу стилей и использовать анимацию как угодно.

 

Подробнее