Наш следующий урок CSS посвящён созданию активных картинок, которые очень удобны при создании различных галлерей. Рассмотренный способ - самый простой, но не лешен недостатков, главным из которых является некорректная работа в IE 6, но со временем и модернизацией, проблема сойдёт на нет.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:
Цитата:
/* Задание стилей для миниатюры */
a.st img {
width:100px; /* Задание ширины миниатюры */
height:75px; /* Задание высоты миниатюры */
border:3px solid #c8c8c8; /* Задание декоративной границы */
}
/* Задание стилей для полного изображения */
a.st:hover img {
position:relative; /* Задание позиции увеличенного изображения */
top:-30px; /* Задание отклонения увеличенного изображения вверх */
width:200px; /* Задание ширины увеличенного изображения */
height:150px; /* Задание высоты увеличенного изображения */
}
|
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
Цитата:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div align="center" >
<br />
<br />
<a class="st" href="#"><img src="1.png" alt="" title="" /></a>
</div>
</body>
</html>
|
4) Сохраняем и смотрим, что получилось.
---------------------------------------------------------------------------
Наш следующий урок CSS посвящён созданию всплывающих подсказок на чистом CSS. Этот метод - один из самых простых, но не самый удобный.
Главный недостаток этого метода в том, что он основывается на теге span, который часто используется для других целей.
Итак...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:
Цитата:
.tooltip {
margin: 50px;
}
.tooltip a {
text-decoration:none;
color:#333;
}
.tooltip a:hover {
position:relative; /* Установка позиции для отступов */
}
.tooltip a span {
display:none; /* Запрет показа подсказки без наведения */
}
.tooltip a:hover span{
font-size:8pt; /* Задание размера шрифта подсказки */
display:block; /* Задание показа подсказки */
position:absolute; /* Задание положения подсказки */
top:-15px; /* Задание отступов */
left:50px;
background:#65b5ff; /* Задание цвета фона подсказки */
border:1px solid #002649; /* Задание границы поля подсказки */
color:#fff; /* Задание цвета шрифта подсказки */
width:110px; /* Задание ширины поля подсказки */
padding:5px;
opacity: 0.8; /* Задание прозрачности поля подсказки */
filter rogid XImageTransform.Microsoft.Alpha(opa city=80);
}
|
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
Цитата:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>
</body>
</html>
|
4) Сохраняем и смотрим, что получилось.
Совместимость: Internet Explorer 5.5 - 7 (полностью); Mozilla Firefox 2.xx (полностью); Oprea 7.хх - 9.xx (возможны искажения)
--------------------------------------------------------------------
В этом уроке, я расскажу Вам о том, как при помощи CSS создать простую тень для блока. Этот способ, пожалуй является самым простым.
Итак, приступим....
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:
Цитата:
/* Задание стилей для слоя тени */
.shadow {
background:#bbb; /* Задание цвета тени */
border:1px solid #ddd; /* Задание стиля и цвета границ тени */
width:200px; /* Задание ширины всего блока */
}
/* Задание стилей для слоя блока */
.block {
background:#fff; /* Задание цвета фона для блока */
border:1px solid #6b6b6b; /* Задание стиля и цвета границ блока */
position:relative; /* Задание позиции блока текста относительно тени */
padding:5px; /* Задание отступа */
top:-3px; /* Отступ сверху (для тени) */
left:-3px; /* Отступ слева (для тени) */
}
|
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
Цитата:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="shadow">
<div class="block">
Содержание блока
</div>
</div>
</body>
</html>
|
4) Сохраняем и смотрим, что получилось.
Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx