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

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

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

Картинку вставила через иконку в редакторе.

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

<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 вариант

Здесь должен быть Ваш текст

</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: как отрегулировать лину рамки?; 01 февраля, 2012 18:53
Вера Борок: Все рамки автоматом устанавливаются по ширине страницы. Если хотите уменьшить размер рамки, введите дополнительно значение ширины:width: 380px;
Это будет выглядеть так: ... style="border: 1px solid #992211; border-radius: 5px; background: #F0F0F0; width: 380px;">Текст...
Но обязательно проверьте во всех браузерах. В IE может выглядеть некорректно.; 02 февраля, 2012 17:11
Анонимный: о спасибо за рамки; 17 февраля, 2012 02:02
Unknown: А куда вставлять данный код?; 10 февраля, 2013 13:37
Вера Борок: Я вставляю в пост, перейдя на вкладку HTML.; 10 февраля, 2013 14:00
Unknown: Спасибо; 11 февраля, 2013 19:56
Unknown: спасибо за отличную подборку ;) то, что надо); 01 сентября, 2013 15:43
Dark Blogger: молодец; 01 февраля, 2014 14:49
Михаил: Здравствуйте Вера, а вот какой у меня получился спойлер :)
выкладываю ссылку для просмотра:
http://mad-food.ru/primer/1/

Хотелось бы еще плавное открытие спойлера.; 13 марта, 2014 14:46