HTML CSS Blog

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

Jemand — Tue, 01 Dec 2009 21:45:06 +0000

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

CSS-код:

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

HTML-код:

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

Примерчик.

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

Jemand — Mon, 30 Nov 2009 20:03:36 +0000

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

CSS-код:

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

HTML-код:

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

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

Пример.

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

Jemand — Mon, 30 Nov 2009 09:52:21 +0000

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

CSS-код:

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

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

Пример.

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

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

Jemand — Sun, 22 Nov 2009 12:21:36 +0000

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

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

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

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 — Tue, 17 Nov 2009 22:37:55 +0000

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

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

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

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

25678910.8370567.1258811155.2452c43da132e75f559665b0bf5b5c5c

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

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!