Верстка \ CSS 3

Flexbox примеры: шаблоны для сайта от начала и до конца

От автора: дни костылей на свойствах float и margin канули в небытие, и в CSS появились новые замечательные свойства, отлично подходящие на эту роль. Такие трюки, как вертикальное выравнивание внутри блока, равномерное распределение места, контроль за сортировкой элементов и прилипающий футер, почти невозможны без flexbox.

Продолжить чтение

Верстка \ CSS 3

Трансформация и маски CSS: наклонные края

От автора: в данной статье мы поговорим о трансформациях и масках css. Во время визуального просмотра страницы наклонные края элементов могут произвести впечатление. Хоть такой подход не распространен, но мы решили на использовать его на сайте The National Trust for Historic Preservation. К различным элементам мы применили различные наклонные края: где-то нижние края широкоформатных изображений, где-то нижние или верхние края блоков с текстом со сплошным фоном.

Продолжить чтение

Верстка \ CSS 3

Эффект растягивания текста на изображении с помощью CSS3

От автора: Эффект растягивания появляющегося текста, используемый в данной статье, состоит из двух частей, каждая из которых выполняется после того, как другая завершится. Добиться данного эффекта можно лишь с помощью использования директивы @keyframes в CSS3.

Продолжить чтение

Верстка \ CSS 3

Модуль Flexbox

От автора: в данной обучающей статье мы разберем некоторые реальные и некогда действительно трудновыполнимые моменты, которые сейчас легко решаются благодаря использованию flexbox.

Продолжить чтение

Верстка \ CSS 3

Модуль Flexbox

От автора: В этом уроке мы продолжим изучение модуля CSS3 Flexbox. В предыдущем уроке мы затронули ключевое понятие данного модуля – понятие осей. В этом уроке мы более детально разберемся в вопросах работы с осями: для чего они нужны, как ими управлять, рассмотрим несколько новых свойств, позволяющих управлять осями и, соответственно, flex-элементами. Также мы узнаем несколько нюансов, о которых стоит помнить при работе с flex-версткой.
Продолжить чтение

Верстка \ CSS 3

Модуль Flexbox

От автора: В этом уроке мы начнем изучение модуля CSS3 Flexbox. Данный модуль предоставляет возможности более гибкой верстки как отдельных элементов на сайте, так и всего сайта целиком. Используя Flexbox, мы можем легко выравнивать колонки, распределять свободное место между элементами, управлять порядком элементов и т.д. Также Flexbox учитывает в своей работе используемую языковую локаль, что немаловажно при работе с языками, начертание которых отлично от привычного нам.
Продолжить чтение

Верстка \ CSS 3

7 CSS инструментов, которые вам следует использовать

От автора: Сейчас становится все сложнее и сложнее писать CSS код. К счастью, есть инструменты, которые немного облегчат процесс его написания. Начиная от нахождения ошибок в ваших таблицах стилей и заканчивая полезными статистическими данными о вашем коде, данные онлайн инструменты несомненно помогут вам в разработке ваших CSS таблиц стилей.

Продолжить чтение

Верстка \ CSS 3

Эффекты увеличения и поворота текста

От автора: Анимация, продемонстрированная в данной статье, выполнена на чистом CSS3. Она состоит из одного простого полупрозрачного слоя поверх изображения и появляющегося текста, который поворачивается и увеличивается при появлении.

Продолжить чтение