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