Web-miss: Vanessa (vensy)
Opened: 18.05.2010
Theme: Blake Lively
Orders: OPEN
Coming soon
Выберите пакет услуг *:

Ваше имя/ник *:
Ваш e-mail *:
Ссылка на ваш сайт *:
Опишите то,что хотите видеть в дизайне(блоки,шапка) *:
Ссылки на качественные фото для дизайна(по желанию):
Названия ссылок для нав. меню на лого *:
Если вам нужны доп. услуги,то перечислите какие:
Код безопасности *:

200
Главная » Статьи » Помощь с HTML,CSS и Ucoz » Изучение и написание CSS стилей

Создаем красивую цитату с переходом при помощи CSS

Шаг 1.

Пишем обыкновенную структуру html документа:
 
<html>
<head><title>Quote</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
 
Шаг 2.
Пропишем контейнер div,который будет содержать нашу цитату:
<div id="quote">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy<br> 
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
 
Шаг 2.
Приступим к написанию стилей цитаты, поскольку пр наведении на нее, фон будет меняться, то помимо #quote{}, у нас будет еще и стили для #quote:hover{} :
#quote{
 
text-align: center; /* Текст будет распологаться посередине */
width: 600px; /* У цитаты будет фиксированная ширина */
margin: 15px; /* Это отступ от краев циитаты до краев веб-страницы */
color: #3c91b8; /* Цвет текста цитаты */
font-family: Arial; /* Шрифт текста */
font-size: 10pt; /* Размер шрифта */
text-shadow: #fff 1px 1px 0px; /* Тень от текста */
padding: 50px; /* Отступ от текста до краев цитаты */
background: url(http://www.time-inspire.com/BLJTM/bg_quote.png); /* Ссылка на фон цитаты */
border-radius: 8px; /* Закругление углов цитаты */
    -moz-transition-property: all; 
-moz-transition-duration: 1s;/* Все следующие строки означают плавный переход от одного фона к другому */
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-o-transition-property: all;
-o-transition-duration: 1s;
transition-property: all;
transition-duration: 1s;
 
box-shadow: 0 0 10px #d2d2d2; /* Тень от самой цитаты */
}
 
Шаг 3.
И завершающий этап, прописываем стиль цитаты при наведении курсора,код тот же самый, просто меняются следующие строки:
color: #6a508e;
background: url(http://www.time-inspire.com/BLJTM/bg_quote_hover.png);
 
Все готово!Если есть вопросы,не стесняйтесь,пишите их в комментарии =)
Категория: Изучение и написание CSS стилей | Добавил: vensy (06/01/14) | Автор: Полина E W
Просмотров: 401 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]