Красивые градиентные кнопки без картинок для всех браузеров

Всем привет!

Сегодня мы посмотрим как с помощью CSS3 без картинок сделать вот такие отличные кнопки. Для этого мы будет использовать следующие свойства: RGBA цвета, box-shadow, text-shadow и border-radius. Разметка и стили сделаны с использованием принципа graceful degradation, так что пользователи, браузеры которых не поддерживают указанные технологии, увидят кнопки в нормальном, но не таком хорошем качестве.

Рассматриваемые кнопки имеют три состояния (обычное, наведение и нажатие), их можно масштабировать и изменять пропорции.

Данная статья — перевод статьи «Cross-browser CSS gradient buttons».

@-правила в CSS

Привет,

Сегодня у нас небольшая заметка (основанная на статье «Demystifying CSS At-Rules»), в которой речь пойдет о применении в CSS правил, содержащих в себе символ «@».

В статье будут рассмотрены правила @import, @media, @charset и популярный сейчас @font-face, который позволяет использовать собственные шрифты на страницах сайта (про сторонние шрифты у нас уже была статья «Как использовать любой шрифт на сайте»).

Псевдоклассы в CSS

Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.

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

В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)

JavaScript библиотеки, которые расширяют возможности CSS

Привет!

Сегодня мы рассмотрим не совсем обычные JS фреймворки. Их цель — принести в CSS немного больше функциональности и возможностей.

Приведу пример: вы знаете, что есть браузеры, которые поддерживают закругленные углы (свойство из CSS3), а есть те, которые не поддерживают это. Такое условие можно прописать непосредственно в CSS.

Или, скажем, нужно написать разные стили для пользователей шестого ослика под Маком — тоже не проблема.

CSS хаки — продолжение

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

Краткий обзор CSS3

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