Красная строка на CSS

Красная строка на CSS

CSS-код:

p {
 text-indent: 20px; /* Отступ красной строки в пикселах */
}

HTML-код:

<p>Текст текст текст!</p>

Примерчик.

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

Задаем стиль первой буквы в абзаце

Стиль первой буквы в абзаце можно задать следующим кодом:

CSS-код:

p:first-letter {
	color: blue; /* Цвет первой буквы */
	font-size: 300%; /* Размер первой буквы */
}

HTML-код:

<p>Текст текст текст!</p>

В CSS код можно добавить столько стилей, сколько душе угодно.

Пример.

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

Задаем цвет линии HR

Для того, чтобы раскрасить линию <hr> любым цветом, нужно применить для нее следующий маленький код:

CSS-код:

hr {
	border: none; /* Убираем границу для браузера Firefox */
	color: #3c00ff; /* Цвет линии для браузера Internet Explorer */
	background-color: #3c00ff; /* Цвет линии для браузера Firefox и Opera */
	height: 2px; /* Толщина линии */
}

В принципе это все, что нужно.

Пример.

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

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

Градиентные заголовки для сайта – красота неописуемая, а без изображений, на чистом 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 пикселя основного текста.

Пример.

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

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

Рамка вокруг видимой части окна браузера выводится следующими строками 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;}

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

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

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

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

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 таким способом не работает.

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

Блок вкладок на jQuery

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

Блок вкладок на jQuery

Положение вкладок можно менять простым перетаскиванием. Но лучше один раз увидеть, чем сто раз услышать.
Посмотреть пример работы можно здесь. Скачать исходники можно по этой ссылке.

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

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

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

Для создания открывающихся закрывающихся перетаскиваемых блоков нам понадобится библиотека 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>

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

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

Альтернатива отсутствующим изображениям

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

Код:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

В этом примере предполагается, что библиотека jQuery лежит в той же папке что и сама страница на которую она подключается.

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

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
	$('img').error(function() {
		$(this).attr({
		src: 'missing.gif', /* Путь до изображения, которое будет заменять отсутствующее */
		style:'border:3px solid #ccc;width:144px;height:144px;'
		});
	});
});
</script>

На завершающем этапе нам понадобится изображение, которое будет замещать отсутствующее. Я взял такое:

Missing

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

Кстати, скрипт работает только с абсолютными путями.

25678910.8370567.1258811155.2452c43da132e75f559665b0bf5b5c5c

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong

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

Горизонтальное выпадающее меню без использования 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!

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong