- •Каскадные Таблицы Стилей
- •Изменение ширины элемента с «шагом» в несколько пикселей из песочницы
- •В чем суть?
- •Как это работает?
- •Еще чуть-чуть о круглых аватарках на css3 и маленькой тайне Оперы из песочницы
- •6 Декабря 2011, 06:01
- •Круглые аватарки средствами css 3
- •2 Декабря 2011, 01:49
- •Свойство «text-size-adjust» становится более кроссбраузерным
- •Реалистичные тени при помощи css3 без использования изображений
- •InstaCss: удобный поиск по справочнику css
- •Тултипы на css3 и html5 из песочницы
- •Создаем анимированные кнопки при помощи css3
- •Создаем оригинальные hover-эффекты при помощи css3
- •Селекторы css
- •Это заголовок первого уровня
- •Это заголовок второго уровня
- •Это заголовок первого уровня
- •Это заголовок второго уровня
- •Внешние таблицы стилей
- •Пример кода
- •Пример кода
- •Встроенные стили
- •Образец кода
- •Каскадные таблицы стилей: язык css
- •Глава 2.1. Введение в таблицы стилей
- •2.1.1. Что такое css?
- •Моя домашняя страница
- •2.1.2. Включение таблиц стилей в html-документ
- •2.1.2.1. Внешние таблицы стилей
- •2.1.2.2. Внутренние таблицы стилей
- •2.1.2.3. Таблицы стилей элементов
- •2.1.3. Синтаксис css
- •2.1.3.1. Кодировка символов
- •2.1.3.2. Директива @charset
- •2.1.3.3. Операторы, директивы и правила
- •2.1.4. Типы данных css
- •Целые и действительные числа
- •Размеры
- •Процентные значения
- •Счетчики
- •Угловые величины
- •Времена
- •Частоты
- •2.1.5. Типы устройств отображения
- •2.1.6. Директива @media
Тултипы на 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;
}
Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось. Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках - его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.