Главная » CSS и CSS3

В этом уроке мы научимся создавать меню аккордеон на чистом CSS3. Так как мы будем создавать его на чистом CSS, оно будет работать только в браузерах и устройствах, которые поддерживают псевдо-класс :target.

Весьма эффектное и оригинальное меню, использующее минимум разметки за счёт применения CSS свойств CSS3 transitions и CSS2 pseudo-elements. Не используется ни единого изображения.

IE8 и IE9 не поддерживают CSS3 transitions, так что состояние при наведении для них не будет анимировано. В этом случае меню выглядит так же, но функционирует как обычное меню. IE7 не хватает поддержки псевдо-элементов :before и :after, так что лента не будет иметь раздвоенных концов складок. Псевдо-элементы могут быть заменены разметкой, поддерживаемой IE7.

Что такое reset-стили и для чего они нужны? и нужны ли они вообще? если вы верстальщик со стажем, то думаю ответ для вас очевиден, для тех же, кто хочет узнать об этом понятии, понять для чего это нужно и как это работает, эта статья.

CSS reset – это сброс CSS стилей, которые устанавливают браузеры по умолчанию для различных HTML-элементов. Нужно это для того, чтобы сверстанная страница сайта отображалась и работала в большинстве браузеров идентично, то есть, для кроссбраузерности.

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

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

Тем не менее, здесь я покажу вам кое-какие очень легкие "хаки" непосредственно для некоторых версий Internet Explorer. Хотя я настоятельно рекомендую вам не использовать эти хаки (так как они не смогут работать в будущем), скажу, что вам будет весьма полезно изучить их, потому как вам, возможно, придется использовать их для создания прототипов сайтов или для определенного временного назначения. Лучше всего, конечно, всегда использовать условные операторы, а не хаки (покажу ниже).

Во всяком случае, в этой статье вы найдете способы задания CSS стилей для конкретных версий Internet Explorer.

В этом уроке я покажу вам, как создать очень естественные и красиво оформленные кнопки, которые обычно делают в фотошопе, используя только CSS3. Некоторые из свойств CSS3, которые я буду использовать: text-shadow, box-shadow, gradient и rounded corners.

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

Продолжение подборки CSS-сниппетов, призванных облегчить жизнь веб-дизайнеру при работе над его проектами.

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

Благодаря передовым свойствам CSS, таким, как градиенты и тени, теперь достаточно легко превратить скучную веб-форму во что-то красивое - с минимальными усилиями. Я покажу вам, как это сделать в сегодняшнем уроке!