HTML CSS Blog » HTML

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

Шпаргалка по HTML 5

Jemand — Sun, 15 Nov 2009 16:11:38 +0000

Отличная шпаргалка по HTML 5.
Формат jpg, размер 4961 на 3508 пикселей, вес 4.15 мегабайта.

Фоновое изображение для форм

Jemand — Wed, 11 Nov 2009 15:52:55 +0000

Формы без CSS – код на ветер.

CSS-код:

input {
	background:#ffffff url(form-background.gif) repeat;
}

HTML-код:

<input type="text">

Всё!

Я ссылка на пример!

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

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

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

Иконка в адресной строке браузера

Jemand — Sun, 08 Nov 2009 12:03:54 +0000

Иконка в адресной строке браузера, а за одно и в избранном делается очень просто. Для этого нам понадобится:
Первое – иконка в формате ico размером 16 на 16 пикселей. Сделать её можно из любой картинки на сайте Favicon.ru.
Второе – HTML код написанный ниже, который нужно добавить между <head> и </head>.

HTML-код:

<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

Пример использования можно увидеть на этом сайте в адресной строке.

В Internet Explorer favicon может не отображаться, для отображения нужно добавить сайт в избранное.

Раскраска ячеек таблицы через одну

Jemand — Sat, 07 Nov 2009 20:19:09 +0000

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

JavaScript:

function paintTable(obj){
for(i=0; i<obj.rows.length; i++){
    if(i%2>0){
       obj.rows[i].style.background = "#ccc";
    }
}
}
paintTable(document.getElementById("coloring"));

В строке

obj.rows[i].style.background = "#ccc";

задается цвет бэкграунда ячеек.

В строке

paintTable(document.getElementById("coloring"));

задается id таблицы, в данном случае это “coloring”.

Теперь для того, чтобы ячейки у заданной таблицы раскрашивались в нужный нам цвет, нужно присвоить таблице id который указан в скрипте, например так:

HTML-код:

<table id="coloring"> ...

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

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