Уроки CSS

Мы уже знаем, что в CSS3 есть много новых возможностей для конструирования и использования лучших web форм. HTML5 также играет важную роль в создании более удобных форм, без необходимости применения JavaScript.

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

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

Сегодня вы узнаете, как создать свое выпадающее меню на CSS3 без дополнительного JavaScript кодирования. Мы не будем использовать изображения и, как обычно, обойдемся минимальной разметкой html.

Некоторое время назад мы писали о том, как использовать свой шрифт на сайте с помощью CSS правила @font–face. В этом уроке мы рассмотрим альтернативные решения, с их плюсами и минусами.

Сегодня мы покажем вам, как можно создавать аккуратные скользящие панели изображений с помощью одного лишь CSS. Для панелей мы будем использовать фоновые изображения, и будем анимировать их при щелчке мыши на метке. У нас будут радио кнопки с элементами label, а соответствующие им панели будем находить с помощью обобщенных родственных селекторов.

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

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

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

Градиенты CSS3 не являются чем-то новым, но из-за кроссбраузерной несовместимости они раньше не использовались так широко. Однако вам следует знать, что они поддерживаются Safari, Chrome (Webkit) и Mozilla Firefox (от 3.6). В этой статье я покажу вам, как применять CSS градиенты в основных браузерах: Firefox, Safari, Chrome и IE (сюрприз!).