HTML CSS Blog » CSS

Градиентные заголовки на CSS

Jemand — Wed, 25 Nov 2009 16:03:07 +0000

Градиентные заголовки для сайта – красота неописуемая, а без изображений, на чистом CSS – верх совершенства!
Хотя ложка дегтя в этой бочке меда есть, и это всеми “любимый” IE6, но и его мы сможем побороть, хотя пора бы забыть навсегда.
Пользователи IE6 помните, кодеры заботятся и о Вас!
Нус, перейдем к коду.

CSS-код:

h1 {
	font: 32px Georgia;
	position: relative;
	color: #0094D6;
	margin: 10px 0;
	padding: 0;
}
h1 b {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 23px; /* Высота в пикселях для IE6 */
	background: #FFF; /* Цвет фона на котором написан заголовок */
	overflow: hidden;  /* для "любимого" IE6 */
	opacity: 0.64;
	filter: alpha(opacity=64);
	-moz-opacity: 0.64;
}

HTML-код:

<h1>Заголовок<b></b></h1>

Как это работает: контейнер <b></b> заливается белым цветом и имеет прозрачность, при этом размещается над текстом и закрывает 23 пикселя основного текста.

Пример.

Рамка вокруг видимой области браузера

Jemand — Tue, 24 Nov 2009 16:23:52 +0000

Рамка вокруг видимой части окна браузера выводится следующими строками HTML и CSS кода:

CSS-код:

#top, #bottom, #left, #right {
	background: #ff0000;
	position: fixed;
}
#left, #right {
	top: 0;
	bottom: 0;
	width: 15px;
}
#left { 
	left: 0; 
}
#right { 
	right: 0; 
}
#top, #bottom {
	left: 0; 
	right: 0;
	height: 15px;
}
#top { 
	top: 0; 
}
#bottom { 
	bottom: 0; 
}

HTML-код:

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

К сожалению Internet Explorer 6 данный код понимает не верно, вызывая искажения, по этому для него подключаем файл ie6.css следующей строкой:

Код:

<!--[if lte IE 6]>
<link href="/ie6.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->

В файл ie6.css добавляем следующую строку:

CSS-код:

#top, #bottom, #left, #right {display: none;}

Пример рамочки.

Вывод рамки вокруг изображения

Jemand — Sun, 22 Nov 2009 16:08:22 +0000

Изображения размещенное на сайте можно украсить рамкой, для этого нужно всего лишь добавить следующий код в таблицу стилей:

CSS-код:

img {
	border: 2px solid #595959;
	padding: 4px;
}

Также можно добавить эффект смены цвета рамки при наведении курсора на изображение, если картинка является ссылкой.

CSS-код:

a:hover img {
	border: 2px solid #000;
	padding: 4px;
}

Готово!
Пример использования здесь.

p.s. В этом примере показана работа с рамками, но не ограничивайтесь только этим кодом, экспериментируйте, можно добавить еще много эффектов которые украсят изображения на Вашем сайте. Только не переусердствуйте!
p.p.s В IE6 hover таким способом не работает.

Открывающиеся закрывающиеся перетаскиваемые блоки

Jemand — Sat, 21 Nov 2009 15:30:11 +0000

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

Для создания открывающихся закрывающихся перетаскиваемых блоков нам понадобится библиотека MotoTools. Её необходимо подключить к странице, для этого добавляем между <head> и </head> следующий код:

Код:

<script type="text/javascript" src="mootools.svn.js"></script>

Сразу после строки, которой подключали MotoTools добавляем JavaScript:

JS-код:

<script type="text/javascript">
window.addEvent('domready', function(){
	$$('#draggables div').each(function(drag){
		new Drag.Move(drag);			
	});	
	$$('#draggables span a').each(function(o){
		$(o).addEvents({'click' : function(event){ 
		$(o.id+'_w').setStyle('display', 'none');
	}		  		  
	})			
	});	
	$$('#links a').each(function(o){
		$(o).addEvents({'click' : function(event){ 
		$(o.id+'_w').setStyle('display', 'block');}		  		  
   	})			
	});	
}); 
</script>

Туда же, в “голову” страницы добавляем немного стилей.

CSS-код:

.window {
	border:solid 6px #343434;
	background:#FFF;
	width:200px;
	height:150px;
	display:none;
}
.msg {
	float:center;
	font-weight:normal;
	font-size:11px;
}

И конечно же нам понадобится HTML, без него никуда.

HTML-код:

<div id="links">
	<a href="#" id="block1">Клик для показа блока №1</a> 
	<a href="#" id="block2">Клик для показа блока №2</a>
</div>
<div id="draggables">
	<div id="block1_w" class="window">
		<span class="msg"><a href="#" id="block1">закрыть</a></span>
		<p>Текст блока №1</p>
	</div>
	<div id="block2_w" class="window">
		<span class="msg"><a href="#" id="block2">закрыть</a></span>
		<p>Текст блока №2</p>
	</div>
</div>

Всё, блоки готовы к использованию.
Пример блоков можно посмотреть здесь.

Горизонтальное раскрывающееся меню

Jemand — Mon, 16 Nov 2009 10:12:59 +0000

Горизонтальное выпадающее меню без использования JavaScript и различных хаков. Меню представляет собой многоуровневый список.

CSS-код:

* {
	margin:0;
	padding:0;
}
#nav {
	font-size:0.7em;
	list-style-type:none;
	width:600px;
	height:25px;
	display:inline-block;
	background:#355C96;
	line-height:25px;
}
#nav li{
	float:left;
	width:120px;
	margin-top:-10000px;
}
#nav li a {
	width:120px;
	text-decoration:none;
	text-align:center;
	color:#fff;
	position:relative;
	float:left;
	margin-right:-119px;
	margin-top:10000px;
}
#nav li a:hover, #content #nav li a:focus, #content #nav li a:active {
	background:#DCE2FC;
	margin-right:0;
	color:#355C96;
}
#nav li ul {
	background:#6286BD;
	float:left;
	margin-top:-25px;
	padding-top:25px;
	margin-bottom:-10000px;
	list-style-type:none;
}
#nav li ul li {
	float:none;
	margin:0;
	width:auto;
}
#nav li ul li a {
	float:none;
	display:block;
	margin:0;
	margin-right:-1px;
	background:#6286BD;
}

HTML-код:

<div class="center">
<ul id="nav">
  <li><a href="">Меню 1</a>
    <ul>
      <li><a href="">Подменю 1</a></li>
      <li><a href="">Подменю 2</a></li>
      <li><a href="">Подменю 3</a></li>
    </ul>
  </li>
  <li><a href="">Меню 2</a>
    <ul>
      <li><a href="">Подменю 1</a></li>
      <li><a href="">Подменю 2</a></li>
      <li><a href="">Подменю 3</a></li>
    </ul>
  </li>
  <li><a href="">Меню 3</a>
    <ul>
      <li><a href="">Подменю 1</a></li>
      <li><a href="">Подменю 2</a></li>
      <li><a href="">Подменю 3</a></li>
    </ul>
  </li>
  <li><a href="">Меню 4</a></li>
  <li><a href="">Меню 5</a></li>
</ul>
</div>

IE 8, Opera 9.62, FF 3.5 – проверено, работает!

Пример выпадающего меню без JS!

Ролловер средствами CSS

Jemand — Mon, 09 Nov 2009 16:57:16 +0000

Ролловер – это элемент страницы, который меняет свой цвет либо размер при наведении на него курсора.
В данном случае рассмотрим ролловер сделанный средствами CSS из одной картинки с горизонтальным смещением.

Для начала нам понадобится картинка длиной 300 пикселей, поделенная на три равных области с разной цветовой заливкой, и высотой 100 пикселей.
Я использую вот такую:

В следующем шаге нам понадобится следующий код:

CSS-код:

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

В коде есть комментарии, из которых, я надеюсь, ясно что к чему.

HTML-код:

<div id="rollover">
	<a href="#"></a>
</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

Декорирование ссылки бэкграундом

Jemand — Sun, 08 Nov 2009 15:57:52 +0000

Ссылки можно украсить разными способами, подчеркнуть, сменить цвет, сменить размер, и т.д. Но в этом примере рассмотрим украшение ссылки бэкграундом, т.е. картинкой на заднем фоне. Для этого понадобится любая картинка, которая будет служить задним фоном, и следующий код.

CSS-код:

a:link, a:visited {
text-decoration : none;
} 
a:hover {
background: url(background.gif) repeat;
}

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

Картинка которую я использовал в качестве фона в примере можно взять здесь.

Всплывающая подсказка при наведении на ссылку (CSS)

Jemand — Sun, 08 Nov 2009 15:08:42 +0000

Иногда возникает необходимость вывести подсказку при наведении курсора на какой либо объект страницы (в данном случае ссылки), но title не подходит по разным причинам, тогда нам на помощь приходит следующий код.

CSS-код:

a {
z-index: 1;
text-decoration: none;
}
a:hover {
position: relative;
}
a span {
display: none;
width: 250px;
}
a:hover span {
text-align: justify;
display: block;
position: absolute;
float: left;
bottom: 15px;
left: 50px;
background: #ffffff;
border: 1px dotted black;
color: #444;
padding: 2px;
z-index: 2;
}

Теперь, чтобы подсказка появлялась при наведении на ссылку, нужно добавить <span>Подсказка!</span> перед закрывающей </a>. Т.е. привести ссылку к виду:

HTML-код:

<a href=”#”>Ссылка<span>Подсказка!</span></a>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

Всплывающая картинка при наведении на ссылку

Jemand — Sat, 07 Nov 2009 11:58:03 +0000

Сразу пример того, что получится, а потом уже код.
Собственно тому, что получается при использовании данного примера, можно придумать много применений, но первое – это конечно меню.

CSS-код:

ul {
position: relative;
width: 100px;
list-style: none;
}
li {
border: 1px solid;
margin: 2px;
padding-left: 5px;
}
a {
display: block;
}
a img {
display: none;
position: absolute;
top: 0;
border: 0;
left: 100%;
}
a:hover img {
display: block;
}

HTML-код:

<ul>
<li><a href="#">  Jemand <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#">  Lyces <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#">  Светлая <img src="image-when-hover-on-link.gif" /></a></li>
</ul>

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

Цветное выделение текста

Jemand — Wed, 04 Nov 2009 20:55:00 +0000

Selection – одна из интересных функций CSS3 при помощи которой можно заменить стандартный цвет выделения текста. На мой взгляд selection практически бесполезна, но возможно кто то придумает этой функции разумное применение. Переходим к коду.

CSS-код:

p {
font-size: 1.5em;
margin-bottom: 2.2em;
}
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

HTML-код:

<div id="page-wrap">
<p class="red">При выделении бэкграунд этого текста будет красным.<p>	
<p class="blue">При выделении бэкграунд этого текста будет голубым.<p>
<p class="yellow">При выделении бэкграунд этого текста будет желтым.<p>
</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64