Тултипы на css3 и html5 из песочницы
В
связи с тем, что на Хабрахабре не нашёл
я описания данного простого и в то же
время удобного способа создания простых
«тултипов» — всплывающих подсказок, я
решил о нём написать.
В данном методе
не будет использоваться JS, мы довольствуемся
лишь CSS3 и HTML5.
Читать дальше →
-
html5
-
, css3
-
, transitions
-
, tooltips
-
, I love CSS3
+105
9 ноября 2011, 19:01
524
Nico_izo
46
Создаем анимированные кнопки при помощи css3
В
данной статье я хочу поделиться с вами
некоторыми экспериментами по созданию
анимированных кнопок при помощи CSS3.
Идея заключается в создании анимированных
ссылок с разными стилями, hover-эффектами
и пр.
В данных примерах используются
иконки с webiconset.com,
а также шрифт от Just
Be Nice.
Мы
рассмотрим каждый пример и разберем
как выглядит их HTML-структура и стили
для разных состояний кнопок.
Обратите
внимание, что анимация/переходы будут
работать только в браузерах, которые
поддерживают эти CSS3-свойства.
Чтобы
не захламлять код в уроке я не буду
использовать префиксы для различных
браузеров. Их вы сможете увидеть в архиве
с примерами.
Читать дальше →
-
css3
-
, animation
-
, buttons
+199
9 ноября 2011, 00:05
1012
Mary Lou
webmasters_by
40
Создаем оригинальные hover-эффекты при помощи css3
Мощь
CSS3 огромна и в этом уроке вы сможете
увидеть, как использовать его креативно.
Мы собираемся создать несколько эффектов
при наведении курсора мыши с помощью
CSS3 transitions. При наведении курсора на эскиз
будет показываться описание миниатюр,
с использованием различных стилей в
каждом примере.
CSS - Урок 3. Правила и селекторы CSS
CSS,
как и любой язык, имеет свой синтаксис.
В нем нет ни элементов, ни параметров,
ни тегов. В нем есть правила. Правило
состоит из селектора и блока объявления
стилей, заключенного в фигурные
скобки:
Сам
блок объявления стилей состоит из
свойств и их значений, разделенных
точкой с запятой:
Давайте
попробуем на практике. Откройте
html-страницу и css-страницу, созданные в
прошлом уроке. Давайте зададим нашей
странице голубой фон. Как вы помните,
за это отвечает тег <body>,
значит идем на страницу style.css и пишем
следующий код:
body{
background: blue;
}
Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:
body{
background: blue;
color: white;
}
Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
body{
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}
Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось. Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках - его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.