Красная строка на 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 пикселя основного текста.
Рамка вокруг видимой области браузера
Рамка вокруг видимой части окна браузера выводится следующими строками 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;}Вывод рамки вокруг изображения
Изображения размещенное на сайте можно украсить рамкой, для этого нужно всего лишь добавить следующий код в таблицу стилей:
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 таким способом не работает.
Открывающиеся закрывающиеся перетаскиваемые блоки
Перетаскиваемые блоки бывают очень полезны и не менее интересны, хотя их редко применяют на практике. Применений таким блокам можно найти огромное количество, например форма обратной связи, информация, для которой нет места на странице и т.д. и т.п.
Для создания открывающихся закрывающихся перетаскиваемых блоков нам понадобится библиотека 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>Всё, блоки готовы к использованию.
Пример блоков можно посмотреть здесь.
Reset CSS стилей
Самая полная и самая лучшая версия сброса CSS стилей. Нужно лишь вставить нижеприведенный код на страницу либо в отдельный CSS файл.
CSS-код:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}Фоновое изображение для форм
Формы без CSS – код на ветер.
CSS-код:
input {
background:#ffffff url(form-background.gif) repeat;
}HTML-код:
<input type="text">Всё!