Верстка \ CSS 3

Как создать макет новостного сайта на Flexbox

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

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

Верстка \ CSS 3

Знакомство с CSS свойством clip-path

От автора: веб-сайты имеют преимущественно прямоугольную форму, а вот печатные СМИ не ограничены только лишь прямоугольником. Разница кроется во множестве причин, одна из которых это отсутствие подходящих инструментов. В этом уроке вы узнаете про свойство clip-path, с помощью которого можно кадрировать изображения. Видимая область задается с помощью специальных значений. Мы начнем с основных моментов, рассмотрим синтаксис и затем перейдем на более продвинутые концепции.

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

Верстка \ Статьи по верстке

5 способов создать прилипающий футер

От автора: главная задача прилипающего футера «прилипать» к нижней части окна браузера. Если на странице много контента, то футер должен прилипать строго к нижней границе экрана. Если же контента слишком мало, чтобы пододвинуть футер вниз, опять же требуется его туда опустить.

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

Верстка \ Статьи по верстке

Front-end разработка после Internet Explorer

От автора: добро пожаловать во вторую часть этой небольшой серии статьей, посвященной «началу конца» того, что сообщество разработчиков называет oldIE (т.е. IE вплоть до версии 10). В первой статье были представлены устаревшие техники и практики, от которых уже можно отказаться для упрощения процесса front-end разработки. Статья вызвала довольно интересную дискуссию в комментариях, что побудило меня добавить дисклеймер (который следовало бы добавить и в первую статью задним числом).

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

Верстка \ HTML&CSS

Pixel perfect верстка. Кроссбраузерный плагин

От автора: друзья, приветствую! Наверное, многие слышали термин pixel perfect верстка. Pixel perfect верстка — это верстка, при которой итоговая html страница и исходный PSD макет полностью, до каждого пикселя, совпадают. Если с самим термином все понятно, то с вопросом «Как реализовать попиксельную верстку?» или «Как сравнить верстку и исходный макет?» могут возникнуть сложности. В данном уроке мы рассмотрим плагин, который позволяет быстро и удобно делать попиксельную верстку.

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

Верстка \ Статьи по верстке

Типы данных в Sass

От автора: почти во всех языках программирования есть типы данных, и Sass не исключение. Тип данных – это способ классификации данных по определенным категориям для различных целей. К примеру, 2 – это тип number, а SitePoint – тип string. В этой статье я расскажу вам про все семь типов данных в Sass, а также покажу пример использования каждого типа данных.

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

Верстка \ CSS 3

Слайдер на CSS3

От автора: приветствую вас, уважаемый читатель. Сегодня мы с вами попробуем сделать слайдер на css3. Еще несколько лет назад такое было попросту невозможно, сегодня же это можно сделать абсолютно без помощи javascript, хотя и с некоторыми оговорками. В общем, изучайте. Тут же можно скачать исходник, чтобы посмотреть, как оно работает.

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

Верстка \ CSS 3

Что такое CSS-хаки?

От автора: если вы уже во front-end разработке хотя бы пару лет, вы, скорее всего, уже использовали CSS-хаки. Однако если вы еще новичок, вы могли слышать данный термин, но до конца не понимаете его значение. В этой статье я объясню, что такое CSS-хак, и как им пользоваться. Но сначала я объясню, почему решил написать эту статью.

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

Верстка \ HTML&CSS

Анимация в CSS3

От автора: приветствую вас, дорогой читатель. Сегодня я вам расскажу, как реализовывается в css3 анимация и как ее можно использовать уже сейчас для различных эффектов на сайте.

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