Различные красивости и фантики при помощи CSS3

В общем то много интересного говорят сейчас о CSS3. Он дает большие возможности и различные вкусности которых нам так всегда не хватало. Конечно же, часто приходится искать нестандартные решения, особенно если заказчик противится прогрессу браузеров, и ему все равно где, что и как, но на его XP SP1 стоит Internet Explorer 6, и ни на что его менять он не собирается.

В общем это все грустно и печально, но в последнее время мне стали попадаться заказчики, которые все чаще говорят: «Ну значит пользователям Internet Explorer не повезло.» Это на самом деле замечательно. Понятно, что верстка никуда не должна ехать, ничего не должно слетать в наших «самых любимых браузерах», однако такой сговорчивый заказчик, и подход к делу с этой стороны позволяют нам использовать различные плюшки, которые упрощают верстальщику жизнь, а главное уменьшают вес страницы, а значит дает дополнительные возможности для высоконагруженных порталов.

И тем не менее многие это уже все знают, и мечтают об «правильных людях и заказчиках», а мы перейдем к делу. Под катом красивые формы и градиентные кнопочки.

Активные CSS3 кнопки в стиле WEB 2.0

Так выглядит кнопка, и я расскажу как она делается, но прежде всего о ее преимуществах:

1) Прежде всего они сделаны на чистом HTML+CSS, без использования JavaScript.

2) Градиент поддерживается IE7,8,9, Firefox 3.6, Chrome, и Safari, и наши кнопки не будут выглядеть обычными квадратиками в IE (ну кроме IE6, в нем кнопка будет без градиента, но цветная).

3) Кнопки универсальны и динамичны, благодаря тому что они созданы без изображений — растягивайте их в какую хотите сторону.

4) Кнопки активны и реагируют на события, причем опять же кроссбраузерно.

5) Такие красивости можно применить к любому элементу HTML, будь то a, p, h1 и т. д.

Внешний вид

Тут комментарии излишни.

Реакция на события

Такие кнопки имеют три состояния: normal, hover, active. Спокойное состояние, наведение курсора и нажатие соответственно.

Исходный код

Исходный код довольно прост в понимании, главное иметь хотя бы начальные знания CSS3. В первой части мы просто задаем начальные параметры кнопки.

.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);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin:30px;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

Теперь создадим подкласс и зададим цвет кнопкам, причем мы можем создавать сколь угодно много таких подклассов и делать разноцветные кнопки:

.orange {
	color: #FFF;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Финал

Ну а тут все еще проще. Мы задаем любому HTML объекту стиль кнопки и подстиль цвета и получаем результат:

<a href="#" class="button orange">Йа Кнопко</a>

Красивые формы средствами CSS3

Задание стилей для форм — это отдельная головная боль очень многих верстальщиков. Когда заказчик говорит что хочет вот такую красивенькую форму отправки сообщений, это еще не самое страшное, но когда все формы на сайте должны особенными, да еще и чуть ли не на каждой странице разные, а потом еще и должны быть скругленные углы и прочие сладости, я, например, начинаю выть. Может это предвзятое отношение, но я ненавижу формы. И тем не мене с ними повседневно приходится встречаться, и я покажу Вам как сделать симпатичные формы не слишком забивая себе голову, если заказчик не против, что в IE эти формы буду выглядеть простенько.

Первоначальная разметка и стилизация

На этом этапе все элементарно, но тем не менее размещу код.

Разметка:

<form class="form">
    <p class="name">  
        <input type="text" name="name" id="name" />  
        <label for="name">Имя</label>  
    </p>    
    <p class="email">  
        <input type="text" name="email" id="email" />  
        <label for="email">E-mail</label>  
    </p>    
    <p class="web">  
        <input type="text" name="web" id="web" />  
        <label for="web">Сайт</label>  
    </p>    
    <p class="text">  
        <textarea name="text"></textarea>  
    </p> 
    <p class="submit">  
        <input type="submit" value="Отправить" />  
    </p> 
</form>

Ну и CSS соответственно:

input, textarea {  
	padding: 9px;  
	border: solid 1px #E5E5E5;  
	outline: 0;  
	font: normal 13px/100% Verdana, Tahoma, sans-serif;  
	width: 200px;  
	background: #FFFFFF;  
}  
  
textarea {  
	width: 400px;  
	max-width: 400px;  
	height: 150px;  
	line-height: 150%;  
}  
  
input:hover, textarea:hover,  
input:focus, textarea:focus {  
	border-color: #C9C9C9;  
}  
  
.form label {  
	margin-left: 10px;  
	color: #999999;  
}  
  
.submit input {  
	width: auto;  
	padding: 9px 15px;  
	background: #617798;  
	border: 0;  
	font-size: 14px;  
	color: #FFFFFF;  
}

Сейчас это выглядит вот так:

Добавим лоска

Вот тут мы добавим тени и градиент при помощи CSS3. Опять же ничего собственно сложного, но знать основы необходимо.
Для input и textarea добавим следующий код:

	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

Уже неплохо, неправда ли?

Добавим градиента:

	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEE), to(#FFFFFF));  
	background: -moz-linear-gradient(top, #FFFFFF, #EEE 1px, #FFFFFF 25px);

Теперь форма выглядит вот так:

Вывод

В целом довольно просто, но уже очень сильно меняет внешний вид обычных форм. Можно еще дальше играться с градиентами, тенями, добавлять красивости к кнопке отправки формы и т. п. Тут у каждого уже свой взгляд на мир. В общем CSS3 очень упрощает и ускоряет разработку, если это позволяет проект и вот этому примеры.