CSS3
Работаем с эффектом при наведении (hover)
Добрый день! Сегодня хочу привести небольшой пример работы с эффектом при наведении. Из примера вы научитесь выделять определенный элемент из группы элементов при наведении на них курсора мыши. Пример строиться на использовании свойства opacity и псевдо-классов. Итак, приступим.
Мини-бар MS Office с помощью jQuery и CSS
Я думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS Office 2007. По сути он повторяет часть функций одной из панелей быстрого доступа. Главным его плюсом является возможность изменять стиль выделенного текста «на лету». Мини-бар обычно появляется рядом с курсором мыши, что позволяет пользователю быстро применить нужные действия к выделенному тексту. Примерно такой же мини-бар мы попробуем создать сегодня для сайта. Вариантов его применения масса. Один из них комментарии — позвольте пользователям применять стандартные тэги для оформления своих комментариев.
6 полезных CSS кнопок
С помощью CSS мы полностью меняем представление о создании кнопок для сайтов и интернет проектов. Раньше нам приходилось использовать несколько изображений для создания кнопки, а теперь несколько строк кода. Далее в статье вы увидите рецепт для приготовления шести различных кнопок с использованием CSS. Код представленный в статье вы можете просто взять и вставить в свой проект. Учитывайте только то, что часть кнопок будут некорректно отображаться в IE, но это решаемо — достаточно прочесть статью об условных комментариях для Internet Explorer.
Условные комментарии Internet Explorer
Как мы все знаем, Internet Explorer это тот браузер, который доставляет веб разработчикам массу неудобств. Возможно это происходит потому, что Microsoft на данный момент имеет 3 совершенно разные версии браузера. Возможно потому, что ранние версии не стнадартизованы. Возможно потому, что IE6 не обновлялся несколько лет. Какова бы не была причина, IE с нами и нам нужно что-то с этим делать.
3D текст с помощью CSS
Видели ли вы сайт Дэвида Дэсандро? Сайт выглядит очень минималистично. А вот футер очень интересный: текст при наведении на него указателя мыши становится трехмерным. Техника создания таково эффекта очень проста. Давайте посмотрим как можно сделать такой эффект. Использовать мы будем несколько свойств CSS3.
Градиенты CSS
Совсем недавно, в статье Градиентная заливка с помощью CSS3 я приводил парочку примеров работы линейного градиента. Мы тогда так и не коснулись вопроса радиального градиента. Сегодня я хотел бы дать немного больше информации о градиентах CSS. На данный момент градиенты поддерживаются браузерами Internet Explorer 8+, Firefox, Safari и Chrome и мы можем с уверенностью применять их на наших сайтах. Давайте подробнее рассмотрим градиенты CSS: их синтаксис и поддержку браузерами.
Уникальные шрифты: Google Fonts
Каждый веб-дизайнер встает перед выбором шрифтов для своего проекта. Сегодня мы рассмотрим API от гугла Google Fonts. Плюс шрифтов от гугла в том, что нам не требуется ничего скачивать. Мы просто подключаем нужный шрифт, прописываем стили CSS и все. В этой статье я приведу готовые куски кода для каждого из шрифтов, которые поддерживают кириллические символы.
Создаем вращающиеся иконки с помощью CSS3 и Mootols
Сегодня мы займемся тем, что попробуем приукрасить внешний вид иконок на профили (RSS, twitter и т.д.). Добавим немного движения в эти иконки. А делать мы будем это с помощью CSS3 анимации.Так же с помощью JavaScript библиотеки MooTools мы будем задавать произвольное расположение и поворот иконок. Давайте посмотрим как притворить это в жизнь.
Меняем фоновый цвет страницы с помощью CSS3
Сегодня рассмотрим замечательную возможность. Называется она CSS анимация с помощью keyframe’ов (ключевые кадры). К сожалению, на данный момент мы имеем очень скудную поддержку браузерами данного вида анимации. Но наш любимый Google Chrome и его брат Safari отлично обрабатывают этот вид анимации. Ниже в статье мы создадим веб страницу, на которой фоновый цвет будет изменяться с течением времени с помощью ключевых кадров. Интересно? Тогда идем дальше.
CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon
После продолжительного перерыва продолжим изучать CSS3. Сегодня речь пойдет о том как создать кнопки в стиле BonBon (конфетки такие вкусные) на CSS3. Кнопки будут разных размеров, цветов, форм и т.д. Но при всем этом они имеют достаточно минималистичный дизайн, что позволяет использовать их почти на всех сайтах. Напоминаю, что это статья из цикла CSS3 для начинающих. А примеры можно посмотреть на демо сайте http://css3demos.rusdigi.org.