15 октября 2011 г.

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

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


 <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>

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

<!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>
 Картинку вставила через иконку в редакторе.



<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
Текст с прокруткой


1 вариант
Код текста с прокруткой
<div align="center">
<textarea cols="15" name="code" rows="2">Здесь должен быть Ваш спрятанный текст </textarea></div>
Ширину 15 и количество видимых строк текста rows="2" можно менять.

2 вариант

<div style="border:1px solid black;width:450px;height:70px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:700%;">
Здесь должен быть Ваш текст
</p>
</div>


Спойлер
Spoiler:
Здесь Ваш текст, скрипт или картинка


Код спойлера
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
 Здесь Ваш текст, скрипт или картинка
<br>
</div>
</div>
</div>
Второй вариант спойлера

Спойлер:
Здесь Ваш текст, скрипт или картинка
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 0px;">
Спойлер: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 90px;" type="button" value="Открыть/закрыть"> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 0px;">
<div style="display: none;">
Здесь Ваш текст, скрипт или картинка
</div>
</div>
</div>
</div>
</div>


<blockquote style="border-left-color: rgb(153, 35, 18); border-left-style: solid; border-left-width: 2px; font-style: normal; margin-bottom: 0px; margin-left: 10px; margin-right: 30px; margin-top: 15px; padding-left: 10px;">
</blockquote>


<pre style="border-left-color: rgb(210, 191, 148); border-left-style: solid; border-left-width: 4px; font: normal normal normal 13px/normal 'normal helvetica', sans-serif; margin-bottom: 10px; margin-left: 10px; margin-top: 10px; overflow-x: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-indent: 0px; white-space: pre-wrap; width: 530px; word-wrap: break-word;"><span class="Apple-style-span" style="color: #3f0309; font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="font-size: 14px; line-height: 20px;">
</span></span></pre>
</div>


  Кнопка-меню.
Она полезна при создании выпадающей рубрики ссылок.





<form action="http://www.realsweb.com/link_to.php"
<input type="hidden" value="_self" name="h"/><select name="links">
<option value="ссылка">имя ссылки</option>
<option value="ссылка">имя ссылки</option>
<option value="ссылка">имя ссылки</option>
<option value="ссылка">имя ссылки</option>
<option value="ссылка">имя ссылки</option></select>
<input type="submit" value="заголовок на кнопке" /></form>


Бегущая строка в блоге 
Подойдет для размещения  коротких объявлений и новостей.


Ваш текст объявления или интересной новости


<table background="https://lh3.googleusercontent.com/-vUBMnq2ogT8/Torq00DJHHI/AAAAAAAABCk/Gmpz-5z6gHA/s144/ramka4.jpg" border="2" bordercolor="transparent" cellspacing="1" height="25" style="width: 584px;"><tbody>
<tr> <td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLvjKeVOaJLOLSSAw8OR0gCIzwDikQQvEZdh-lmYqxprq1YVp7LxnIgdqYjn3E1-TxzadxAUL_7wgv6ZYoN_C3ymoVRNr1ZB0h7UYrzoakEbdeuT7mia2g_riseJkTQpxE4F27S2CaPg/s144/Pamka.jpg" valign="bottom"><marquee direction="left" height="20" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="584"><center><span style="color: black; font-family: Georgia;">Ваш текст объявления или интересной новости</span></center></marquee> </td></tr>
</tbody></table>


Изменяемые данные:

background="https://lh3.googleusercontent.com/-vUBMnq2ogT8/Torq00DJHHI/AAAAAAAABCk/Gmpz-5z6gHA/s144/ramka4.jpg" - окантовка рамки  изображением;

background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLvjKeVOaJLOLSSAw8OR0gCIzwDikQQvEZdh-lmYqxprq1YVp7LxnIgdqYjn3E1-TxzadxAUL_7wgv6ZYoN_C3ymoVRNr1ZB0h7UYrzoakEbdeuT7mia2g_riseJkTQpxE4F27S2CaPg/s144/Pamka.jpg" - фоновое изображение;

height="25" ("20"), width="584" - размеры рамки;
scrollamount="3" - скорость движения текста;
style="color: black; - цвет текста;
font-family: Georgia; - шрифт текста.





Приглашаю Вас присоединиться ко мне в следующих сервисах:


Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал


Понравилась статья? Поделитесь с друзьями.

9 коммент.:

Unknown

как отрегулировать лину рамки?

Вера Борок

Все рамки автоматом устанавливаются по ширине страницы. Если хотите уменьшить размер рамки, введите дополнительно значение ширины:width: 380px;
Это будет выглядеть так: ... style="border: 1px solid #992211; border-radius: 5px; background: #F0F0F0; width: 380px;">Текст...
Но обязательно проверьте во всех браузерах. В IE может выглядеть некорректно.

Анонимный

о спасибо за рамки

Unknown

А куда вставлять данный код?

Вера Борок

Я вставляю в пост, перейдя на вкладку HTML.

Unknown

Спасибо

Unknown

спасибо за отличную подборку ;) то, что надо)

Dark Blogger

молодец

Михаил

Здравствуйте Вера, а вот какой у меня получился спойлер :)
выкладываю ссылку для просмотра:
http://mad-food.ru/primer/1/

Хотелось бы еще плавное открытие спойлера.

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

Related Posts Plugin for WordPress, Blogger...