23 ноября 2015 г.

Цитата в блоге

Рамка для цитатыВзято с блога Веры Борок
Часто возникает необходимость при оформлении поста в блоге выделить фрагмент текста в виде цитаты и заключить его в рамочку. Так собралась небольшая коллекция кодов для рамочек. Чтобы их не растерять, решила оформить себе шпаргалку. Вариантов достаточно на любой вкус.

 <fieldset>Самая простая рамка</fieldset>


<div align="center" style="border: 1px solid  #992211;">Рамка для вставки кода </div>
А здесь можно подрегулировать цвет и толщину бордюра рамки


<div align="center" style="border: 1px solid  #992211; border-radius: 5px; background: #F0F0F0;">Рамка для вставки кода </div>


Цвет фона меняете на свой


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>border</title>   <style type="text/css">    DIV.brd {     border: 1px solid brown; /* Параметры границы */     background: #F0F0F0; /* Цвет фона */    border-radius: 8px;  padding: 10px; /* Поля вокруг текста */    }   </style>  </head>   <body>   <div class="brd">    Текст    </div>  </body> </html>


<fieldset style="border: #992211 ridge thick;">
<span style="font-family:Comic Sans MS;color:#992211;font-size:14px">Текст</span>
</fieldset>
 Пишите в самой рамке и ее высота будет увеличиваться. 

Заголовок

<fieldset style="border: #992211 ridge thick;"><legend> <b><span style="font-family:Monotype Corsiva;color:#104E8B;font-size:25px">Заголовок</b></span></legend><span style="font-family:Comic Sans MS;color:#992211;font-size:14px">Текст</span></fieldset>
 Картинку вставила через иконку в редакторе.

Заголовок <fieldset style="border: #992211 ridge thick; width: 380px"><legend> <b><span style="font-family:Monotype Corsiva;color:#104E8B;font-size:25px">Заголовок</b></span></legend><span style="font-family:Comic Sans MS;color:#992211;font-size:14px">Текст</span></fieldset>
Чтобы уменьшить ширину рамки, вставим width: 380px.



<style type="text/css">

.container {
  position:relative;        
  z-index:1;
}      
     
.drop-shadow {
  position:relative;
  float:left;
  width:92%;  
  padding:1em;
  margin:2em 10px 4em;
  background:#fff;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before, .drop-shadow:after {
  content:"";
  position:absolute;
  z-index:-2;
}
     
.drop-shadow p {
  font-size:16px;
  font-weight:bold;
}

.lifted {border-radius:4px;}
     
.lifted:before,  .lifted:after {
  bottom:15px;
  left:10px;
  width:50%;
  height:20%;
  max-width:300px;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform:rotate(-3deg);  
  -moz-transform:rotate(-3deg);
  -ms-transform:rotate(-3deg);
  -o-transform:rotate(-3deg);
  transform:rotate(-3deg);
}
     
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}  
</style>
<div class="container"><div class="drop-shadow lifted">
            <p>Lifted corners</p>
</div></div>


Источник: http://shpargalkablog.ru

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)