Интересное применение каскадных таблиц css и html
В данной статье приводятся малоизвестные или малоиспользуемые приемы применения html и css, приводящие к интересным эффектам. Данная страничка постоянно обновляется и в нее добавляются разные эффекты, которые можно использовать при строительстве вашего сайта.
- Как сделать "Бегущую строку"?
- Как сделать вывод текста телетайпом?
- Как выделить первую букву параграфа (Создать буквицу)?
- Как изменить внешний вид курсора?
- Как создать простую 3D кнопку средствами css?
- Как изменить размеры и цвет линии средствами css?
- Как, средствами css, сделать у рамок закругленные углы?
- Как сделать иконку для сайта, чтобы она отражалась в поисковиках?
- Как сделать цифровые ссылки на страницы одной тематики?
- Как сделать всплывающие подсказки?
В. Как сделать "Бегущую строку"?
О. Для придания своему сайту своебразного стиля иногда применяют т.н."бегущую строку". "Бегущей строкой" удобно выводить какие-либо новости или что-то, на что необходимо обратить внимание пользователя. Итак, как же это реализовать? Проще некуда. Создает бегущую строку парный тэг marquee.
<p><marquee>Здесь располагается Ваш замечательный текст.</marquee></p>
Выглядит это так:
Текст можно заставить двигаться в любую сторону. Для этого используется оператор direction со значениями left, right, up или down. А чтобы изменить скорость движения текста - используется оператор scrolldelay со значениями от 0 до 1000. Значение 0 - самое быстрое движение текста.
Теперь попытаемся все суммировать. Создадим класс css, где укажем размеры блока движущегося текста:
.go {
margin-left: 100px; /*Отступ слева*/
padding: 5px; /*Отступ вокруг текста*/
width: 250px; /*Ширина блока*/
height:100px; /*Высота блока*/
border: solid 1px black; /*Рамка*/
color: red; /*Цвет текста*/
}
Предположим, что текст должен двигаться вверх в окне, размерами 250 на 100 пикселей и обрамленную рамкой. Ширину блока и рамку мы установили в стилях, а вот высоту нужно установить в html-коде. Для того, чтобы останавливалось движение при наведении курсора, сюда добавлены параметры onmouseover=this.stop() и onmouseout=this.start(). В нужном месте пишем следующий код:
<div class="go"><marquee behavior="scroll" scrolldelay="200" direction="up" onmouseover=this.stop() onmouseout=this.start()>Здесь вставляете нужный Вам текст.</marquee></div>
И оп-ля. Получаем результат:
C таким же успехом можно перемещать и рисунки. Просто вместо текста вставляете рисунок. Ну например так:
<div class="go"><marquee scrolldelay="100" direction="left" onmouseover=this.stop() onmouseout=this.start()><img src="Путь к вашей картинке" width="468" height="100" alt=" "></marquee></div>
И вот что должно получиться:
В. Как сделать вывод текста телетайпом?
О. Здесь без скрипта не обойтись. Ниже приведен листинг самого скрипта. Нужный текст прописывается в самом теле скрипта (см.пример). Строки должны быть взяты в кавычки и разделятся запятой. Если необходимо выделить параграф, то строки разделяются пустыми кавычками.
<script language="javascript">
<!--
var tl = new Array(
"",
" Приветствую Вас, дорогие друзья!",
"",
" Здесь располагается первая строка.",
" Здесь располагается вторая строка.",
" Здесь располагается третья строка и т.д.",
"",
"",
" Мой сайт: http://shad-55.narod.ru"
);
var speed = 60;
var index = 0; text_pos = 0;
var str_length = tl[0].length;
var contents, row;
function type_text()
{
contents = '';
row = Math.max(0, index-13);
while (row<index) contents += tl[row++] + '\r\n';
document.forms[0].elements[0].value = contents + tl[index].
substring(0,text_pos) + "_";
if (text_pos ++== str_length)
{
text_pos = 0;
index++;
if (index != tl.length)
{
str_length = tl[index].length;
setTimeout("type_text()", 100);
}
} else
setTimeout("type_text()", speed);
}
//-->
</script>
Здесь показан код окна, в который будет выводиться Ваш текст. С размерами и фоном поиграйтесь сами.
<center>
<form>
<textarea rows="15" cols="80" style="width: 500; border: 1px solid; background-color:#EAF2F4;">
</textarea>
</form>
</center>
Здесь запускается сам скрипт, код которого вставляется в необходимом вам месте
<script>
type_text()
</script>
У Вас должно получится так:
Правда красиво? Пользуйтесь... Для перезапуска нажмите F5.
В. Как выделить первую букву параграфа?
О. Чтобы выделить первую букву - Создать буквицу, испльзуется псевдостиль first-letter. Для начала создадим класс стиля для буквицы.
.bukvica:first-letter { /*Стиль для буквицы*/
font-family: Arial, serif; /*Шрифт буквицы*/
color: red; /*Цвет буквицы*/
font-size: 150%; /*Размер буквицы*/
font-style: italic; /*Наклонный шрифт*/
font-weight: bold; /*Жирный шрифт*/
}
В нужном месте применяем стиль для параграфа следующим образом:
<p class=bukvica>Здесь располагается текст, в котором мы хотим выделить первую букву.</p>У Вас должно получиться так:
Создать сайт ПРОСТО, с точки зрения его написания. Посетите сайт Новичок для новичков и Вы убедитесь в этом сами.
В. Как изменить внешний вид курсора?
О. Вид курсора определяется с помощью CSS свойства cursor. В нужном месте необходимо определить стиль курсора в тэге <span>.
Ниже приведен список всех курсоров, доступных в css. Наведите курсор мыши на определенную строку, чтобы увидеть как изменяется курсор. Можно также определить пользовательский курсор, который Вы придумали и нарисовали сами. Укажите в стилях путь к вашему файлу курсора. Файл курсора может быть в формате cur, ani (только IE).
- <span style="cursor: default">По умолчанию</span>
- <span style="cursor: url(cursor.cur), auto">Пользовательский</span>
- <span style="cursor: auto">Авто</span>
- <span style="cursor: crosshair">Крест</span>
- <span style="cursor: pointer">Палец</span>
- <span style="cursor: move">Перемещение</span>
- <span style="cursor: e-resize">Горизонтальный</span>
- <span style="cursor: ne-resize">Диагональный вправо</span>
- <span style="cursor: nw-resize">Диагональный влево</span>
- <span style="cursor: n-resize">Вертикальный</span>
- <span style="cursor: se-resize">Диагональный влево</span>
- <span style="cursor: sw-resize">Диагональный вправо</span>
- <span style="cursor: s-resize">Вертикальный</span>
- <span style="cursor: w-resize">Горизонтальный</span>
- <span style="cursor: text">Текстовый</span>
- <span style="cursor: wait">Ожидание</span>
- <span style="cursor: help">Справочный</span>
В. Как создать простую 3D кнопку средствами css?
О. Простую 3D кнопочку сделать довольно просто. Вначале пишем следующие стили для ссылок.
Примечание: Чтобы данные стили не мешали работе основных ссылок, я определил для ссылок кнопок класс button
a.button, a.button:wisited {
margin-left: 280px; /*Отступ кнопки слева*/
color:#000; /*Цвет надписи на кнопке*/
display: block; /*Делаем кнопку блочным элементом*/
border:1px solid; /*Одинарная рамка толщиной в 1 пиксель*/
border-color: #aaa #000 #000 #aaa; /*Цвет рамки - верхняя и левая - темно-серые,
а правая и нижняя - черные*/
text-decoration:none; /*Отменяем подчеркивание ссылки*/
width:8em; /*Ширина кнопочки*/
text-align:center; /*Центровка текста кнопки*/
height:2em; /*Высота кнопочки*/
line-height:2em; /*Сдвиг надписи по вертикали сверху*/
background:#7FFF00; /*Фон ненажатой кнопки*/
font-weight:bold /*Жирный шрифт надписи*/
}
a.button:hover {
color:#000; /*Цвет надписи на нажатой кнопке*/
background:#00FF00; /*Фон нажатой кнопки*/
position:relative; /*Задаем относительное свободное позиционирование*/
top:1px; left:1px; /*Сдвигаем фон сверху и слева на 1 пиксель*/
border-color: #000 #aaa #aaa #000} /*Цвет рамки - верхняя и левая - черные,
а правая и нижняя - темно-серые*/
}
Теперь в нужном месте прописываем следующий html-код:
<a href="#" class="button">Название вашей кнопочки</a>
Получилась вот такая красота!
Ваша кнопочкаВ. Как изменить размеры и цвет линии средствами css?
О. Изменить размеры и цвет линии также просто. Но необходимо учитывать следующее: По умолчанию в Opera и Mozilla вокруг линии существует рамка, а в IE рамки нет. Для того, чтобы в разных браузерах линия выводилась одинаково, необходимо устанавливать свойство рамок. К тому же по умолчанию в Opera рамки плотно прижаты друг к другу без внутренней области и для того, чтобы изменить цвет линии необходимо указывать кроме цвета фона этой области еще и ее высоту (толщину).
Для примера создадим линию длиною в 70%, толщиною в 6 пикселей, голубого цвета и без рамки.
hr {
color:#00BFFF; /*Цвет линии*/
background-color:#00BFFF; /*Цвет линии для Opera и Mozilla*/
height: 6px; /*Толщина линии*/
width: 70%; /*Длина линии*/
border-width:0px; /*Убираем рамку вокруг элемента */
}
В нужном месте вставляйте код <hr> и вуаля... получаете желаемый результат.
В IE линия позиционируется прижатой к левой стороне. Для того, чтобы разместить линию по центру, возьмите тэг <hr> в двойной тэг<center>
Если вам необходима вокруг линии рамочка, измените ее стиль, например так:
border:3px solid red; /*толщина 3 пикселя, одинарная, красная*/
К сожалению в IE до 7 верси включительно и в Mozilla Firefox рамочка вокруг линии не получается. Окрашивается только сама линия.
В. Как средствами css сделать у рамок закругленные углы?
О. Иногда возникает необходимость сделать у рамочек закругленные края. Можно подставить в углах, нарисованные в Фотошопе, специальные уголки. А можно реализовать эту идею исключительно средствами css. Пишем следующие стили и попробуем в них разобраться.
.konteyner { /*Общие стили для элемента*/
display: block; /*Делаем элемент блочным*/
padding: 0; /*Обнуляем внутренние отступы*/
margin: 0 auto; /*Центрируем элемент*/
width: 33%; /*Определяем общую длину элемента*/
margin-bottom:25px; /*Задаем отступ снизу*/
position:relative; /*Задаем относительное свободное позиционирование*/
}
b.top b, b.bottom b{ /*Стили для тэга b*/
display:block; /*Делаем элемент блочным*/
overflow: hidden; /*Скрыть все, что выходит за пределы*/
}
.r1, .r2, .r3, .r4 { /*Стили для радиусов*/
border-left:1px solid #333; /*Толщина рамки и цвет закругления слева*/
border-right:1px solid #333; /*Толщина рамки и цвет закругления справа*/
height:1px; /*Толщина рамки*/
}
.r1{
background:#333; /*Цвет верхней и нижней линии рамки*/
margin:0px 5px; /*Позиционирование фона закругления рамки*/
}
.r2{
background:#FFE4C4; /*Цвет фона радиуса закругления*/
margin:0px 3px; /*Позиционирование фона закругления рамки*/
border-width:0px 2px; /*Длина линии закругления*/
}
.r3{
background:#FFE4C4; /*Цвет фона радиуса закругления*/
margin:0px 2px; /*Позиционирование фона закругления рамки*/
}
.r4{
background:#FFE4C4; /*Цвет фона радиуса закругления*/
margin:0px 1px; /*Позиционирование фона закругления рамки*/
height:2px; /*Высота рамки до закругления*/
}
.txtblock { /*Текстовый блок*/
margin: 0px; /*Обнуляем внешний отступ*/
padding: 5px; /*Устанавливаем внутренний отступ*/
border:solid #333; /*Цвет левой и правой рамки*/
border-width:0px 1px 0px 1px; /*Позиционирование рамки*/
background:#FFE4C4; /*Фон текстового блока*/
color: red; /*Цвет шрифта текстового блока*/
}
Теперь в нужном Вам месте вставляем следующий код:
<div class="konteyner">
<b class="top">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b>
<div class="txtblock">
<p>;Содержимое текстового блока</p>
</div>
<b class="bottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b>
</div>
Вот как должно получиться. Красота-а-а-а...
Содержимое Вашего текстового блока
Если кому интересна глубина понимания техники закругления уголков - вот ссылка себе в ущерб: Создание закругленных углов.
В. Как сделать иконку для сайта, чтобы она отражалась в поисковиках?
О. Для привлекательного и запоминающего вида сайта можно создать иконку, которая будет отображаться во вкладках браузеров, в заголовке страниц и в поисковике Яндекс. Ну, например, так:
Иконка создается в любом графическом редакторе и сохраняется с размерами 16х16 пикселей и с именем favicon.ico.
Затем иконка переносится на сайт в корневую директорию. Теперь, чтобы иконка была видна, необходимо указать к ней путь и свойства. Между тэгами <head> и </head> необходимо вставить такую строку <link rel="icon" href="Абсолютный путь к вашей иконке" type="image/x-icon">. С этого момента иконка будет видна и в поисковике, и во вкладках браузеров, и в заголовке страницы, где эта иконка прописана. В принципе, иконки на разных страницах вашего сайта могут быть разные. Нужно только, чтобы к ней был прописан правильный путь. Существуют программы, которые автоматически конвертируют любую картинку в иконку с размерами 16х16 пикселей. Одну из таких программ можно найти и скачать во вкладке Полезные программы для сайтов.
В. Как сделать цифровые ссылки на страницы одной тематики?
О.Бывает что по одной тематике у Вас несколько страниц и необходимо между ними реализовать связь. Сделать это можно, используя цифровые ссылки. Например у нас есть шесть страниц и нам необходимо организовать переход на любую из них или последовательно страницу за страницей.
Пишем следующие стили:
.page, .num { /*Классы для текстовых и цифровых ссылок*/
text-align: center; /*Центровка надписи*/
color:#5A5B5C; /*Цвет надписи*/
background:#ECF6FE; /*Фон надписи*/
padding:2px 4px 3px 4px; /*Отступы*/
}
.page a, .num { /*Для ссылок этих классов*/
text-decoration:none /*Ссылки без подчеркивания*/
}
.num { /*Класс цифровых ссылок*/
width: 10px; /*Ширина*/
border:1px solid #B0C8EA; /*Рамка*/
}
.activ { /*Класс текущей страницы*/
color:#999999; /*Цвет надписи*/
border:1px solid #999999; /*Рамка*/
background:#fff; /*Фон*/
padding:2px 4px 3px 4px; /*Отступы*/
width: 8px; /*Ширина*/
}
.pagin { /*Класс для строки текущей страницы*/
padding-bottom:7px; /*Отступ снизу*/
font:bold 8pt Verdana,Arial,Helvetica,sans-serif; /*Шрифт*/
color:#666666; /*Цвет шрифта*/
text-align: center; /*Центровка строки*/
}
Теперь вставляем в нужном месте следующий код:
<div class=page>
<a href="Путь к вашей страничке.html" title="Предыдущая">Предыдущая</a>
<span class=page1>
<a href="Путь к вашей страничке.html" title="1">1</a>
</span>
<span class=activ>
2
</span>
<span class=page1>
<a href="Путь к вашей страничке.html" title="3">3</a>
</span>
...
<span class=page1>
<a href="Путь к вашей страничке.html" title="6">6</a>
</span>
<a href="Путь к вашей страничке.html" title="Следующая">Следующая</a>
</div>
<div class=pagin>Страница 2 из 6</div>
Должно получиться вот так:
Второй, более профессиональный вариант:
div.newpag {
padding: 3px 3px 3px 3px;
margin: 3px;
text-align: center
}
div.newpag a {
border: #dedfde 1px solid;
padding: 2px 6px 2px 6px;
background-position: 50% bottom;
color: #0061de;
margin-right: 3px;
text-decoration: none
}
div.newpag a:hover {
border: #000 1px solid;
background-image: none;
color: red;
background-color: #c8f0fe
}
div.meneame a:active {
border: #000 1px solid;
background-image: none;
color: #fff;
background-color: #0061de
}
div.newpag span.current {
padding: 2px 6px 2px 6px;
font-weight: bold;
color: gray;
margin-right: 3px;
}
div.newpag span.disabled {
padding: 2px 6px 2px 6px;
color: #adaaad;
margin-right: 3px;
}
.pagin {
padding-bottom:7px;
font:bold 8pt Verdana,Arial,Helvetica,sans-serif;
color:#666666;
text-align: center;
}
А вот html код для аж 200 страниц, хотя их может быть и 1000:
<p>
<div class="flickr">
<a href="Путь к предыдущей странице">Предыдущая</a>
<a href="Путь к странице 1">1</a>
<span class="current">2</span>
<a href="Путь к странице 3">3</a>
<a href="Путь к странице 4">4</a>
<a href="Путь к странице 5">5</a>
<a href="Путь к странице 6">6</a>
<a href="Путь к странице 7">7</a>
...
<a href="Путь к странице 199">199</a>
<a href="Путь к странице 200">200</a>
<a href="Путь к следующей странице">Следующая</a>
</div>
</p><br>
<div class=pagin>Страница 2 из 200</div>
В. Как сделать всплывающую подсказку?
О.Чтобы сделать текст более информативным, в некоторых случаях необходимо вставлять подсказки. Один из способов вывода всплывающих подсказок приведен ниже:
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0; }
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
В нужном месте вы можете вставить следующие коды:
Классическая подсказка
<a class="tooltip" href="#">Классическая подсказка<span class="classic">Здесь пишется текст подсказки</span></a>Критическое сообщение
<a class="tooltip" href="#">Критическое сообщение<span class="custom critical"><img src="Здесь указывается путь к сопутствующей картинке" alt="Ошибка" height="48" width="48" />Критическое сообщениеЗдесь пишется текст подсказки</span></a>Предупреждение
<a class="tooltip" href="#">Предупреждение<span class="custom warning"><img src="Здесь указывается путь к сопутствующей картинке" alt="Предупреждение" height="48" width="48" />ПредупреждениеЗдесь пишется текст подсказки</span></a>Информация
<a class="tooltip" href="#">Информация<span class="custom info"><img src="Здесь указывается путь к сопутствующей картинке" alt="Информация" height="48" width="48" />ИнформацияЗдесь пишется текст подсказки</span></a>Помощь
<a class="tooltip" href="#">Помощь<span class="custom info"><img src="Здесь указывается путь к сопутствующей картинке" alt="Помощь" height="48" width="48" />ПомощьЗдесь пишется текст подсказки</span></a>Пример
Наведите курсор мыши на надписи чтобы увидеть:
классическую подсказкуЗдесь пишется текст подсказки,
критическое сообщение
Критическое сообщениеЗдесь пишется текст подсказки,
помощь
ПомощьЗдесь пишется текст подсказки,
информация
ИнформацияЗдесь пишется текст подсказки
и предупреждение
ПредупреждениеЗдесь пишется текст подсказки.
Шадуро Николай 