slavikap_2 (slavikap_2) wrote,
slavikap_2
slavikap_2

Category:

✂ Приручаем спойлер

Оригинал взят у krambambyly в ✂ Приручаем спойлер
Оригинал взят у fotovivo в ✂ Приручаем спойлер

Стильные стили и дивные div-ы




Содержание:
На подступах к HTML (языку гипертекстовой разметки)

Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства

Форматирование текста на странице: отступы, background, абзац, оформление границ блока

Обтекание картинок текстом

Блоки и внешние стили


Полезная штука - спойлер.
Кат, он только чтоб ленту сподручней прокручивать.
А спойлер и на открытой странице не развернется, пока его не щелкнут специально.
Под ним текст целевого назначения; кому не актуально - получает пост компактным, без лишних подробностей.

Для любителей заморачиваться: Как написать код кнопки, шаг за шагом


Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения "от сотворения мира" могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
в понедельник новолуния возьми строчку   - и будет тебе картинка;
добавь вокруг
с экстрактом корня квадратного и картинка станет ссылкой"
а конструировать то что хочется, так как хочется, со знанием дела.

ХТМЛ - наследник печатной машинки.
Как и в клавиатуре следы докомпьютерного девайса проглядывают -
табуляция, перенос строки, длинная клавиша пробела.

Пробел и буквы воспринимаются браузером как есть,
остальное требует специальных предписаний.

- перевод строки

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

Подчеркнуть,
выделить курсивом</i>,
жирным шрифтом
размером и цветом,





расположить по центру,








с красной строки, с фиксированным отступом;

весь текст, обернутый тэгом blockquote

выводится с такими же полями.




На всё свои тэги, в угловых скобках пишутся: открывающий - перед "областью влияния"
и закрывающий с косой чертой - конец действия тега.

В законченном виде у документа HTML имеются "шапочка": начало; "голова", набитая служебными
инструкциями, в ней же имя (сеошные трюки для обмана поисковиков туда же, на голову надеваются).
И есть "тело" - собственно содержание страницы со всеми элементами.

- голова




тело
(завершение)

У жжешной странички тоже все это есть, но непосредственный доступ нам открыт только к "body",
куда и попадает очередной пост из формы "новая запись".

- И зачем лезть в такие подробности, если шрифтовые эффекты со всеми оттенками и вставка ссылок -
готовыми кнопками делаются в визуальном редакторе?

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


Как выделить абзац цветом,
ровненько напечатать стихи по центру?
Сделать врезку с картинками?



Предыдущие сведения из начал ХТМЛ имеют скорее историческое, чем практическое значение.
ЖЖ работает со стилями. Оформление поста в устаревших тегах приводит к неоднозначным результатам:
порой элементы разъезжаются, font-ы получают незапланированные размеры,
такую разметку, как ЖЖ благополучно игнорирует в половине случаев.

Откроем исходный код жж-страницы в браузере и обнаружим, что наши записи
переинтерпретируются системой в стилевые - на ее усмотрение.
Чтобы запись вышла такой как задумана - лучше сразу использовать стили.
Если коды в новинку, то освоить каскадные стили не труднее, чем "классику".
И то и другое не сложнее обычных офисных программ.


Тегам можно задавать свойства

Существует множество разнообразных свойств, их сочетания и наложения
дают всевозможные занятные и неожиданные эффекты.
(В прошлом выпуске - издевались над рамочками и подчеркиваниями http://fotovivo.livejournal.com/86586.html)

Фон, расположение текста, вид и размер шрифта, межстрочный интервал (и между словами),
отступ "красной строки", цвет и толщина рамок (отдельно для левой/правой/нижней/верхней стороны),
все регулируется, даже картинку в "бордер" можно вставить.
Атрибутов сотни, справочник вам в помощь http://htmlbook.ru
(Лучшее из пошагового - "Построй-ка! Html для чайников" )


Откройте форму записи в режиме HTML,
выделите строку в тексте и в верхнем меню задайте ей подчеркивание, выделение болдом, цвет и размер,
результат будет выглядеть следующим образом:


Кожух генератора

это все можно объединить в одном тэге:
Кожух генератора

- Кому охота возиться с выписыванием параметров от руки, если можно автоматом?
- Дело в том, что вручную мы можем задать свойства, которых нет в штатном редакторе.
Изощриться и сделать подчеркивание пунктирным. Затейливый шрифт. Буквы в разрядку. Мигающие (тоже можно, но это лишнее).
Тени добавить к тексту.

Пример:

Кожух генератора

Код:
Кожух генератора

По порядку, через точку с запятой:
размер 1.6em; цвет синий; болд; вид шрифта Book Antiqua; подчеркивание - 2 пикс, пунктир, красный; межбуквенное расстояние 10pt;.
Вы уже заметили, что определению подлежат только те свойства, которым мы собрались придать индивидуальность.
Если никаких свойств специально не указывать, всё останется по умолчанию, на усмотрение браузера.

Пример с тенью:

Кожух генератора       Кожух генератора

Задается тень вот такими предписаниями:

Кожух генератора

Кожух генератора

text-shadow: #ff9933 1px 1px 1px; - определяет: цвет тени #ff9933; смещение тени вправо, вниз (при отрицательных значениях - влево и вверх) и размытие тени - поочередно: 1px 1px 1px , чем больше число, тем сильнее эффект.
(Допускается две/несколько теней пририсовать тексту/рамкам, линиям).
border-bottom: 2px dashed red; padding-bottom: 5px - красное пунктирное подчеркивание с 5-ти пиксельным расстоянием от текста до пунктира.


Тень заголовка:

Стилевые свойства можно применять и к тегу
[Error: Irreparable invalid markup ('<h#>') in entry. Owner must fix manually. Raw contents below.]

Оригинал взят у <lj user="krambambyly" /> в <a href="http://krambambyly.livejournal.com/2066931.html">✂ Приручаем спойлер</a><div class="repost">Оригинал взят у <lj user="fotovivo" /> в <a href="http://fotovivo.livejournal.com/90485.html">✂ Приручаем спойлер</a><div class="repost"><h3>Стильные стили и дивные div-ы</h3>


Содержание:
<a href="#o_html_1">На подступах к HTML (языку гипертекстовой разметки)</a>

<a href="#o_html_2">Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства</a>

<a href="#o_html_3">Форматирование текста на странице: отступы, background, абзац, оформление границ блока</a>

<a href="#o_html_4">Обтекание картинок текстом</a>

<a href="#o_html_5">Блоки и внешние стили</a>


Полезная штука - спойлер.
Кат, он только чтоб ленту сподручней прокручивать.
А спойлер и на открытой странице не развернется, пока его не щелкнут специально.
Под ним текст целевого назначения; кому не актуально - получает пост компактным, без лишних подробностей.

<h4>Для любителей заморачиваться: Как написать код кнопки, шаг за шагом</h4>
<lj-cut text=" На подступах к HTML ☛ ">Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения &quot;от сотворения мира&quot; могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
<s>в понедельник новолуния</s> возьми строчку <img src="картинка_001.jpg" /> &nbsp; - и будет тебе картинка;
добавь вокруг <a href="АДРЕС СТРАНИЦЫ"> <img src="АДРЕС КАРТИНКИ" /> </a>
<s>с экстрактом корня квадратного</s> и картинка станет ссылкой&quot;
а конструировать то что хочется, так как хочется, со знанием дела.
<a name="o_html_1"></a>
ХТМЛ - наследник печатной машинки.
Как и в клавиатуре следы докомпьютерного девайса проглядывают -
табуляция, перенос строки, длинная клавиша пробела.

Пробел и буквы воспринимаются браузером как есть,
остальное требует специальных предписаний.

- перевод строки
<p>- абзац
Возможностей у языка текстовой разметки гораздо больше, чем у пиш.машинки.</p><u style="BORDER: 0px; background:none; text-shadow:none; color: #000000;">Подчеркнуть</u>,
<i>выделить курсивом&lt;/i&gt;</i>,
<b>жирным шрифтом</b>
<font color="red" size="4px">размером и цветом</font>,

<center>
</center>
<center style="background: #ffffff;">

расположить по центру,</center>



<blockquote>
</blockquote>
<blockquote>

с красной строки, с фиксированным отступом;

весь текст, обернутый тэгом blockquote

выводится с такими же полями.</blockquote>



На всё свои тэги, в угловых скобках пишутся: открывающий - перед &quot;областью влияния&quot;
и закрывающий с косой чертой - конец действия тега.

В законченном виде у документа HTML имеются &quot;шапочка&quot;: начало; &quot;голова&quot;, набитая служебными
инструкциями, в ней же имя (сеошные трюки для обмана поисковиков туда же, на голову надеваются).
И есть &quot;тело&quot; - собственно содержание страницы со всеми элементами.

- голова</lj-cut></div></div>
<title></title>


тело
(завершение)

У жжешной странички тоже все это есть, но непосредственный доступ нам открыт только к &quot;body&quot;,
куда и попадает очередной пост из формы &quot;новая запись&quot;.

- И зачем лезть в такие подробности, если шрифтовые эффекты со всеми оттенками и вставка ссылок -
готовыми кнопками делаются в визуальном редакторе?

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


Как выделить абзац цветом,
ровненько напечатать стихи по центру?
Сделать врезку с картинками?

<lj-cut text="Подбираемся к стилям ☛ ">

Предыдущие сведения из начал ХТМЛ имеют скорее историческое, чем практическое значение.
ЖЖ работает со стилями. Оформление поста в устаревших тегах приводит к неоднозначным результатам:
порой элементы разъезжаются, font-ы получают незапланированные размеры,
такую разметку, как ЖЖ благополучно игнорирует в половине случаев.

Откроем исходный код жж-страницы в браузере и обнаружим, что наши записи
переинтерпретируются системой в стилевые - на ее усмотрение.
Чтобы запись вышла такой как задумана - лучше сразу использовать стили.
Если коды в новинку, то освоить каскадные стили не труднее, чем &quot;классику&quot;.
И то и другое не сложнее обычных офисных программ.


<b>Тегам можно задавать свойства</b>
<a name="o_html_2"></a>
Существует множество разнообразных свойств, их сочетания и наложения
дают всевозможные занятные и неожиданные эффекты.
(В прошлом выпуске - издевались над рамочками и подчеркиваниями <a href="http://fotovivo.livejournal.com/86586.html" target="_blank">http://fotovivo.livejournal.com/86586.html</a>)

Фон, расположение текста, вид и размер шрифта, межстрочный интервал (и между словами),
отступ &quot;красной строки&quot;, цвет и толщина рамок (отдельно для левой/правой/нижней/верхней стороны),
все регулируется, даже картинку в &quot;бордер&quot; можно вставить.
Атрибутов сотни, справочник вам в помощь <a href="http://htmlbook.ru/css" target="_blank">http://htmlbook.ru</a>
(Лучшее из пошагового - <a href="http://www.postroika.ru/html/index.html" target="_blank">&quot;Построй-ка! Html для чайников&quot;</a> )


Откройте форму записи в режиме HTML,
выделите строку в тексте и в верхнем меню задайте ей подчеркивание, выделение болдом, цвет и размер,
результат будет выглядеть следующим образом:


<span style="font-size: 1.4em; color: #914487; font-weight: bold; text-decoration: underline">Кожух генератора</span>

это все можно объединить в одном тэге:
<span style="font-size: 1.4em; color: #914487; font-weight: bold; text-decoration: underline">Кожух генератора</span>

- Кому охота возиться с выписыванием параметров от руки, если можно автоматом?
- Дело в том, что вручную мы можем задать свойства, которых нет в штатном редакторе.
Изощриться и сделать подчеркивание пунктирным. Затейливый шрифт. Буквы в разрядку. <s>Мигающие</s> (тоже можно, но это лишнее).
Тени добавить к тексту.

Пример:

<span style="font-size: 1.6em; color:darkblue; font-weight: bold; font-family: Book Antiqua; border-bottom: 2px dashed red; letter-spacing:10pt;">Кожух генератора</span>

Код:
<span style="font-size: 1.6em; color:darkblue; font-weight: bold; &nbsp;font-family: Book Antiqua; border-bottom: 2px dashed red; letter-spacing:10pt;">Кожух генератора</span>

По порядку, через точку с запятой:
размер 1.6em; цвет синий; болд; вид шрифта Book Antiqua; подчеркивание - 2 пикс, пунктир, красный; межбуквенное расстояние 10pt;.
Вы уже заметили, что определению подлежат только те свойства, которым мы собрались придать индивидуальность.
Если никаких свойств специально не указывать, всё останется по умолчанию, на усмотрение браузера.

Пример с тенью:

<span style="font-size: 1.6em; color:darkblue; font-weight: bold; font-family: Book Antiqua; border-bottom: 2px dashed red; padding-bottom: 5px; text-shadow:#ff9933 1px 1px 1px;">Кожух генератора</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style=" background: silver; padding:7px; font-size: 1.8em; color:blue; font-weight: bold; font-family: Book Antiqua; border-bottom: 2px dashed red; text-shadow:#ffffff 2px 2px;">Кожух генератора</span>

Задается тень вот такими предписаниями:

<span style="font-size: 1.6em; color:darkblue; font-weight: bold; &nbsp;font-family: Book Antiqua; border-bottom: 2px dashed red; padding-bottom: 5px; &nbsp;text-shadow:#ff9933 1px 1px 1px;">Кожух генератора</span>

<span style=" background: silver; padding:7px; font-size: 1.8em; color:blue; font-weight: bold; &nbsp;font-family: Book Antiqua; border-bottom: 2px dashed red; &nbsp; text-shadow:#ffffff 2px 2px;">Кожух генератора</span>

text-shadow: #ff9933 1px 1px 1px; - определяет: цвет тени #ff9933; смещение тени вправо, вниз (при отрицательных значениях - влево и вверх) и размытие тени - поочередно: 1px 1px 1px , чем больше число, тем сильнее эффект.
(Допускается две/несколько теней пририсовать тексту/рамкам, линиям).
border-bottom: 2px dashed red; padding-bottom: 5px - красное пунктирное подчеркивание с 5-ти пиксельным расстоянием от текста до пунктира.


Тень заголовка:

Стилевые свойства можно применять и к тегу <h#></h#> - который задает заголовки разных уровней (размерами шрифта отличаются. 1 - самый большой).

<h1 style="padding:10px; color:#54ace3; font-family: Book Antiqua; text-shadow: 2px 3px 1px #ffffff, 0 0 2em blue;">Главный заголовок</h1>

<h1 style="padding:10px; color:#54ace3; font-family: Book Antiqua; text-shadow: 2px 3px 1px #ffffff, 0 0 2em blue;">Главный заголовок</h1>

text-shadow: 1px 2px 4px black, 0 0 1em blue; - первый набор (до запятой) дает тисненые буквы, второй - дымчатое облако вокруг.


<h2 style="background: silver; padding:35px; color:blue; font-family: Book Antiqua; text-shadow: 2px 2px Yellow, #000000 -28px -15px 3px">Вложенный заголовок</h2>Бой с тенью

<h2 style="background: silver; padding:35px; color:blue; font-family: Book Antiqua; text-shadow: 2px 2px Yellow, #000000 -28px -15px 3px">Вложенный заголовок</h2>


<h3 style="color:#12692a; font-family: Book Antiqua; text-shadow: 1px 2px 3px #0d4a1e;">Заголовок третьего уровня</h3>Пушистые надписи.

<h3 style="color:#12692a; font-family: Book Antiqua; text-shadow: 1px 2px 3px #0d4a1e;">Заголовок третьего уровня</h3>


<a name="o_html_3"></a>
Мы рассмотрели шрифтовые украшательства.
Теперь о возможностях форматирования - организации текста на странице

<b>Пример абзаца с отступами:</b>

<p style="background: #b2d6bd; padding: 12px 35px; font: bold 12px Courier; color:#0000ff;">
Мезуза - небольшой пергаментный свиток, на котором специально обученный софер
(переписчик священных текстов) вручную написал специальным шрифтом и специальным
составом два отрывка из Писания. Футляр мезузы может быть сделан из дерева, стекла, пластика и т.д.
Мезузу прикрепляют гвоздями, шурупами либо клеем, главное, чтобы она не шаталась и не болталась.
Перед установкой мезузы произносят специальное благословение. <a href="http://fotovivo.livejournal.com/71199.html" target="_blank">http://fotovivo.livejournal.com/71199.html</a></p>
Код для него:
<p style="background: #b2d6bd; padding: 12px 35px; font: bold 12px Courier; color:#0000ff;">Текст врезки</p>

Где:
background - фон
padding: 12px 35px 18px 25px; - отступы (сверху; справа; снизу; слева; указание левого поля обеспечивает двухстороннее, книжное выравнивание)
font - шрифт жирный, размер12px, вида Courier
color - цвет текста


<b>Стихотворному тексту определяем отступы по вкусу:</b>

<p style="background:#d3ded5; padding: 15px 250px; font:12px; color:darkblue; font-family:Book Antiqua;">С. Михалков

На исходе двух столетий,
А точней - под Новый год
Черепашку как-то встретил
Одинокий Бегемот.

Бегемот вполне приличный -
В меру толстый и большой,
Энергичный, симпатичный
И с отзывчивой душой.

Черепашка на песочке
Спит за камешком, в тенечке,
Бегемот вблизи лежит -
Черепашку сторожит. ...</p>
<p style="background:#d3ded5; padding: 15px 250px; font:12px; color:darkblue; font-family:Book Antiqua;">

В тегах &lt;выравнивание по центру&gt; &quot;простого ХТМЛ&quot; без стилей,</p>
<center>
<font color="#0000ff" face="comic sans" size="3px">Стихо-творение</font></center>

выглядит несколько иначе:

<center>

<font color="#0000ff" face="comic sans" size="2px">Андрей Усачев.

Ботинок

В лопухах лежит Ботинок,
Здоровеннейший Ботин.
&ndash; Где, Ботинок, твой Братинок?
Почему лежишь один?
Вы друг с другом разошлись
И друг с другом не нашлись?</font></center>






Кроме параграфов, существует более универсальный и гибкий инструмент -<h3>контейнеры-блоки &lt;div&gt;&lt;/div&gt;</h3><a name="o_html_4"></a>
С практикой применения блоков мы уже встречались в посте про оформление подложек к картинкам
и цитат в рамочках <a href="http://fotovivo.livejournal.com/78930.html" target="_blank">http://fotovivo.livejournal.com/78930.html</a>

<b>Пример врезки:</b>

<div style="width:950px; height:600px; background-color:#ffffff; border:3px dotted grey; border-shadow: 2px 1px #40310a; padding:20px; font-family: Comic Sans MS; color:darkblue;"><img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/CVETY_001/web.jpg" style="border:4px ridge silver; float: left; padding: 15px; margin: 20px;" />

Альтернативное

Мамонт и папонт гуляли на речке,
Бабант и дедант лежали на печке.
А внучек сидел на крылечке.
И сворачивал хобот в колечки.
М.Яснов
<img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/CVETY_003/web.jpg" style="border:4px ridge silver; float: right; padding: 15px; margin: 20px;" /><span style="float: right; padding-right: 60px;">Рената МУХА. Собаку обидели

Я с ними делила и радость и горе.
Зачем же такое писать на заборе?
А если для них я действительно злая,
Я больше не буду.
Пусть сами - и лают! </span></div>

Обтекание картинок текстом

Коды с пояснениями:

<textarea style="width: 900px; height: 280px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> <div style="width:800px; height:580px; background-color:#ffffff; border:3px dotted grey; border-shadow: 2px 1px #40310a; padding:20px; font-family: Comic Sans MS; color:darkblue;"> (начало блока)
<img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/CVETY_001/web.jpg" style="border:4px ridge silver; float: left; (задает обтекание, картинка "отплывает" к левому краю)
padding: 15px; margin: 20px;"><br><br>Альтернативное<br><br>
Мамонт и папонт гуляли на речке,<br>Бабант и дедант лежали на печке.<br>А внучек сидел на крылечке.<br>И сворачивал хобот в колечки.<br>М.Яснов<br>(текст обтекает картинку справа)
<img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/CVETY_003/web.jpg" style="border:4px ridge silver; float: right; (задает обтекание, картинка справа)
padding: 15px; margin: 20px;"> <div style="clear: left"></div> (остановка обтекания слева)
<span style="float: right; padding-right: 60px;">Рената МУХА. Собаку обидели<br><br>
Я с ними делила и радость и горе.<br>Зачем же такое писать на заборе?<br>А если для них я действительно злая,<br>Я больше не буду.<br>Пусть сами - и лают! (текст слева от картинки) </span>
<div style="clear: right"></div> (Остановка обтекания справа) </div></textarea>
<a name="o_html_5"></a>

Блоки можно двигать по странице, расставлять в произвольном порядке, этим они незаменимы.

</lj-cut><a name="Doska">

Примерчик </a><a name="Doska">"Доски объявлений"</a> на DIV-ах:
( по мотивам популярных "верхних постов" ) -

<div style="width:590px; height:500px; background-color:#bfb993; border:13px ridge #f5e095; padding: 1px 10px; font-family: Courier New; font-size: 0.6em;"><div style="width:500px; height: 40px; margin: 5px 25px; padding: 8px; text-align: center; border:0px; box-shadow: 0px 2px 2px #40310a; background-color:#ffffff;"><h2>Правила посещения блога</h2></div><div style="width:160px; height:200px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; color:#000000; float: left; padding: 3px 10px; margin:2px 5px;">
<center>

☉</center>

Резюме в трех экземплярах
с детальным указанием
причин явки - <b>ОБЯЗАТЕЛЬНО</b>!</div><div style="width:150px; height:130px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; float: left; padding: 5px 10px; margin:40px 3px; ">
<center>

☉</center>

<span style="color: red;">Явка без
уважительной причины
-НЕДЕЙСТВИТЕЛЬНА!</span></div><div style="width:180px; height:220px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; color:darkblue; font-family: Arial; float: left; padding:0px 10px; margin: 10px 3px;">
<center>

☉</center>

ГРАФИК посещаемости
&deg;
&deg;
Список на отчисление
&deg;
&deg;
&deg;</div><div style="width:110px; height:150px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; float: left; padding: 5px 5px; margin:0px 3px;">
<center>

☉</center>

<s><span style=" font-size: 10px; font-family: Impact; color: brown;">сертификaт об обрезании
предъявлять в развернутом виде!</span></s></div><div style="width:200px; height:210px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; float: left; padding: 10px 10px; margin:5px 10px;">
<center>

☉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;☉</center>

<span style="font-family: Times New Roman; color: #ed7a2d;"> ПЕРЕДОВИКИ ПРОИЗВОДСТВА</span>
<center>

<span style="font-family: Times New Roman; color: #ed7a2d;">комментов</span></center>

<span style="font-family: Times New Roman; color: #ed7a2d;"><s style="border: 1px solid silver; padding: 1px; text-shadow: #000 0 0 3px;">________________
__________
____</s>
<span style="color: #f0a03e;">Отличники репо-заготовки:</span>
<span style="font-size: 1.4em"><span style="color: #6b7f8a;"> &nbsp;&nbsp;▣ ▣ ▣ ▣ ▣ ▣ ▣ </span></span></span></div><div style="width:180px; height:160px; box-shadow: 1px 2px 3px #40310a; font-family: Impact; ; line-height: 0.9em; background-color:#ffffff; float: left; padding:3px 8px; margin-left:15px; margin-top: 20px;">
<center>

☉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;☉</center>

<span style="color: #755e71; font-size: 10px;">Дополнительный перечень требований</span>


<span style="color: #755e71; font-size: 6px; text-shadow: 1px 1px 3px #000000">Чтоб не пил, не курил и цветы всегда дарил. Забота о сохранении и умножении моего СК - святая обязанность кандидата в зафренд. Высокое сознание долга, нетерпимость к нарушениям моих интересов. Коллективизм и товарищеская взаимопомощь: от каждого по рецке - голому раскрутка. Гуманные отношения и взаимное уважение между людьми: человек человеку друг, товарищ и волк. </span></div></div><p>Только текст и форматирование, никаких картинок - попробуйте выделить и скопировать нижнее правое объявление ;)</p>

<lj-cut text="Блоки с декорациями ☛">Шаблон для доски:

<textarea style="width: 900px; height: 250px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> <div style="width:580px; height:500px; background-color:#bfb993; border:13px ridge #f5e095; padding: 1px 10px; font-family: Courier New;"> <div style="width:500px; height: 40px; margin: 5px 25px; padding: 5px; text-align: center; border:0px; box-shadow: 0px 2px 2px #40310a; background-color:#ffffff;"><h1> Главное блюдо </H1></div> <div style="width:160px; height:200px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; color:#000000; float: left; padding: 3px 10px; margin:5px;"> <center>☉</center><br><br>На первое</div> <div style="width:120px; height:130px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; float: left; padding: 5px 10px; margin:40px 10px; "> <center>☉</center><s><span style="color: brown;">На второе</span></s></div> <div style="width:180px; height:220px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; color:darkblue; float: left; padding:2px 10px; margin: 10px;"><center>☉</center><br>На третье</div> <div style="width:230px; height:200px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; float: left; padding: 10px 20px; margin:5px 20px;"> <center>☉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;☉</center>На закуску</div> <div style="width:160px; height:140px; box-shadow: 1px 2px 3px #40310a; background-color:#ffffff; float: left; padding: 18px; margin-left:30px; margin-top: 20px;"> <center>&deg; &deg; &deg; &deg; &deg;</center><br><br><span style="color: #755e71; font-size: 6px; text-shadow: 1px 1px 3px #000000">На посошок</span></div> </div> </textarea>


Так же и сам текст внутри блочных элементов понимает команды вправо-влево,
подчиняется требованиям расположиться в заданной позиции.
На картинки предписания действуют аналогично.


<b>Границы блоков</b> ( как и границы прочих элементов) прописываются в стилях
со сколь угодно подробными характеристиками:

</lj-cut>



width:500px; height:260px - ширина и высота блока
background:#fbfcb8 - цвет фона
border-left: 8px double red - левый борт: толщиной 8px двойной красный
border-right: 5px dotted brown - правый: 5px в точечку коричневый
border-top: 10px ridge skyblue - верхний: 10px тисненый голубой
border-bottom: 6px green dashed - низ: 6px зеленй пунктир
border-radius: 90px 20px 20px 0px - радиус скругления: по часовой стрелке от верхнего левого угла к нижнему левому
box-shadow - внешняя тень блока (смещение вниз, справо, размытие)



<b>Самое замечательное в стилях -
это не изобилие дополнительных рюшечек, а то, что</b><h2>их можно вынести за скобки.</h2>Все повторяющиеся элементы декора описать один раз, в начале документа,
и по мере необходимости ссылаться на это описание. Или даже из другого ресурса подгружать.

В этом вся идея, ради чего современные многостраничные сайты перешли на CSS.
ЖЖ не исключение.

Например, в тексте много цитат, которым желательно цвето-шрифтовое выделение,
или всем картинкам потребовалось задать одинаковое обрамление -
описываем внешний вид и все приметы полей и рамочек в виде:

<style type="text/css">
<br>p {background: grey; padding-left: 20px; font: bold 16px Arial; color:#000000;<br>}<br>.divny_div {"BACKGROUND: #ded7ce;  PADDING-BOTTOM: 5px; PADDING-TOP: 5px;<br>WIDTH: 900px; border-radius: 15px; box-shadow: 2px 1px 4px  #40310a<br>}<br>img {position:relative; right:550px; border: ridge 18px; #000000"<br>}<br></style>


Теперь в нашем документе все абзацы<p>выполнены в едином стиле -
белым шрифтом Arial на серебристом фоне, с отступом 20 пикселей.
А все картинки приобрели двадцатипиксельную рифленую границу и смещены вправо.

А вот из блоков, div, нужное оформление получат только те, которые ссылаются на описание divny_div следующим образом:</p><div class="divny_div">Тут некий текст</div>





И совсем бы всё расчудесно, но есть небольшая загвоздка.
В "тело" документа, через форму поста ЖЖ, такую штуку:
<style type="text/css">
вставить нельзя.<br>По отдельности стили в каждый тег можно, а как класс - увы.<br><br>Вставлять стили нужно в , в ту самую голову, которая заполняется программно, без нашего участия.<br><br>Но - не зря ж мы старались, во всем этом разбирались!<br><br>Для самых беспокойных пользователей оставлена лазейка.<br>Раздел "Пользовательский CSS" в настройках блога.<br><a data-cke-saved-href="http://www.livejournal.com/customize/options.bml?group=customcss" href="http://www.livejournal.com/customize/options.bml?group=customcss" target="_blank">http://www.livejournal.com/customize/options.bml?group=customcss</a><br><br>Есть возможность определить собственные стили для элементов страницы и вписать их в этот раздел.<br><br>Нужен готовый абзац, чтоб был под рукой? Врезка с фоном и рамкой?<br>Вставим в Пользовательский CSS определение напр. для<br><code>p {background: Bisque; color:darkblue; font-weight: bolder; font-family:Verdana; border: 2px ridge Yellow;}</code><br>и теперь достаточно обернуть текст тегами <p> </p> что бы он приобрел заданный вид - синим по бежевому,<br>выбранным шрифтом и рамочкой.<br>(Т.е. это станет настройками по умолчанию; ничто не мешает вручную прописать какие угодно.)<br>Также можно обойтись с заголовками, ссылками, формами кнопочек, и даже подчеркиванию/перечеркиванию придумать собственный фасон.<br><br>Потренируемся?<br><br><br><br><lj-cut text=" Стилевые эффекты применительно к ЖЖ ☛ ">Возьмем букву u. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;В тегах это команда подчеркивания <u><u style="BORDER: 0px; background:none; text-shadow:none; color: #000000;">Подчеркнем нужное</u></u><br>Обвешаем ее стилями.<br>Как можно украсить подчеркивание? Казалось бы. При том, что цвет и толщина линий совпадают со свойствами шрифта.<br><br>Оказывается для подчеркиваний-надчеркиваний-перечеркиваниий и просто линий определен атрибут border,<br>граница. Как у изображений, таблиц, блоков.<br>Какая ж там рамочка у черты? А вот самая что ни на есть, может ненароком задана, но такая ж, как у солидных контейнеров.<br>А уж у бордера свойств туча. Пунктирные, рельефные, с отступами и скруглениями, наслоениями теней.<br>Так же как в примере с div, подчеркиванию можно задать разные стили верхней и нижней стороны! И даже левой и правой =)<br><br><u style="BORDER: 7px outset orange; border-radius: 120px; padding:10px; background: #f7ecba;"><br><br>Задана рамочка толщиной 7 пикс. выпуклая, оранжевая, закругленная по углам, отступ от подчеркивания - 10 пикс.<br>фон - (да, гарнице можно еще и собственный фон приписать).<br><br><u style="BORDER: 9px outset #f77707; border-radius: 120px; padding:10px; background: #f7ecba;">Подчеркнем нужное</u><br><br>Уже занятно, но посмотрим что еще из этого можно вытянуть.<br><br><u style="color: rgba(0, 0, 0, 0); BORDER: 8px solid #bdfa16; border-radius: 120px; padding:10px; background: #f0fae3; text-shadow: #000 2px 1px;">Подчеркнем нужное</u><br><br>color - это цвет шрифта. Действует и на слово и на подчеркивание.<br>text-shadow - уже знакомая нам тень текста. Чем больше цифра, тем дальше отбрасывается тень.<br>А фишка тут в скобках с нулями rgba(0, 0, 0, 0), последний ноль в этой конструкции - прозрачность.<br>(От 0 - полная прозрачность, до 1 - полностью плотный цвет. Похоже на настройки графических редакторов.)<br>Т.е. трюк в том, что текст делается невидимым, а тень остается =)<br>Если тень задана не размытая, то от обычной надписи не отличишь. В рамочке.<br><br><u style="color: rgba(0, 0, 0, 0); BORDER: 8px solid #bdfa16; border-radius: 120px; padding:10px; background: #f0fae3; text-shadow: #000 0 0 1px;">Подчеркнем нужное</u><br><br>Сложнее с собственно подчеркиванием. В Хроме оно исчезает.<br>А ФайрФокс добросовестно пририсовывает пушистую тень и подчеркиванию тоже.<br><br>Пользователю ФФ остается или наслаждаемся подчеркнутым словом в обводке<br>или убирать нижний отступ до нуля, тогда рамочка сливается с подчеркиванием:<br><u style="color: rgba(0, 0, 0, 0); BORDER: 7px groove silver; background: #e6f8fc; border-radius: 180px; padding: 5px 8px 0px 8px; text-shadow: #000 2px 1px;">Подчеркнем нужное</u><br><br><u style="BORDER: 7px groove silver; background: #e6f8fc; border-radius: 120px; padding:5px 8px 0px 8px; text-shadow: #000 2px 1px;">Подчеркнем нужное</u><br><br>padding - поля: верхнее, правое, нижнее (это оно нулевое) и левое.<br><br>Завершающий шаг -<br>берем тот или иной вариант и оформляем в качестве выносного стиля:<br><br>u {BORDER: 7px #bdfa16;<br>border-radius: 120px;<br>padding:7px 8px 0px 6px;<br>}<br><br>Все тоже самое, только в фигурных скобках.<br><br>Идем в настройки журнала<br><a data-cke-saved-href="http://www.livejournal.com/customize/options.bml?group=customcss" href="http://www.livejournal.com/customize/options.bml?group=customcss" target="_blank">http://www.livejournal.com/customize/options.bml?group=customcss</a><br>в раздел пользовательских кодов, видим там окно - пустое, если у вас это первый раз, а если не пустое, то вы знаете, что делать.<br>Копипастим туда нашу конструкцию, жмем сохранить. Все, больше ничего не надо.<br><br>Теперь у нас по умолчанию выделенные места не просто подчеркнуты, а обведенны кружочком<br><br><p style="border: 2px dotted silver; padding: 10px; 25px;"><span style="font-size: 0.9em">Вдоль <u style="BORDER: 4px solid #eb3b81; border-radius: 120px; padding:1px 3px 0px 2px;">по Африке</u> гуляют, <u style="BORDER: 4px solid #eb3b81; border-radius: 120px; padding:1px 3px 0px 2px;">Фиги-финики</u> срывают</span></p>Попробуйте в комментах. (Автоматики там нет, вручную: <u>проба</u>)<br><br><br>Если вывести бордер в ноль, функция U жж-редактора станет подручным маркером:<br><p style="border: 2px dotted silver; padding: 10px; 25px;"><span style="font-size: 0.9em"><u style="background: rgba(255, 255, 0, 0.7); color: rgba(0, 0, 0, 0); BORDER: 0px solid; border-radius: 120px; padding:1px 3px 0px 2px; text-shadow: #000 2px 1px;">Финики</u> подразделяются на мягкие и сухие. А тек же <u style="background: rgba(255, 255, 0, 0.7); color: rgba(0, 0, 0, 0); BORDER: 0px solid; border-radius: 120px; padding:0px 3px 0px 2px; text-shadow: #000 2px 1px;">финики</u> с инвертным сахаром, содержащие декстрозу и глюкозу, и <u style="background: rgba(255, 255, 0, 0.7); color: rgba(0, 0, 0, 0); BORDER: 0px solid; border-radius: 120px; padding:0px 3px 0px 2px; text-shadow: #000 2px 1px;">финики</u> с тростниковым сахаром, содержащие в основном тростниковый сахар (сахарозу). Большинство мягких сортов - <u style="background: rgba(255, 255, 0, 0.7); color: rgba(0, 0, 0, 0); BORDER: 0px solid; border-radius: 120px; padding:1px 3px 0px 2px; text-shadow: #000 2px 1px;">финики</u> с инвертным сахаром, а большинство сухих сортов - <u style="background: rgba(255, 255, 0, 0.7); color: rgba(0, 0, 0, 0); BORDER: 0px solid; border-radius: 120px; padding:1px 3px 0px 2px; text-shadow: #000 2px 1px;">финики</u> с тростниковым сахаром.</span></p>Напомню хороший ресурс <a data-cke-saved-href="http://www.stm.dp.ua/web-design/color-html.php" href="http://www.stm.dp.ua/web-design/color-html.php" target="_blank">где брать цвета</a> в кодах. (есть и множество других не хуже)<br><br><br><br>Это была тренировка; теперь у нас опыт обращения с Пользовательским CSS<br>и все готово, чтобы заняться превращением спойлера .<br><br>Откроем исходный код какого-либо поста, где есть спойлер - поиском по его заголовку находим соответствующее место в кодах,<br>и обнаруживаем, что живет нужный нам объект под именем <div class="lj-spoiler-head"><br>Т.е. это самый что ни наесть блок, со ссылкой на идентификатор.<br>Который обязан выглядеть как<br><style type="text/css" &nbsp;=""><br>.lj-spoiler-head {<br>}<br></style>


- в фигурных скобках прописываем ему радкально-зеленый цвет, отправляем в Сustom css
.lj-spoiler-head {border:1px solid #000000; background-color:GreenYellow;
color:#000000; width:80px; height:80px}
смотрим, что получится.
Работает! Ядрено-зеленый спойлер на во всех записях, где он используется!

Нет необходимости вносить руками вызов class="lj-spoiler-head" в коды записи, это проделывает за нас движок ЖЖ
автоматически, но мы теперь знаем, как вставить в "голову" свое описание этого класса :)



Используя свойства div-ов, можем придать спойлерной кнопке любимый цвет и размер.

Углы блока скруглить до такой степени, что он превратится в окружность.
Вставить изображение - а фон и границы при этом сделать невидимыми.
Анимированная картинка тоже годится, смайлик будет прыгать на спойлере :)
На что фантазии хватит.

Квадратные скобки вокруг ссылки никуда не денешь, разве что утопить их в фоне, слив его по цвету со шрифтом.
(На этот случай предпочтителен фон без градиента. На выпуклой кнопке маскировка менее успешна)

<lj-cut text="LJ-спойлерная кнопка своими руками ☛ ">И наконец главный номер программы,
ради которого мы пробирались сквозь дебри стилей, тегов и их атрибутов.

Выбираем, во что приодеть наш спойлер.
Для наглядности раскраску опробуем на контейнере
Заготовка для него:<div style="background: ЦВЕТ ФОНА; padding: 10px; &nbsp;color: ЦВЕТ ШРИФТА; font-size: 1.8em; font-weight: bold; font-family: Arial; border: 2px СТИЛЬ ЦВЕТ; border-radius: 12px; &nbsp;text-shadow: ЦВЕТ ТЕНИ 2px 2px 3px;">

Цвет можно подобрать прямо в редакторе ЖЖ, скопировать из окошка "Код".
Напр: #31f568
Перед цифрами знак решетки обязательно.

Пусть
padding: 4px; - чем больше число, тем больше поля кнопки.
Белый цвет надписи: #ffffff , размера - 1.8em
bold - жирным шрифтом без засечек Arial
border: 1px ridge Yellow - едва заметный тонкий бордер, рельефный, желтый (<a href="http://htmlbook.ru/css/border-style" target="_blank">Посмотреть стили рамочек</a>)
border-radius: 12px - закругление уголков, больше число - сильнее скругление.
text-shadow:green 2px 2px 0; - тень текста зеленая четкая. (Для размытой - последняя величина увеличивается на два-три пикселя)

Вот что получим:

<div style="display: inline-block; background: #31f568; padding: 4px; color: #ffffff; font-size: 1.8em; font-weight: bold; ont-family: Arial; border: 1px ridge Yellow; border-radius: 12px; text-shadow:green 2px 2px;">Наша кнопка</div>


<b>Оживляж</b>:

Нагуглим картинку. Напр: <img alt="" border="0" src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/978060466/web/web.gif" />

Добавим в код ее адрес:

<div style="display: inline-block; background: #31f568 url(http://liubavyshka.ru/_ph/21/2/978060466.gif) no-repeat 5px; padding: 1px 15px 5px 40px; &nbsp;color: #ffffff; font-size: 1.8em; font-weight: bold; font-family: Arial; border: 1px ridge Yellow; border-radius: 12px; text-shadow:green 2px 2px;">Заходи под спойлер...</div>Заходи под спойлер...</div>

Пока это не кнопка, только образец внешнего вида.

Построим по нему код для спойлера:

<textarea style="width: 900px; height: 125px; padding:5px; color: #000000; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> .lj-spoiler-head {БАЗОВЫЙ СТИЛЬ
}
.lj-spoiler-head a {НАШ ДИЗАЙН КНОПКИ
}
.lj-spoiler-head a:hover {СТИЛЬ КНОПКИ ПРИ НАВЕДЕНИИ КУРСОРА
} /*---modifed spojler fotovivo LJ ---*/ </textarea>

Просто срисуйте, как есть.
Я это выудила в исходниках страницы, как ЖЖ обращается к спойлеру,
при активном виде ссылки, при нажатии.

Вместо НАШ ДИЗАЙН КНОПКИ вставьте заготовленное описание стиля для фона, текста-
<span style="color: #572f30;">display: inline-block; background: #31f568 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/978060466/web.gif) no-repeat 5px;
padding: 1px 15px 5px 40px; &nbsp;color: #ffffff; font-size: 1.8em; font-weight: bold; font-family: Arial; text-decoration: none !important; text-shadow:green 2px 2px;</span>
text-decoration: none - добавлен элемент, отвечающий за отмену подчеркивания ссылки

ПРИ НАВЕДЕНИИ фон меняет цвет (и размер при желании), вставляем:
<span style="color: #7d3c57;">display: inline-block; background: Yellow; border: 1px ridge green;</span>
можно этого и не делать

И БАЗОВЫЙ СТИЛЬ, тут есть тонкий момент, специфически жжешный.
Спойлер предоставляется пользователю в квадратных скобках, это особенность движка, остается их только замаскировать.
Берем наш дизайн и цвету текста color: #ffffff; задаем такое же значение, как у фона (background) --> color: #31f568;
сюда же помещаем стиль бордюра border: 1px ridge Yellow; border-radius: 12px;

Код спойлера в сборе:

<textarea style="width: 900px; height: 130px; padding:5px; color: #000000; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> .lj-spoiler-head {display: inline-block; background: #31f568; color: #31f568; border: 1px ridge Yellow; border-radius: 8px;
}
.lj-spoiler-head a {display: inline-block; background: #31f568 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/978060466/web.gif) no-repeat 5px; padding: 3px 15px 5px 40px; color: #ffffff; font-size: 1.8em; font-weight: bold; font-family: Arial; text-decoration: none !important; text-shadow:green 2px 2px;
}
.lj-spoiler-head a:hover {display: inline-block; background: Yellow url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/978060466/web.gif) no-repeat 5px; border-bottom: 5px dotted brown; border-radius: 12px; margin: 0 !important; } /*---modifed spoiler fotovivo LJ ---*/ </textarea><p style="background: #ffffff; padding: 2px; WIDTH: 340px;"><sup>Нажатая кнопка:</sup> <img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/hh/web.gif" /></p>
Код несколько избыточный, есть куда оптимизировать, не будем в это вдаваться.


Пора закруляться с постом, пока он не превратился в многотомник =)

Трудно было?
Так это и требуется <a href="http://fotovivo.livejournal.com/86586.html#babuska_13"><span style="font-size: 1.4em"><span style="color: #1c3c80;">⚓</span></span></a>
Я не спец в кодинге, разбираюсь по ходу конструирования и делюсь о впечатлениями/изобретениями в стиле "от чайника - чайнику".

Все вышеописанные премудрости на разные лады раскрывают многочисленные учебные пособия -
солидные с подробными спецификациями, для лириков-любителей, домохозяек гуманитарного склада,
иллюстированные, с роликами и пританцовываниями.
Отдельная задача сегодняшнего рассказа - пробудить интерес начинающих, продолжающих и потенциальных "бабушек"/"дедушек", далеких от цифровых технологий, к тому, как устроены картинка и текст на экране.

К слову, не весь HTML устарел. Стили заменили прежние инструменты верстки и оформления текста.
Многие элементы вполне еще рабочие и актуальные.
Якоря например. Как-нибудь в следующий раз.

</lj-cut>

Готовые примеры:

<b>Снежок</b>:

<div style="display: inline-block; padding: 4px 15px !important; background-color:#a9b0b8; border:2px dotted #000000; color:#295c54; border-radius: 13px; border-color: #ffffff; font-size:12px; font-weight:bold; text-shadow: 2px 3px 5px #ffffff;">Развернуть ➽</div>
Код для внесения в Custom CSS:

<textarea style="width: 900px; height: 70px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> .lj-spoiler-head {display: inline-block; padding: 4px 15px !important; background-color:#a9b0b8; border:2px dotted #000000; color:#a9b0b8; border-radius: 13px; border-color: #ffffff; text-shadow:2px 2px 4px #ffffff;
}
.lj-spoiler-head a {font-size:12px; font-weight:bold; text-decoration: none !important; color: #295c54 !important;
}
.lj-spoiler-head a:hover {font-size:16px; text-shadow: 2px 3px 4px #ffffff; color: #ffffff !important; background-color:#58857e; border-radius: 13px; } /*---modifed spoiler fotovivo LJ ---*/ </textarea>

➽ стрелочка - шрифтовый элемент, в стили не входит;
таких псевдо-букв в таблице уникодов тьма <a href="http://unicode-table.com/ru/#geometric-shapes" target="_blank">http://unicode-table.com/ru/#geometric-shapes</a>


<b>Щенок</b>

<div style="display: inline-block; padding: 5px 8px 5px 35px !important; background: #f5ba18 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/656076698/web.gif) no-repeat 2px; border: 2px dashed grey; color:#faf9cf; border-radius: 5px; ">Читать дальше ➽</div>

Код:
<textarea style="width: 900px; height: 70px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> .lj-spoiler-head {display: inline-block; padding: 5px 8px 5px 35px !important; background: #f5ba18 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/656076698/web.gif ) no-repeat 2px; border: 2px dashed grey; color:#f5ba18; border-radius: 5px;
}
.lj-spoiler-head a {font-size:12px; font-weight:bold; text-decoration: none !important; color:#faf9cf !important;
}
.lj-spoiler-head a:hover {font-size:16px; text-shadow: 2px 3px 4px #f7f4c8; border-radius: 5px; color: #ffffff !important; background-color:#cc8a54;
} /*---modifed spoiler fotovivo LJ ---*/ </textarea>


<lj-spoiler title="...И другие превращения спойлера ☛ ">
<b>Сторож</b>

<div style="display: inline-block; padding: 9px 8px 8px 107px !important; background: #e6e3d5 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/942869089/web.gif) no-repeat 2px 2px; color:#5e583a; border: 3px double #6b6651; border-radius: 6px; ">Разбудить ➽</div>

<textarea style="width: 900px; height: 110px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;">.lj-spoiler-head {display: inline-block; padding: 9px 8px 8px 107px !important; background: #e6e3d5 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/942869089/web.gif ) no-repeat 2px 2px; color:#e6e3d5; border: 3px double #6b6651; border-radius: 6px;
}
.lj-spoiler-head a {font-size:12px; font-weight:bold; text-decoration: none !important; text-shadow: 1px 2px #FFFFFF; color:#5e583a !important;
}
.lj-spoiler-head a:hover {font-size:16px; text-shadow: 2px 3px 4px red; color: brown !important; border-radius: 6px; } /*---modifed spoiler fotovivo LJ ---*/ </textarea>



<b>Капсула</b>

<div style="display: inline-block; color: #edeff1; text-align: center; background: #A2B5CD; color:#ffffff; font-weight: bolder; font-family:Lucida Console; font-size:11px; text-shadow: black 2px 2px 3px, #191970 0 0 33em; line-height: 20px; border: 0px; border-radius: 120px 120px 120px 120px; box-shadow:inset 7px 2px 7px 2px rgba(0, 0, 0, 0.4); ">Принять...</div>

<textarea style="width: 900px; height: 110px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;">.lj-spoiler-head {display: inline-block; color: #edeff1; text-align: center; background: #A2B5CD; color:#A2B5CD; line-height: 20px; border: 0px; border-radius: 120px 120px 120px 120px; box-shadow:inset 7px 2px 7px 2px rgba(0, 0, 0, 0.4);
}
.lj-spoiler-head a { text-decoration: none !important; text-shadow: black 2px 2px 3px, #191970 0 0 33em; text-decoration: none important!; color: #ffffff !important; font-weight: bolder; font-family:Lucida Console; font-size:11px;
}
.lj-spoiler-head a:hover {font-size:16px; text-shadow: 2px 3px 4px #FFFFFF color: #FFFFFF !important; } /*---modifed spoiler fotovivo LJ ---*/ </textarea>



<b>Цербер</b>

<div style="display: inline-block; padding: 70px 8px 3px 12px !important; color: #000000 !important; font-weight: bolder; font-family:Courier; background: #f2f2e4 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/701/web.gif) no-repeat; border:1px solid #ffffff; color:#f2f2e4; border-radius: 90px; ">Развернуть...</div>

<textarea style="width: 900px; height: 110px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;">.lj-spoiler-head {display: inline-block; padding: 70px 8px 3px 12px !important; background: #f2f2e4 url(http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/701/web.gif ) no-repeat; border:1px solid #ffffff; color:#f2f2e4; border-radius: 90px;
}
.lj-spoiler-head a {font-size: 16px; text-decoration: none !important; color: #000000 !important; font-weight: bolder; font-family:Courier;
}
.lj-spoiler-head a:hover {font-size: 18px; text-shadow: 2px 3px 5px #ed922b; color: brown !important; } /*---modifed spoiler fotovivo LJ ---*/ </textarea>



<b>Беспокойная кнопка</b> может даже носиться по полю :)

<marquee behavior="alternate" height="102px" width="400px"><div style="display: inline-block; padding: 3px 10px !important; background: skyblue; color: #ffffff; border-radius: 12px; box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px, inset rgba(0,0,0,0.5) -8px -8px 18px 5px;">Развернуть ▷▷▷</div></marquee>

<marquee behavior="alternate" height="102px"><lj-spoiler title="Открыть!">Этот текст будет скрыт.</lj-spoiler></marquee>

Код самой кнопки:

<textarea style="width: 900px; height: 110px; padding:5px; border: 2px dotted silver; background: transparent; resize: none; overflow: auto;"> .lj-spoiler-head {display: inline-block; padding: 3px 10px !important; background: skyblue; color: #72adc4; border-radius: 12px; box-shadow: inset rgba(255,255,255,0.2) 6px 6px 18px 5px, inset rgba(0,0,0,0.5) -6px -6px 18px 5px; } .lj-spoiler-head a {font-size:10px; font-weight: bolder; font-family: Verdana; text-decoration: none !important; color: #ffffff !important; } .lj-spoiler-head a:hover {font-size:12px; text-shadow: 2px 1px 3px #000000; border-radius: 12px; margin: 0px !important; background: tomato; padding: 4px 16px !important; box-shadow: inset rgba(255,255,255,0.2) 6px 6px 18px 5px, inset rgba(0,0,0,0.5) -6px -6px 18px 5px; } /*---modifed spoiler fotovivo LJ ---*/ </textarea>


Для особого оживленной странички - целый выводок спойлеров гуськом:

<marquee behavior="alternate" width="850px"><lj-spoiler title="Пролог">Этот текст будет скрыт.</lj-spoiler>~o~<lj-spoiler title="*лог*">Всякого тут понаписано.</lj-spoiler>~o~<lj-spoiler title="залог">Все те же</lj-spoiler>~o~<lj-spoiler title="эпилог">Конец.</lj-spoiler>~o~<lj-spoiler title="послелог">Продолжение следует.</lj-spoiler></marquee>


(Если не бегают, то у вас - Хром, он баловство с marquee не жалует <a href="http://fotovivo.livejournal.com/86586.html" target="_blank">http://fotovivo.livejournal.com/86586.html</a> )
в отличии от прочих стилевых изысков, которые во всех расхожих браузерах - <img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/chrome/web.gif" /> <img src="http://www.weblabla.ru/style/image/firefox.gif" /> <img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/ie/web.gif" /> <img src="http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/opera/web.gif" />
выглядят примерно одинаково.


Есть отличный рецепт от <a href="http://journals-covers.livejournal.com/110085.html" target="_blank">http://journals-covers.livejournal.com/110085.html</a> как осуществить аналогичный подход к лж-кату.



</lj-spoiler>

(&quot;Живые&quot; спойлеры - зеленые, щелкнуть - откроются, остальные - только внешний вид для примера :)



АПД Новогодние кнопочки: <a href="http://fotovivo.livejournal.com/100617.html#cutid2" target="_blank">fotovivo.livejournal.com/100617</a>
Tags: ЖЖ
Subscribe
promo slavikap_2 march 30, 2015 20:05 3
Buy for 50 tokens
Дорогие друзья и гости моего блога! Предлагаю вам разместить рекламу своего наиболее интересного поста в Промо моего блога на этом месте. Тогда ее сможет увидеть до 7000 уникальных пользователей интернета в течение суток. Единственное условие - никакой политики, эротики и т.д. и т.п. И всего-то за…
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 7 comments