Создание адаптивной сетки с Sass

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

Продолжить

Коллекция CSS переходов страниц

Сегодня я хотел бы поделиться с Вами коллекцией необычных CSS переходов страниц. Мы собрали несколько анимаций, которые можно применить к "страницам" для создания интересных эффектов навигации при переходе на новую страницу. Некоторые эффекты очень упрощенны, то есть простое перемещение, другие используют CSS perspective и 3D-transforms для создания некоторой глубины и динамики.

Продолжить

Простой способ создания адаптивной шапки сайта на HTML и CSS

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

Продолжить

Создание Color Wheel на Jade и Sass

Когда я начал работать в дизайне, самым сложным для меня было, подобрать правильные цвета для проекта. Иногда я думал, что у меня нет таланта или вкуса, который необходим для создания красивой цветовой палитры.

Продолжить

Адаптивное Retina-меню на CSS

В этом уроке мы создадим красочное Retina-меню, с использованием цветовой схемы от Maliwan, производителя игры Borderlands. Меню автоматически меняется на одну из трех различных раскладок, в зависимости от размера окна браузера. Для создания retina-меню, мы будем использовать иконочный шрифт.

Продолжить

Расширяем Sass с помощью PostCSS

Недавно в Twitter мне задали вопрос - "Почему вы используете PostCSS совместно с Sass, что это вам дает?". Поэтому я решил написать небольшую статью о том, как я использую PostCSS в сочетании с Sass.

Продолжить

Создание интерактивной инфографики при помощи SVG и CSS анимаций

На сегодняшний день, многие современные браузеры имеют поддержку формата SVG. Если вы еще незнакомы с SVG, он расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика). В отличие от форматов растровых изображений таких как PNG, JPG или GIF, векторная графика, в файлах SVG, полностью масштабируется для любого размера экрана и при любом разрешении без потери качества. В большинстве случаях, SVG файлы будут иметь меньший размер, это сопутствует более быстрой загрузке.

Продолжить

Изучаем LESS за 15 минут

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

Продолжить

Изучаем Sass за 15 минут

Если вы пишете обильное количество CSS кода, препроцессор может значительно уменьшить уровень стресса и сэкономить много драгоценного времени. Такие инструменты, как Sass, Less, Stylus или PostCSS помогают упростить поддержку больших и сложных таблиц стилей и делают их более понятными. Благодаря таким функциям, как переменные, функции и примеси, код становится более организованным, что позволяет разработчикам работать быстрее и допускать меньше ошибок.

Продолжить

Уроки Flexbox

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

Продолжить

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.