CSS3

Работаем с эффектом при наведении (hover)

Эффект при наведении hoverДобрый день! Сегодня хочу привести небольшой пример работы с эффектом при наведении. Из примера вы научитесь выделять определенный элемент из группы элементов при наведении на них курсора мыши. Пример строиться на использовании свойства opacity и псевдо-классов. Итак, приступим.

28 Май, 2011 | Рубрики: CSS3 Читать статью

Мини-бар MS Office с помощью jQuery и CSS

мини-бар MS Office на jQuery и CSSЯ думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS Office 2007. По сути он повторяет часть функций одной из панелей быстрого доступа. Главным его плюсом является возможность изменять стиль выделенного текста «на лету». Мини-бар обычно появляется рядом с курсором мыши, что позволяет пользователю быстро применить нужные действия к выделенному тексту. Примерно такой же мини-бар мы попробуем создать сегодня для сайта. Вариантов его применения масса. Один из них комментарии — позвольте пользователям применять стандартные тэги для оформления своих комментариев.

26 Май, 2011 | Рубрики: CSS3, JavaScript Читать статью

6 полезных CSS кнопок

кнопка нравится на CSSС помощью CSS мы полностью меняем представление о создании кнопок для сайтов и интернет проектов. Раньше нам приходилось использовать несколько изображений для создания кнопки, а теперь несколько строк кода. Далее в статье вы увидите рецепт для приготовления шести различных кнопок с использованием CSS. Код представленный в статье вы можете просто взять и вставить в свой проект. Учитывайте только то, что часть кнопок будут некорректно отображаться в IE, но это решаемо — достаточно прочесть статью об условных комментариях для Internet Explorer.

25 Май, 2011 | Рубрики: CSS3 Читать статью

Условные комментарии Internet Explorer

firefox кушает ieКак мы все знаем, Internet Explorer это тот браузер, который доставляет веб разработчикам массу неудобств. Возможно это происходит потому, что Microsoft на данный момент имеет 3 совершенно разные версии браузера. Возможно потому, что ранние версии не стнадартизованы. Возможно потому, что IE6 не обновлялся несколько лет. Какова бы не была причина, IE с нами и нам нужно что-то с этим делать.

24 Май, 2011 | Рубрики: CSS3, Internet Explorer Читать статью

3D текст с помощью CSS

3D текстВидели ли вы сайт Дэвида Дэсандро? Сайт выглядит очень минималистично. А вот футер очень интересный: текст при наведении на него указателя мыши становится трехмерным. Техника создания таково эффекта очень проста. Давайте посмотрим как можно сделать такой эффект. Использовать мы будем несколько свойств CSS3.

23 Май, 2011 | Рубрики: CSS3 Читать статью

Градиенты CSS

Градиенты CSSСовсем недавно, в статье Градиентная заливка с помощью CSS3 я приводил парочку примеров работы линейного градиента. Мы тогда так и не коснулись вопроса радиального градиента. Сегодня я хотел бы дать немного больше информации о градиентах CSS. На данный момент градиенты поддерживаются браузерами Internet Explorer 8+, Firefox, Safari и Chrome и мы можем с уверенностью применять их на наших сайтах. Давайте подробнее рассмотрим градиенты CSS: их синтаксис и поддержку браузерами.

21 Май, 2011 | Рубрики: CSS3 Читать статью

Уникальные шрифты: Google Fonts

Google Web FontsКаждый веб-дизайнер встает перед выбором шрифтов для своего проекта. Сегодня мы рассмотрим API от гугла Google Fonts. Плюс шрифтов от гугла в том, что нам не требуется ничего скачивать. Мы просто подключаем нужный шрифт, прописываем стили CSS и все. В этой статье я приведу готовые куски кода для каждого из шрифтов, которые поддерживают кириллические символы.

19 Май, 2011 | Рубрики: CSS3 Читать статью

Создаем вращающиеся иконки с помощью CSS3 и Mootols

вращающиеся иконкиСегодня мы займемся тем, что попробуем приукрасить внешний вид иконок на профили (RSS, twitter и т.д.). Добавим немного движения в эти иконки. А делать мы будем это с помощью CSS3 анимации.Так же с помощью JavaScript библиотеки MooTools мы будем задавать произвольное расположение и поворот иконок. Давайте посмотрим как притворить это в жизнь.

18 Май, 2011 | Рубрики: CSS3, JavaScript Читать статью

Меняем фоновый цвет страницы с помощью CSS3

смена фонового цветаСегодня рассмотрим замечательную возможность. Называется она CSS анимация с помощью keyframe’ов (ключевые кадры). К сожалению, на данный момент мы имеем очень скудную поддержку браузерами данного вида анимации. Но наш любимый Google Chrome и его брат Safari отлично обрабатывают этот вид анимации. Ниже в статье мы создадим веб страницу, на которой фоновый цвет будет изменяться с течением времени с помощью ключевых кадров. Интересно? Тогда идем дальше.

17 Май, 2011 | Рубрики: CSS3 Читать статью

CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon

CSS3 для начинающихПосле продолжительного перерыва продолжим изучать CSS3. Сегодня речь пойдет о том как создать кнопки в стиле BonBon (конфетки такие вкусные) на CSS3. Кнопки будут разных размеров, цветов, форм и т.д. Но при всем этом они имеют достаточно минималистичный дизайн, что позволяет использовать их почти на всех сайтах. Напоминаю, что это статья из цикла CSS3 для начинающих. А примеры можно посмотреть на демо сайте http://css3demos.rusdigi.org.

16 Май, 2011 | Рубрики: CSS3 Читать статью