.button {
	margin: 10px;
	text-decoration: none;
	font: bold 25px 'Trebuchet MS',Arial, Helvetica;
	display: inline-block;
	text-align: center;
	color: #fff;
	border: 1px solid #9c9c9c;
	border: 1px solid rgba(0, 0, 0, 0.3);
	text-shadow: 0 1px 0 rgba(0,0,0,0.4);
	box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	}
.button, .button span {
	-moz-border-radius: 6px;
	border-radius: 6px;
	}
.button span {
	border-top: 1px solid #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	display: block;
	padding: 12px 50px;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
		-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
		-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
		-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
	background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
		-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
		-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
		-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
	-moz-background-size: 3px 3px;
	-webkit-background-size: 3px 3px;
	}
.button:hover {
	box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.4);
	}
.button:active  {
	position: relative;
	top: 1px;
	}

/* Коричневая кнопка */
.button-brown {
	background: #8f3714;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf6f50), to(#8f3714) );
	background: -moz-linear-gradient(-90deg, #bf6f50, #8f3714);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf6f50', EndColorStr='#8f3714');
	}
.button-brown:hover {
	background: #bf6f50;
	background: -webkit-gradient(linear, left top, left bottom, from(#8f3714), to(#bf6f50) );
	background: -moz-linear-gradient(-90deg, #8f3714, #bf6f50);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8f3714', EndColorStr='#bf6f50');
	}
.button-brown:active {
	background: #8f3714;
	}
/* /Коричневая кнопка */

/* Оранжевая кнопка */
.button-orange {
	background: #f09c15;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8c939), to(#f09c15) );
	background: -moz-linear-gradient(-90deg, #f8c939, #f09c15);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f8c939', EndColorStr='#f09c15');
	}
.button-orange:hover {
	background: #f8c939;
	background: -webkit-gradient(linear, left top, left bottom, from(#f09c15), to(#f8c939) );
	background: -moz-linear-gradient(-90deg, #f09c15, #f8c939);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f09c15', EndColorStr='#f8c939');
	}
.button-orange:active {
	background: #f09c15;
	}
/* /Оранжевая кнопка */

/* Фиолетовая кнопка */
.button-purple {
	background: #6F50E7;
	background: -webkit-gradient(linear, left top, left bottom, from(#B8A9F3), to(#6F50E7) );
	background: -moz-linear-gradient(-90deg, #B8A9F3, #6F50E7);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B8A9F3', EndColorStr='#6F50E7');
	}
.button-purple:hover {
	background: #B8A9F3;
	background: -webkit-gradient(linear, left top, left bottom, from(#6F50E7), to(#B8A9F3) );
	background: -moz-linear-gradient(-90deg, #6F50E7, #B8A9F3);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#6F50E7', EndColorStr='#B8A9F3');
	}
.button-purple:active {
	background: #6F50E7;
	}
/* /Фиолетовая кнопка */

/* Зелёная кнопка */
.button-green {
	background: #428739;
	background: -webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739) );
	background: -moz-linear-gradient(-90deg, #c8dd95, #428739);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');
	}
.button-green:hover {
	background: #c8dd95;
	background: -webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95) );
	background: -moz-linear-gradient(-90deg, #428739, #c8dd95);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');
	}
.button-green:active {
	background: #428739;
	}
/* /Зелёная кнопка */

/* Голубая кнопка */
.button-blue {
	background: #4477a1;
	background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
	background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
	}
.button-blue:hover {
	background: #81a8cb;
	background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
	background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
	}
.button-blue:active  {
	background: #4477a1;
	}
/* /Голубая кнопка */

/* Красная кнопка */
.button-red {
	background: #D82741;
	background: -webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741) );
	background: -moz-linear-gradient(-90deg, #E84B6E, #D82741);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');
	}
.button-red:hover {
	background: #E84B6E;
	background: -webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E) );
	background: -moz-linear-gradient(-90deg, #D82741, #E84B6E);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');
	}
.button-red:active {
	background: #D82741;
	}
/* /Красная кнопка */

2. HTML

<a href="#" class="button button-brown"><span>Кнопочка</span></a>
<a href="#" class="button button-orange"><span>Кнопочка</span></a>
<a href="#" class="button button-purple"><span>Кнопочка</span></a>
<a href="#" class="button button-green"><span>Кнопочка</span></a>
<a href="#" class="button button-blue"><span>Кнопочка</span></a>
<a href="#" class="button button-red"><span>Кнопочка</span></a>

.accordion {
	background-color: #eee;
 	border: 1px solid #ccc;
	width: 600px;
	padding: 10px;
	margin: 50px auto;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 #999;
	-webkit-box-shadow: 0 1px 0 #999;
	box-shadow: 0 1px 0 #999;
	}
.accordion section {
 	border-bottom: 1px solid #ccc;
	margin: 5px;
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background-image: -webkit-linear-gradient(top, #fff, #eee);
	background-image:    -moz-linear-gradient(top, #fff, #eee);
	background-image:     -ms-linear-gradient(top, #fff, #eee);
	background-image:      -o-linear-gradient(top, #fff, #eee);
	background-image:         linear-gradient(top, #fff, #eee);
  	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
.accordion h2, .accordion p {
	margin: 0;
	}
.accordion p {
	padding: 10px;
	}
.accordion h2 a {
	display: block;
	position: relative;
	font: 14px/1 'Trebuchet MS', 'Lucida Sans';
	padding: 10px;
	color: #333;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
.accordion h2 a:hover {
	background: #fff;
	}
.accordion h2 + div {
	height: 0;
	overflow: hidden;
	-moz-transition: height 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
	}
.accordion :target h2 a:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	border-top: 5px solid #333;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	}
.accordion :target h2 + div {
	height: 200px;
	}

2. HTML

<div class="accordion">
	<section id="one">
		<h2><a href="#one">Заголовок 1</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="two">
		<h2><a href="#two">Заголовок 2</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="three">
		<h2><a href="#three">Заголовок 3</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="four">
		<h2><a href="#four">Заголовок 4</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
	<section id="five">
		<h2><a href="#five">Заголовок 5</a></h2>
		<div>
			<p>Рыба представляет собой бессмысленный текст, который нужен для наполнения шаблона, создания нескольких тестовых постов, на примере которых можно проверить, как будет выглядеть сайт. Еще одной целью использования текстовой рыбы является естественное распределение пробелов и букв в абзацах, которого невозможно достигнуть, если использовать короткий осмысленный текст, размноженный дублированием. Наверняка вы уже догадались, что речь идет о Lorem Ipsum - это словосочетание часто встречается на демо-сайтах.</p>
		</div>
	</section>
</div>

h1 {
	margin: 0;
	color: #fff;
	text-align: center;
	font: bold 100px Georgia, Helvetica, Arial, sans-serif;
	text-shadow: 0 1px 0 #cccccc,
				 0 2px 0 #c9c9c9,
				 0 3px 0 #bbbbbb,
				 0 4px 0 #b9b9b9,
				 0 5px 0 #aaaaaa,
				 0 6px 1px rgba(0, 0, 0, 0.1),
				 0 0 5px rgba(0, 0, 0, 0.1),
				 0 1px 3px rgba(0, 0, 0, 0.3),
				 0 3px 5px rgba(0, 0, 0, 0.2),
				 0 5px 10px rgba(0, 0, 0, 0.25),
				 0 10px 10px rgba(0, 0, 0, 0.2),
				 0 20px 20px rgba(0, 0, 0, 0.15);
	}

2. HTML

<h1>Jemand.ru - Веб строительство начинающим!</h1>

Демо

a, a:visited {
	color: #464530;
	text-decoration: none;
}
.drop-menu {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 10px 10px;
	font-size: 22px;
	height: 25px;
	max-height: 25px;
	width: 400px;
	background: #fff;
	cursor: pointer;
	font-family: Georgia, Arial;
	border: 1px solid #f6f0e4;
	-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.plus2 {
	display: inline-block;
	padding-right: 10px;
	font-weight: bold;
	font-size: 12px;
	}
.plus {
	display: inline-block;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
  	-o-transition: .3s ease-in-out;
	}
.drop-menu:hover {
	border: 1px solid #fff;
	}
.drop-menu:hover .sub-menu {
	display: inline-block;
	}
.drop-menu:hover .plus {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	}
.sub-menu {
	display: none;
	width: 400px;
	background: #fff;
	padding: 10px 10px;
	margin-left: -11px;
	margin-top: 10px;
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	}
.sub-menu li {
	list-style-type: none;
	display: block;
	border-bottom: 1px dotted #eaeaea;
	font-size: 19px;
	height: 22px;
	padding: 8px 0;
	}
.sub-menu li img {
	margin-right: .5em;
	}
.sub-menu li:hover {
	border-bottom: 1px dotted #bababa;
	}

2. HTML

<div class="drop-menu">
	<span class="plus">+</span>   Наведите курсор мыши сюда!
	<ul class="sub-menu">
		<li><a href="http://jemand.ru"><span class="plus2">+</span>Главная</a></li>
		<li><a href="http://jemand.ru/rubric/html/"><span class="plus2">+</span>HTML</a></li>
		<li><a href="http://web-forum.ws"><span class="plus2">+</span>Форум</a></li>
		<li><a href="http://jemand.ru/rubric/css/"><span class="plus2">+</span>CSS</a></li>
		<li><a href="http://jemand.ru/rubric/css3/"><span class="plus2">+</span>CSS3</a></li>
	</ul>
</div>

Демо

p.blue::selection {
	background: #A8D1FF;
	}
p.red::selection {
	background: #FFB7B7;
	}
p.yellow::selection {
	background: #FFF2A8;
	}
p.blue::-moz-selection {
	background: #A8D1FF;
	}
p.red::-moz-selection {
	background: #FFB7B7;
	}
p.yellow::-moz-selection {
	background: #FFF2A8;
	}
p.blue::-webkit-selection {
	background: #A8D1FF;
	}
p.red::-webkit-selection {
	background: #FFB7B7;
	}
p.yellow::-webkit-selection {
	background: #FFF2A8;
	}

2. HTML

<p class="red">
   Я помню чудное мгновенье:
   Передо мной явилась ты,
   Как мимолетное виденье,
   Как гений чистой красоты.

   В томленьях грусти безнадежной,
   В тревогах шумной суеты,
   Звучал мне долго голос нежный
   И снились милые черты.
</p>
<p class="blue">
   Шли годы. Бурь порыв мятежный
   Рассеял прежние мечты,
   И я забыл твой голос нежный,
   Твои небесные черты.	

   В глуши, во мраке заточенья
   Тянулись тихо дни мои
   Без божества, без вдохновенья,
   Без слез, без жизни, без любви.
</p>
<p class="yellow">
   Душе настало пробужденье:
   И вот опять явилась ты,
   Как мимолетное виденье,
   Как гений чистой красоты.

   И сердце бьется в упоенье,
   И для него воскресли вновь
   И божество, и вдохновенье,
   И жизнь, и слезы, и любовь.
</p>

Демо