Красная строка на CSS
Красная строка на CSS
CSS-код:
p {
text-indent: 20px; /* Отступ красной строки в пикселах */
}HTML-код:
<p>Текст текст текст!</p>Задаем стиль первой буквы в абзаце
Стиль первой буквы в абзаце можно задать следующим кодом:
CSS-код:
p:first-letter {
color: blue; /* Цвет первой буквы */
font-size: 300%; /* Размер первой буквы */
}HTML-код:
<p>Текст текст текст!</p>В CSS код можно добавить столько стилей, сколько душе угодно.
Задаем цвет линии HR
Для того, чтобы раскрасить линию <hr> любым цветом, нужно применить для нее следующий маленький код:
CSS-код:
hr {
border: none; /* Убираем границу для браузера Firefox */
color: #3c00ff; /* Цвет линии для браузера Internet Explorer */
background-color: #3c00ff; /* Цвет линии для браузера Firefox и Opera */
height: 2px; /* Толщина линии */
}В принципе это все, что нужно.
Градиентные заголовки на 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 пикселя основного текста.
Вывод рамки вокруг изображения
Изображения размещенное на сайте можно украсить рамкой, для этого нужно всего лишь добавить следующий код в таблицу стилей:
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
Отличная шпаргалка по HTML 5.
Формат jpg, размер 4961 на 3508 пикселей, вес 4.15 мегабайта.
Фоновое изображение для форм
Формы без CSS – код на ветер.
CSS-код:
input {
background:#ffffff url(form-background.gif) repeat;
}HTML-код:
<input type="text">Всё!
Декорирование ссылки бэкграундом
Ссылки можно украсить разными способами, подчеркнуть, сменить цвет, сменить размер, и т.д. Но в этом примере рассмотрим украшение ссылки бэкграундом, т.е. картинкой на заднем фоне. Для этого понадобится любая картинка, которая будет служить задним фоном, и следующий код.
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
Картинка которую я использовал в качестве фона в примере можно взять здесь.
Иконка в адресной строке браузера
Иконка в адресной строке браузера, а за одно и в избранном делается очень просто. Для этого нам понадобится:
Первое – иконка в формате 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 может не отображаться, для отображения нужно добавить сайт в избранное.
Раскраска ячеек таблицы через одну
Для того, чтобы раскрасить ячейки таблицы через одну, например в гостевой книге, нам понадобится следующий скрипт который нужно разместить после таблицы, которой требуется раскраска.
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