[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Сайтостроение » CSS & html » blockquote
blockquote
Small_vampireДата: Среда, 28.12.2011, 06:56 | Сообщение # 1
The Girl Who Loves Vampires
Группа: Администраторы
Сообщений: 756
Награды: 13
Репутация: 18
Статус:

Тэг blockquote



В этом уроке я поделюсь с вами еще одной полезной вещью, которую можно сделать с помощью CSS. Прошлый урок, в принципе относиться к этому, но на этот раз я предоставлю выбор побольше)

1 вид
В CSS вставляем такой код:
Code
blockquote {
padding : 6px 6px 6px 6px;
margin : 1px;
text-decoration : none;
border : 1px solid #8B6D51;
color : #B08A64;
background-color : #ECD1B6;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
}

Разберем:
border : 1px solid #8B6D51; - цвет и ширина обводки
color : #B08A64; - цвет текста
background-color : #CEAF91; - цвет фона
border-top-left-radius: 10px; - отступ от верхнего левого угла
border-bottom-right-radius: 10px; - отступ от нижнего правого угла

Теперь, чтобы текст отбражался так, как мы хотим заключим в тэги наш текст.
Code
<blockquote*>ваш текст</blockquote*>
Вводим без звездочек

И получим вот такой вид

2 вид
В CSS вставляем такой код:
Code
blockquote {
   font: 13px italic verdana;
   color: #76B48C;
   padding-left: 5px;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-right: 5px;
   background-image:url(http://www.10pix.ru/img1/4365/6438257.gif);
   border: 1px solid #A7DFBB;
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
   border-radius: 12px;
   display: block;  
}


Вот так будет выглядить
 
Форум » Сайтостроение » CSS & html » blockquote
  • Страница 1 из 1
  • 1
Поиск:


Конструктор сайтов - uCoz
Конструктор сайтов - uCoz