Lecaw

Учимся создавать Web-сайты

CSS

Большинство статей в этой категории основаны на CSS3. CSS3 - следующий шаг в развитии каскадных таблиц стилей. Он много нам обещает и, судя по всему, действительно будет прорывом для веб-дизайна. Если, конечно, опять не подкачают разработчики браузеров.

При работе с CSS препроцессорами, такими как SASS, LESS (или любой другой схожий язык программирования), обычно мы используем всю силу переменных. Однако если вы будете спонтанно создавать имена своих переменных, читаемость кода резко ухудшится, как и скорость написания. Вы должны заранее позаботиться об организации имен переменных.

Иногда самые простые макеты нуждаются в сложной структуре, с различными уникальными CSS методами. На сегодняшний день, все известные способы вертикального выравнивания элементов по ширине контента, действительно не самые удобные. Один из этих способов, это выравнивание заголовка по ширине контента (заголовок на левой стороне, навигация на правой), данный способ, является своего рода CSS трюком. Можно конечно сделать элементы плавающими, это не составило бы большого труда. Но, а что если после этого нужно центрировать оба элемента по вертикали. Просто добавьте padding, margin или установите высоту строки в высоту родителя, правильно? Есть, конечно, много решений, но когда начинаете думать над этим, не все они настолько просты в исполнении, в конце концов, они могут принести нежелательные эффекты. 

В этом обучающем уроке я покажу вам как создать анимированные книги на CSS 3D transforms и transitions. Я покажу Вам два типа оформления книг: Твердый переплет и мягкая обложка. Я сделал их такими, чтобы вы могли легко модифицировать их под свои нужды, используя CSS, изображения и некоторые дополнительные мелочи :)

Сегодня, я хочу показать вам несколько простых приемов, использования CSS атрибутов и псевдоэлементов. Наша это - создание заголовка изображения, используя только привязку и изображение в качестве разметки. Мы будем исследовать, как создать псевдоэлементы при помощи некоторых атрибутов и использовать их в качестве эффектов при наведении или просто будем использовать их рядом с изображением. Мы также будем использовать семантическую разметку (подробнее). Это простой пример для того чтобы вы могли легко разобраться, как использовать эти свойства, а также как создать некоторые интересные эффекты с их помощью.

Это – экспериментальный, интерактивный компонент слайд-шоу, который использует HTML5 элемент canvas. Слайд-шоу состоит из формы и текста, оба сделаны из небольших частиц, с которыми пользователь может взаимодействовать. При помощи Canvas мы можем динамически растягивать 2D элементы, используя JavaScript.

Сегодня я хотел бы рассказать вам про загрузку элементов сетки с различными эффектами. Идея состоит в том, чтобы отобразить элементы в сетке с анимацией, когда они находятся в окне просмотра. Некоторые из эффектов созданы при помощи CSS3 scroll effects от Hakim El Hattab.

Страница 3 из 18