Цитата с красивым оформлением
В этом уроке я покажу, как с помощью CSS сделать своеобразную цитату, такого вида:
В CSS прописываем:
Code
blockquote {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(163, 207, 219);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-left-color: rgb(130, 166, 199);
border-left-style: solid;
border-left-width: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: rgb(93, 115, 124);
font-family: "Trebuchet MS";
font-size: 8pt;
font-weight: 400;
line-height: 12pt;
margin-bottom: 10px;
margin-left: 25px;
margin-right: 25px;
margin-top: 5px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
text-align: justify;
}
background-color: rgb(163, 207, 219); - цвет фона цитаты
border-left-color: rgb(130, 166, 199); - цвет сноски справа
color: rgb(93, 115, 124); - цвет текста
font-family: "Trebuchet MS"; - шрифт текста
Чтобы сделать вашу цитату, нужно текст который вы хотите занести в цитату обособить тэгами blockquote. Например:
Code
<blockquote>Здесь будет текст</blockquote>
Вот и все. Если возникают вопросы - задаем!
Автор: Small_vampire
При копировании урока обязательна активная ссылка на сайт!
