oncopy="return false;"

среда, 3 октября 2012 г.

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


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


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




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

 ВАШИ КОММЕНТАРИИ

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

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



<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/AVvXsEh9ai17-3DSJN6ZzO13tWefSXa9UN4TKtUS9DpkmrmnKF7xkYPP9avo6MB6GA0pcfq-a0AobvHv_Us1YCOu0ck8UX48RQYLFZPHIq5jDHbhJAiDb7q3BZCmDNqep7T2qdx7TCyk9QCQ8Kw/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/AVvXsEh9ai17-3DSJN6ZzO13tWefSXa9UN4TKtUS9DpkmrmnKF7xkYPP9avo6MB6GA0pcfq-a0AobvHv_Us1YCOu0ck8UX48RQYLFZPHIq5jDHbhJAiDb7q3BZCmDNqep7T2qdx7TCyk9QCQ8Kw/s144/Pamka.jpg" - фоновое изображение;

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

Источник:  http://veraborok.blogspot.com/



Автор: на
Ярлыки: ,

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

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

Подписаться на: Комментарии к сообщению (Atom)
Related Posts Plugin for WordPress, Blogger...
 ВАШИ КОММЕНТАРИИ

ПОСЛЕДНИЕ КОММЕНТАРИИ

ПОДЕЛИСЬ

ПОДЕЛИСЬ