Оформление в стиле CSS3

На данный момент поддержка CSS3 в разных браузерах реализована по-разному, поэтому придётся для каждого задавать свой стиль.

В Opera – это чистый CSS3; стили с приставкой -webkit – для браузеров, использующих движок Webkit, таких как Chrome или Safari; с приставкой -moz – для браузеров с движком Mozilla’s Gecko: Firefox, Camino, Flock и SeaMonkey. В IE тоже можно сделать тень, но она будеть выглядеть совсем не так, как CCS3 тень в других браузерах. Поддержку CSS3 в IE пока только обещают в 9 версии.

Начнём с применения стилей к элементам формы, а точнее к полям ввода.
Добавим тень для придания элементам глубины и объёма
Синтаксис:

box-shadow: [color] [horizontal offset] [vertical offset] [blur];

Horizontal offset – сдвиг тени по горизонтали. Если вы укажите ее равной «2px», тень будет сдвинута на два пикселя вправо.
Vertical offset – тоже самое, только по горизонтали.
Blur – уровень размытости тени, 0 – минимум.

Так будет выглядеть наш Box-shadow:

input, textarea {
	box-shadow: rgba(0,0,0, 0.3) 0px 0px 6px;
	-moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 6px;
	-webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 6px;
}

Функция RGBA (Red Green Blue Alpha) – RGB цвет + прозрачность.

Вот её синтаксис:

rgba([red],[green],[blue],[opacity]);

Что получается в итоге (браузерозависимо).

До:

После:

На CSS3 также можно создавать красивые кнопки, без внедрения каких-либо изображений. Размер кнопок легко изменяется отступами, плюсом в данном методе является то, что его можно применить к любым HTML элементам, таким как div, span, p, a, button, input и т.д.

Достоинства данного метода:
1. Чистый CSS — никаких картинок или Javascript.
2. Градиенты поддерживаются во всех браузерах (IE, Firefox 3.6, Chrome и Safari. Из Opera градиент временно исключён до завершения обсуждений, но скорее всего будет добавлен в новых версиях).
3. Кнопки растягиваются — размер кнопок и радиус закругленных углов CSS кнопок меняется пропорционально со значениями отступов и размером шрифта.
4. Кнопка имеет три положения: нормальное, при наведении и при нажатии.
5. Может применяться к любым HTML элементам.
6. В случае, если CSS3 не поддерживается, будет отображаться обычная кнопка (без градиентов и теней).

Как будет выглядеть кнопка в разных браузерах:

Элементы кнопки:

Cледующий код является общим для всех кнопок с классом .button. Используется значение em для отступов и радиусов углов, чтобы кнопка была «резиновая» и меняла свои размеры в зависимости от размера шрифта. Чтобы увеличить размер кнокпи и радиус углов, просто поменяйте значения border-radius, font-size и padding.

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  border-radius: .5em;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  position: relative;top: 1px;
}

Ниже код для белой кнопки. Первая строчка с background — на случай, если отключены CSS, вторая — для браузеров с поддержкой Webkit, третья — для Firefox, четвёртая — для Opera и последняя — фильтр для градиента, который применяется лишь в Internet Explorer.

.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	background-image: -o-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	background-image: -o-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	background-image: -o-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

Что получилось (браузерозависимо).
Тэг ссылки:

Белая Скруглённая Средняя Малая

Другие тэги

Button Span

P

H3