✂ Приручаем спойлер
Стильные стили и дивные div-ы
Содержание:
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили
Полезная штука - спойлер.
Кат, он только чтоб ленту сподручней прокручивать.
А спойлер и на открытой странице не развернется, пока его не щелкнут специально.
Под ним текст целевого назначения; кому не актуально - получает пост компактным, без лишних подробностей.
Для любителей заморачиваться: Как написать код кнопки, шаг за шагом
[ На подступах к HTML ☛ ]Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения "от сотворения мира" могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
добавь вокруг <a href="АДРЕС СТРАНИЦЫ"> <img src="АДРЕС КАРТИНКИ"> </a>
а конструировать то что хочется, так как хочется, со знанием дела.
ХТМЛ - наследник печатной машинки.
Как и в клавиатуре следы докомпьютерного девайса проглядывают -
табуляция, перенос строки, длинная клавиша пробела.
Пробел и буквы воспринимаются браузером как есть,
остальное требует специальных предписаний.
<br> - перевод строки
<p> - абзац
Возможностей у языка текстовой разметки гораздо больше, чем у пиш.машинки.
<u>Подчеркнуть</u>,
<i>выделить курсивом</i>,
<b>жирным шрифтом </b>
<font size="8px" color="red">размером и цветом</font>,
<center>
<blockquote>
с красной строки, с фиксированным отступом;</blockquote>
весь текст, обернутый тэгом blockquote
выводится с такими же полями.
На всё свои тэги, в угловых скобках пишутся: открывающий - перед "областью влияния"
и закрывающий с косой чертой - конец действия тега.
В законченном виде у документа HTML имеются "шапочка": начало; "голова", набитая служебными
инструкциями, в ней же имя (сеошные трюки для обмана поисковиков туда же, на голову надеваются).
И есть "тело" - собственно содержание страницы со всеми элементами.
<html>
<head> - голова
<title>ИМЯ </title>
</head>
<body>тело</body>
</html> (завершение)
У жжешной странички тоже все это есть, но непосредственный доступ нам открыт только к "body",
куда и попадает очередной пост из формы "новая запись".
- И зачем лезть в такие подробности, если шрифтовые эффекты со всеми оттенками и вставка ссылок -
готовыми кнопками делаются в визуальном редакторе?
- Чтобы представлять, с чем имеем дело, свойства и возможности инструмента.
- Предустановленные функции скудны, с дизайном не развернешься,
ручное управление стилями гораздо интереснее.
Как выделить абзац цветом,
ровненько напечатать стихи по центру?
Сделать врезку с картинками?
( Collapse )
Примерчик "Доски объявлений" на DIV-ах:
( по мотивам популярных "верхних постов" ) -
Правила посещения блога
с детальным указанием
причин явки - ОБЯЗАТЕЛЬНО!
уважительной причины
-НЕДЕЙСТВИТЕЛЬНА!
°
°
Список на отчисление
°
°
°
предъявлять в развернутом виде!
__________
____
Отличники репо-заготовки:
▣ ▣ ▣ ▣ ▣ ▣ ▣
Чтоб не пил, не курил и цветы всегда дарил. Забота о сохранении и умножении моего СК - святая обязанность кандидата в зафренд. Высокое сознание долга, нетерпимость к нарушениям моих интересов. Коллективизм и товарищеская взаимопомощь: от каждого по рецке - голому раскрутка. Гуманные отношения и взаимное уважение между людьми: человек человеку друг, товарищ и волк.
Только текст и форматирование, никаких картинок - попробуйте выделить и скопировать нижнее правое объявление ;)
( 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>
Код самой кнопки:
Для особого оживленной странички - целый выводок спойлеров гуськом:
(Если не бегают, то у вас - Хром, он баловство с marquee не жалует http://fotovivo.livejournal.com/86586.html )
в отличии от прочих стилевых изысков, которые во всех расхожих браузерах -
выглядят примерно одинаково.
Есть отличный рецепт от http://journals-covers.livejournal.com/110085.html как осуществить аналогичный подход к лж-кату.
("Живые" спойлеры - зеленые, щелкнуть - откроются, остальные - только внешний вид для примера :)
АПД Новогодние кнопочки: fotovivo.livejournal.com/100617