October 15th, 2013

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

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



Содержание:
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили

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

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


[ На подступах к HTML ☛ ]Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения "от сотворения мира" могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
в понедельник новолуния возьми строчку <img src="картинка_001.jpg">   - и будет тебе картинка;
добавь вокруг <a href="АДРЕС СТРАНИЦЫ"> <img src="АДРЕС КАРТИНКИ"> </a>
с экстрактом корня квадратного и картинка станет ссылкой"
а конструировать то что хочется, так как хочется, со знанием дела.

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

Пробел и буквы воспринимаются браузером как есть,
остальное требует специальных предписаний.
<br> - перевод строки
<p> - абзац
Возможностей у языка текстовой разметки гораздо больше, чем у пиш.машинки.
<u>Подчеркнуть</u>,
<i>выделить курсивом</i>,
<b>жирным шрифтом </b>
<font size="8px" color="red">размером и цветом</font>,

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

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

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

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

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

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

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

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

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


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

( Collapse )

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

Правила посещения блога

☉
Резюме в трех экземплярах
с детальным указанием
причин явки - ОБЯЗАТЕЛЬНО!
☉
Явка без
уважительной причины
-НЕДЕЙСТВИТЕЛЬНА!
☉
ГРАФИК посещаемости
°
°
Список на отчисление
°
°
°
☉
сертификaт об обрезании
предъявлять в развернутом виде!
☉              ☉
  ПЕРЕДОВИКИ ПРОИЗВОДСТВА
комментов
________________
__________
____
Отличники репо-заготовки:
    ▣ ▣ ▣ ▣ ▣ ▣ ▣
☉                                ☉
Дополнительный перечень требований


Чтоб не пил, не курил и цветы всегда дарил. Забота о сохранении и умножении моего СК - святая обязанность кандидата в зафренд. Высокое сознание долга, нетерпимость к нарушениям моих интересов. Коллективизм и товарищеская взаимопомощь: от каждого по рецке - голому раскрутка. Гуманные отношения и взаимное уважение между людьми: человек человеку друг, товарищ и волк.

Только текст и форматирование, никаких картинок - попробуйте выделить и скопировать нижнее правое объявление ;)

( Collapse )

( Collapse )

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

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

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

( Collapse )

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

Снежок:

Развернуть ➽

Код для внесения в Custom CSS:



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


Щенок

Читать дальше ➽


Код:



[...И другие превращения спойлера ☛ ]
Сторож

Разбудить ➽






Капсула

 Принять... 






Цербер

Развернуть...






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

Развернуть ▷▷▷


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

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




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

[Пролог]Этот текст будет скрыт. ~o~[*лог*]Всякого тут понаписано.~o~[залог]Все те же~o~[эпилог]Конец.~o~[послелог]Продолжение следует.


(Если не бегают, то у вас - Хром, он баловство с marquee не жалует http://fotovivo.livejournal.com/86586.html )
в отличии от прочих стилевых изысков, которые во всех расхожих браузерах -
выглядят примерно одинаково.


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





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

АПД Новогодние кнопочки: fotovivo.livejournal.com/100617