Jemand.ru » CSS http://jemand.ru Веб строительство начинающим. Sat, 31 Dec 2011 16:49:09 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Красивые кнопки на CSS http://jemand.ru/krasivye-knopki-na-css/ http://jemand.ru/krasivye-knopki-na-css/#comments Fri, 18 Nov 2011 11:17:18 +0000 Jemand http://jemand.ru/?p=1101 1 . CSS

.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>
]]> http://jemand.ru/krasivye-knopki-na-css/feed/ 0 Мега меню на CSS + jQuery http://jemand.ru/mega-menyu-na-css-jquery/ http://jemand.ru/mega-menyu-na-css-jquery/#comments Wed, 26 Oct 2011 15:17:05 +0000 Jemand http://jemand.ru/?p=1009 1. CSS

ul.ldd_menu {
	margin: 0px;
	padding: 0;
	display: block;
	height: 50px;
	background-color: #0051A1;
	list-style: none;
	font-family: "Trebuchet MS", sans-serif;
	border-top: 1px solid #3474C6;
	border-bottom: 1px solid #3474C6;
	border-left: 10px solid #0051A1;
	-moz-box-shadow: 0px 3px 4px #007BC2;
	-webkit-box-shadow: 0px 3px 4px #007BC2;
	-box-shadow: 0px 3px 4px #007BC2;
	}
ul.ldd_menu a {
	text-decoration: none;
	}
ul.ldd_menu > li {
	float:left;
	position:relative;
	}
ul.ldd_menu > li > span {
	float: left;
	color: #fff;
	background-color: #0051A1;
	height: 50px;
	line-height: 50px;
	cursor: default;
	padding: 0px 20px;
	text-shadow: 0px 0px 1px #fff;
	border-right: 1px solid #3474C6;
	border-left: 1px solid #0049A1;
	}
ul.ldd_menu .ldd_submenu {
	position: absolute;
	top: 50px;
	width: 480px;
	display: none;
	opacity: 0.9;
	left: 0px;
	font-size: 10px;
	background: #0051A1;
	border-top: 1px solid #3474C6;
	-moz-box-shadow: 0px 3px 4px #0051A1 inset;
	-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
	-box-shadow: 0px 3px 4px #0051A1 inset;
	}
a.ldd_subfoot{
	background-color: #f0f0f0;
	color: #444;
	display: block;
	clear: both;
	padding: 15px 20px;
	text-transform: uppercase;
	font-family: Arial, serif;
	font-size: 12px;
	text-shadow: 0px 0px 1px #fff;
	-moz-box-shadow: 0px 0px 2px #777 inset;
	-webkit-box-shadow: 0px 0px 2px #777 inset;
	-box-shadow: 0px 0px 2px #777 inset;
	}
ul.ldd_menu ul {
	list-style: none;
	float: left;
	border-left: 1px solid #2A6DC3;
	margin: 20px 0px 10px 30px;
	padding: 10px;
	}
li.ldd_heading {
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color: #69C3FF;
	text-shadow: 0px 0px 1px #B03E23;
	padding: 0px 0px 10px 0px;
	}
ul.ldd_menu ul li a {
	font-family: Arial, serif;
	font-size: 10px;
	line-height: 20px;
	color: #fff;
	padding: 1px 3px;
	}
ul.ldd_menu ul li a:hover {
	-moz-box-shadow: 0px 0px 2px #2A6DC3;
	-webkit-box-shadow: 0px 0px 2px #2A6DC3;
	box-shadow: 0px 0px 2px #2A6DC3;
	background: #007BC2;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(function() {
		var $menu = $('#ldd_menu');
		$menu.children('li').each(function(){
			var $this = $(this);
			var $span = $this.children('span');
			$span.data('width',$span.width());
			$this.bind('mouseenter',function(){
				$menu.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':'440px'},300,function(){
					$this.find('.ldd_submenu').slideDown(300);
				});
			}).bind('mouseleave',function(){
				$this.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':$span.data('width')+'px'},300);
			});
		});
	});
</script>

4. HTML

<ul id="ldd_menu" class="ldd_menu">
	<li>
		<span>Меню №1</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
				<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №2</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №3</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
</ul>
]]> http://jemand.ru/mega-menyu-na-css-jquery/feed/ 14 Кнопка “Вверх” на CSS + jQuery http://jemand.ru/knopka-vverx-na-css-jquery/ http://jemand.ru/knopka-vverx-na-css-jquery/#comments Fri, 07 Oct 2011 07:55:05 +0000 Jemand http://jemand.ru/?p=900 1. CSS

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
	}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
 	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#back-top a:hover {
	color: #000;
	}
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}
#back-top a:hover span {
	background-color: #777;
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$("#back-top").hide();
		$(function () {
			$(window).scroll(function () {
				if ($(this).scrollTop() > 50) {
					$('#back-top').fadeIn();
				} else {
					$('#back-top').fadeOut();
				}
			});
			$('#back-top a').click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
		});
	});
</script>

jQuery и JS нужно разместить в разделе <head> Вашей страницы в том порядке, как указано здесь.
4. HTML

<p id="back-top">
	<a href="#top"><span></span>Вверх</a>
</p>

Картинка-кнопка
Кнопка вверх

]]> http://jemand.ru/knopka-vverx-na-css-jquery/feed/ 14 Цифровые часы на CSS и jQuery http://jemand.ru/cifrovye-chasy-na-css-i-jquery/ http://jemand.ru/cifrovye-chasy-na-css-i-jquery/#comments Tue, 16 Aug 2011 15:20:15 +0000 Jemand http://jemand.ru/?p=852 1. CSS

.time span {
	display: inline-block;
	width: 20px;
	margin-right: 6px;
}
.time span.colon {
	width: 4px;
}
.time .colon b,
.time span b {
	float: left;
	width: 4px;
	height: 4px;
	overflow: hidden;
	visibility: hidden;
	background: #666;
}
.time .colon b {
	display: none;
	margin: 0 0 4px;
}
.time span.colon .c11,
.time span.colon .c12 {
	display: block;
	visibility: visible;
}
.d0 .c11, .d0 .c12, .d0 .c13, .d0 .c14, .d0 .c15, .d0 .c21, .d0 .c25, .d0 .c31, .d0 .c35, .d0 .c41, .d0 .c45, .d0 .c51, .d0 .c52, .d0 .c53, .d0 .c54, .d0 .c55 {visibility: visible;}
.d1 .c13, .d1 .c21, .d1 .c22, .d1 .c23, .d1 .c33, .d1 .c43, .d1 .c51, .d1 .c52, .d1 .c53, .d1 .c54, .d1 .c55 {visibility: visible;}
.d2 .c11, .d2 .c12, .d2 .c13, .d2 .c14, .d2 .c15, .d2 .c25, .d2 .c31, .d2 .c32, .d2 .c33, .d2 .c34, .d2 .c35, .d2 .c41, .d2 .c51, .d2 .c52, .d2 .c53, .d2 .c54, .d2 .c55 {visibility: visible;}
.d3 .c11, .d3 .c12, .d3 .c13, .d3 .c14, .d3 .c15, .d3 .c25, .d3 .c32, .d3 .c33, .d3 .c34, .d3 .c35, .d3 .c45, .d3 .c51, .d3 .c52, .d3 .c53, .d3 .c54, .d3 .c55 {visibility: visible;}
.d4 .c11, .d4 .c15, .d4 .c21, .d4 .c25, .d4 .c31, .d4 .c32, .d4 .c33, .d4 .c34, .d4 .c35, .d4 .c45, .d4 .c55 {visibility: visible;}
.d5 .c11, .d5 .c12, .d5 .c13, .d5 .c14, .d5 .c15, .d5 .c21, .d5 .c31, .d5 .c32, .d5 .c33, .d5 .c34, .d5 .c35, .d5 .c45, .d5 .c51, .d5 .c52, .d5 .c53, .d5 .c54, .d5 .c55 {visibility: visible;}
.d6 .c11, .d6 .c12, .d6 .c13, .d6 .c14, .d6 .c15, .d6 .c21, .d6 .c31, .d6 .c32, .d6 .c33, .d6 .c34, .d6 .c35, .d6 .c41, .d6 .c45, .d6 .c51, .d6 .c52, .d6 .c53, .d6 .c54, .d6 .c55 {visibility: visible;}
.d7 .c11, .d7 .c12, .d7 .c13, .d7 .c14, .d7 .c15, .d7 .c25, .d7 .c35, .d7 .c45, .d7 .c55 {visibility: visible;}
.d8 .c11, .d8 .c12, .d8 .c13, .d8 .c14, .d8 .c15, .d8 .c21, .d8 .c25, .d8 .c31, .d8 .c32, .d8 .c33, .d8 .c34, .d8 .c35, .d8 .c41, .d8 .c45, .d8 .c51, .d8 .c52, .d8 .c53, .d8 .c54, .d8 .c55 {visibility: visible;}
.d9 .c11, .d9 .c12, .d9 .c13, .d9 .c14, .d9 .c15, .d9 .c21, .d9 .c25, .d9 .c31, .d9 .c32, .d9 .c33, .d9 .c34, .d9 .c35, .d9 .c45, .d9 .c51, .d9 .c52, .d9 .c53, .d9 .c54, .d9 .c55 {visibility: visible;}

2. Подключение jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	function digitalClock() {
	var tag = 'div.time';
	var dots = digits = '';
	var digit = tag+' span';
	var span = digit+':nth-child';
	for (i=1; i<6; i++) for (k=1; k<6; k++) dots += '<b class="c'+i+k+'"/>';
	for (i=0; i<8; i++) digits += '<span/>';
	$(tag).append(digits);
	$(digit).append(dots);
	$(span+'(3), '+span+'(6)').removeAttr('class').addClass('colon');
	function time() {
		var date = new Date();
		var hou = date.getHours().toString();
		var min = date.getMinutes().toString();
		var sec = date.getSeconds().toString();
		hou = (hou<10)?0+hou:hou;
		min = (min<10)?0+min:min;
		sec = (sec<10)?0+sec:sec;
		$(digit+'.colon').css({opacity: 1}).each(function() {
			$(this).delay(400).animate({opacity: 0},250);
		})
		$(digit).removeAttr('class');
		$(span+'(1)').addClass('d'+hou.slice(0,1));
		$(span+'(2)').addClass('d'+hou.slice(1,2));
		$(span+'(3)').addClass('colon');
		$(span+'(4)').addClass('d'+min.slice(0,1));
		$(span+'(5)').addClass('d'+min.slice(1,2));
		$(span+'(6)').addClass('colon');
		$(span+'(7)').addClass('d'+sec.slice(0,1));
		$(span+'(8)').addClass('d'+sec.slice(1,2));
		setTimeout(time,1000);
	}
	time();
} /* end of digitalClock() */

(function($) {
$(function() {

digitalClock();

})
})(jQuery)
</script>

4. HTML

<div class="time"></div>

Демо

]]> http://jemand.ru/cifrovye-chasy-na-css-i-jquery/feed/ 0 Выдвигающаяся панель на CSS http://jemand.ru/vydvigayushhayasya-panel-na-css/ http://jemand.ru/vydvigayushhayasya-panel-na-css/#comments Wed, 01 Jun 2011 08:41:10 +0000 Jemand http://jemand.ru/?p=834 1. CSS

#button {
	position: fixed;
	top: 353px;
	left: 0;
	background: #0094d6;
	width: 28px;
	height: 50px;
	font: 40px Georgia;
	color: #fff;
	text-align: center;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
	}
#s_panel {
	position: fixed;
	top: 153px;
	left: -100px;
	background: #ff7700;
	width: 100px;
	height: 150px;
	padding: 100px 0 0 0;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
	}
#button:hover {
	left: 100px;
}
#button:hover #s_panel {
	left: 0;
}

2. HTML

<div id="button"> »
	<div id="s_panel">
		: )
	</div>
</div>

Демо

]]> http://jemand.ru/vydvigayushhayasya-panel-na-css/feed/ 32 Горизонтальное меню с подсказками на CSS http://jemand.ru/gorizontalnoe-menyu-s-podskazkami-na-css/ http://jemand.ru/gorizontalnoe-menyu-s-podskazkami-na-css/#comments Sat, 30 Apr 2011 15:28:10 +0000 Jemand http://jemand.ru/?p=781 1. CSS

#menu ul {
	list-style: none;
	font-family: Georgia;
	font-size: 18px;
	font-style: italic;
	line-height: 24px;
	border: 2px solid #000000;
	border-left: 1px solid #000000;
	float: left;
	padding: 0;
	margin: 12px 0 25px 24px;
	}
#menu ul li {
	float: left;
	}
#menu ul li a {
	display: block;
	text-decoration: none;
	background-color: #595959;
	padding: 5px 10px 0 10px;
	color: #fefefe;
	width: 120px;
	border-right: 1px solid #797979;
	border-left: 1px solid #191919;
	}
#menu ul li a span {
	display: block;
	}
#menu ul li a span.text-top {
	border-bottom: 1px solid #595959;
	}
#menu ul li a:hover span.text-top {
	border-bottom: 1px dashed #fefefe;
	color: #ffddbb;
	}
#menu ul li a span.text-bottom {
	visibility: hidden;
	font-size: 11px;
	text-align: right;
	}
#menu ul li a:hover span.text-bottom {
	visibility: visible;
}

2. HTML

<div id="menu">
	<ul>
		<li>
			<a href="#">
				<span class="text-top">Пункт №1</span>
				<span class="text-bottom">Подсказка №1</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №2</span>
				<span class="text-bottom">Подсказка №2</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №3</span>
				<span class="text-bottom">Подсказка №3</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №4</span>
				<span class="text-bottom">Подсказка №4</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №5</span>
				<span class="text-bottom">Подсказка №5</span>
			</a>
		</li>
	</ul>
</div>

Демо

]]> http://jemand.ru/gorizontalnoe-menyu-s-podskazkami-na-css/feed/ 0 Всплывающая подсказка (tooltip) на CSS http://jemand.ru/vsplyvayushhaya-podskazka-tooltip-na-css/ http://jemand.ru/vsplyvayushhaya-podskazka-tooltip-na-css/#comments Wed, 13 Apr 2011 02:09:30 +0000 Jemand http://jemand.ru/?p=752 1. CSS

.tooltip {
	position: relative;
	}
.tooltip em {
	display: none;
	}
.tooltip:hover em {
	font-style: normal;
	display: block;
	position: absolute;
 	background: #000;
	color: #FFF;
	padding: 3px 5px;
	bottom: 22px;
	right: 0;
	box-shadow: 0 0 5px #ccc;
 	border-radius: 5px;
	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	-webkit-box-shadow: 0 0 5px #ccc;
	-moz-box-shadow: 0 0 5px #ccc;
}
.tooltip:hover em i {
	position: absolute;
	bottom: -7px;
	right: 5px;
	border-top: 7px solid #000;
	border-left: 7px solid transparent;
	display: block;
}

2. HTML

<span class="tooltip">Ночь, улица, фонарь, аптека,<em>Бессмысленный и тусклый свет.<i></i></em></span>

Демо

Кстати, еще один полезный ресурс в Вашу копилку. Посвящен он seo, т.е. поисковой оптимизации сайта, что в наше время является одним из самых важных факторов продвижения сайта.

]]> http://jemand.ru/vsplyvayushhaya-podskazka-tooltip-na-css/feed/ 0 Перекрывающиеся кнопки в меню на CSS http://jemand.ru/perekryvayushhiesya-knopki-v-menyu-na-css/ http://jemand.ru/perekryvayushhiesya-knopki-v-menyu-na-css/#comments Mon, 11 Apr 2011 19:27:02 +0000 Jemand http://jemand.ru/?p=647 1. CSS

ul {
	font-family: Georgia;
	list-style-type: none;
	font-size: 14px;
	color: #fff;
	height: 50px;
	width: 510px;
	margin: 0 auto;
	padding-top: 15px;
	}
ul li {
	float: left;
	padding: 1px;
	text-align: center;
	}
ul li a {
	float: left;
	display: block;
	background: #0094D6;
	text-decoration: none;
	color: #fff;
	position: relative;
	}
ul li a:hover {
	background: #FF7700;
	z-index: 10;
	margin: 0 -10px;
	top: -10px;
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	}
ul li a span {
	float: left;
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #fff;
	width: 100px;
	cursor: pointer;
	}
ul li a:hover span {
	width: 120px;
	padding: 20px 0;
	}

2. HTML

<ul>
	<li><a href="" title=""><span>Главная</span></a></li>
	<li><a href="" title=""><span>Новости</span></a></li>
	<li><a href="" title=""><span>Контакты</span></a></li>
	<li><a href="" title=""><span>Портфолио</span></a></li>
	<li><a href="" title=""><span>Форум</span></a></li>
</ul>

Демо

]]> http://jemand.ru/perekryvayushhiesya-knopki-v-menyu-na-css/feed/ 2 Простой CSS ролловер http://jemand.ru/prostoj-css-rollover/ http://jemand.ru/prostoj-css-rollover/#comments Sat, 09 Apr 2011 12:36:40 +0000 Jemand http://jemand.ru/?p=710 1. CSS

#rollover a {
    display: block;
    width: 200px; /* Ширина блока ролловера, соответствует ширине картинки разделенной на три */
    height: 100px;  /* Высота блока ролловера, соответствует высоте картинки */
    background: url("rollover.png") 0 0 no-repeat; /* Путь до картинки ролловера */
}
#rollover a:hover {
    background-position: -200px 0; /* При наведении курсора на картинку, она смещается на один блок влево, в данном случае на 200 пикселей */
}
#rollover a:active {
    background-position: -400px 0;  /* При клике по изображение, она смещается на два блока влево, в данном случае на 400 пикселей */
}

2. HTML

<div id="rollover">
	<a href="http://jemand.ru"></a>
</div>

Демо

]]> http://jemand.ru/prostoj-css-rollover/feed/ 8 Горизонтальное hover меню на CSS http://jemand.ru/gorizontalnoe-hover-menyu-na-css/ http://jemand.ru/gorizontalnoe-hover-menyu-na-css/#comments Tue, 15 Mar 2011 00:43:26 +0000 Jemand http://jemand.ru/?p=573 1. CSS

* {
	margin: 0;
	padding: 0;
 }
body {
	background: #fff;
	color: #666;
	font: 12px/18px Tahoma, Arial, Helvetica, sans-serif;
	}
#menu {
	margin: 0 auto;
	width: 700px;
	}
#menu ul {
	list-style: none;
	}
#menu li {
	list-style: none;
	display: block;
	float: left;
	margin: 0 1px;
	}
#menu li a {
	display: block;
	float: left;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	background: url(menu_003_bg.jpg) repeat-x;
	height: 173px;
	line-height: 123px;
	padding: 0 25px;
	}
#menu li a:hover {
	color: #fff;
	background: url(menu_003_h.jpg) repeat-x;
	line-height: 173px;
	}
#menu li a.current {
	display: block;
	float: left;
	background: url(menu_003_h.jpg) repeat-x;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	padding: 0 25px;
	line-height: 173px;
	}
#menu li a:hover.current {
	color: #fff;
	}

2. HTML

<div id="menu">
	<ul>
		<li><a href="#" class="current">Главная</a></li>
		<li><a href="#">Форум</a></li>
		<li><a href="#">Контакты</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
	</ul>
</div>

Демо
Кстати, некоторые статьи публикуемые на данном блоге являются переводом с англоязычных сайтов, но т.к. я не достаточно хорошо знаю английский, я заказываю переводы и копирайтинг на сайте Dorus.ru.

]]> http://jemand.ru/gorizontalnoe-hover-menyu-na-css/feed/ 0