Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Categories:

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

Стильные стили и дивные 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",
куда и попадает очередной пост из формы "новая запись".

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

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


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



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

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


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

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

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


Откройте форму записи в режиме HTML,
выделите строку в тексте и в верхнем меню задайте ей подчеркивание, выделение болдом, цвет и размер,
результат будет выглядеть следующим образом:
<span style="font-size: 1.4em"><spanstyle="color: #914487;"><b><u>Кожух генератора</u></b></span></span>

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

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

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

Пример:

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

Код:
<span style="font-size: 1.6em; color:darkblue; font-weight: bold;  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>

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

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>

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>


Заголовок третьего уровня

Пушистые надписи.

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



Мы рассмотрели шрифтовые украшательства.
Теперь о возможностях форматирования - организации текста на странице

Пример абзаца с отступами:


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


Код для него:
<p style="background: #b2d6bd; padding: 12px 35px; font: bold 12px Courier; color:#0000ff;">Текст врезки</p>

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


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

С. Михалков

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

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

Черепашка на песочке
Спит за камешком, в тенечке,
Бегемот вблизи лежит -
Черепашку сторожит. ...


<p style="background:#d3ded5; padding: 15px 250px; font:12px; color:darkblue; font-family:Book Antiqua;">

В тегах <выравнивание по центру> "простого ХТМЛ" без стилей,
<center><font color="#0000ff" size="3px" face="comic sans"> Стихо-творение</font></center>
выглядит несколько иначе:

Андрей Усачев.

Ботинок

В лопухах лежит Ботинок,
Здоровеннейший Ботин.
– Где, Ботинок, твой Братинок?
Почему лежишь один?
Вы друг с другом разошлись
И друг с другом не нашлись?





Кроме параграфов, существует более универсальный и гибкий инструмент -

контейнеры-блоки <div></div>


С практикой применения блоков мы уже встречались в посте про оформление подложек к картинкам
и цитат в рамочках http://fotovivo.livejournal.com/78930.html

Пример врезки:



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

Мамонт и папонт гуляли на речке,
Бабант и дедант лежали на печке.
А внучек сидел на крылечке.
И сворачивал хобот в колечки.
М.Яснов
Рената МУХА. Собаку обидели

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


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

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




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



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

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

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

Отличники репо-заготовки:
    ▣ ▣ ▣ ▣ ▣ ▣ ▣
☉                                ☉
Дополнительный перечень требований


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

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

Шаблон для доски:




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


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



<div style="width:500px; height:260px; background:#fbfcb8;  border-left: 8px double red; border-right: 5px dotted brown; border-top: 10px ridge skyblue; border-bottom: 6px green dashed;  border-radius: 90px 20px 20px 0px; box-shadow: 4px 3px 5px #40310a;"></div>

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 - внешняя тень блока (смещение вниз, справо, размытие)



Самое замечательное в стилях -
это не изобилие дополнительных рюшечек, а то, что

их можно вынести за скобки.

Все повторяющиеся элементы декора описать один раз, в начале документа,
и по мере необходимости ссылаться на это описание. Или даже из другого ресурса подгружать.

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

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

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

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

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





И совсем бы всё расчудесно, но есть небольшая загвоздка.
В "тело" документа, через форму поста ЖЖ, такую штуку: <style type="text/css" > вставить нельзя.
По отдельности стили в каждый тег можно, а как класс - увы.

Вставлять стили нужно в <head>, в ту самую голову, которая заполняется программно, без нашего участия.

Но - не зря ж мы старались, во всем этом разбирались!

Для самых беспокойных пользователей оставлена лазейка.
Раздел "Пользовательский CSS" в настройках блога.
http://www.livejournal.com/customize/options.bml?group=customcss

Есть возможность определить собственные стили для элементов страницы и вписать их в этот раздел.

Нужен готовый абзац, чтоб был под рукой? Врезка с фоном и рамкой?
Вставим в Пользовательский CSS определение напр. для
p {background: Bisque; color:darkblue; font-weight: bolder; font-family:Verdana; border: 2px ridge Yellow;}
и теперь достаточно обернуть текст тегами <p>  </p> что бы он приобрел заданный вид - синим по бежевому,
выбранным шрифтом и рамочкой.
(Т.е. это станет настройками по умолчанию; ничто не мешает вручную прописать какие угодно.)
Также можно обойтись с заголовками, ссылками, формами кнопочек, и даже подчеркиванию/перечеркиванию придумать собственный фасон.

Потренируемся?



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

Оказывается для подчеркиваний-надчеркиваний-перечеркиваниий и просто линий определен атрибут border,
граница. Как у изображений, таблиц, блоков.
Какая ж там рамочка у черты? А вот самая что ни на есть, может ненароком задана, но такая ж, как у солидных контейнеров.
А уж у бордера свойств туча. Пунктирные, рельефные, с отступами и скруглениями, наслоениями теней.
Так же как в примере с div, подчеркиванию можно задать разные стили верхней и нижней стороны! И даже левой и правой =)

<u style="BORDER: 7px outset orange; border-radius: 120px; padding:10px; background: #f7ecba;">

Задана рамочка толщиной 7 пикс. выпуклая, оранжевая, закругленная по углам, отступ от подчеркивания - 10 пикс.
фон - (да, гарнице можно еще и собственный фон приписать).

Подчеркнем нужное

Уже занятно, но посмотрим что еще из этого можно вытянуть.

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

color - это цвет шрифта. Действует и на слово и на подчеркивание.
text-shadow - уже знакомая нам тень текста. Чем больше цифра, тем дальше отбрасывается тень.
А фишка тут в скобках с нулями rgba(0, 0, 0, 0), последний ноль в этой конструкции - прозрачность.
(От 0 - полная прозрачность, до 1 - полностью плотный цвет. Похоже на настройки графических редакторов.)
Т.е. трюк в том, что текст делается невидимым, а тень остается =)
Если тень задана не размытая, то от обычной надписи не отличишь. В рамочке.

Подчеркнем нужное

Сложнее с собственно подчеркиванием. В Хроме оно исчезает.
А ФайрФокс добросовестно пририсовывает пушистую тень и подчеркиванию тоже.

Пользователю ФФ остается или наслаждаемся подчеркнутым словом в обводке
или убирать нижний отступ до нуля, тогда рамочка сливается с подчеркиванием:
Подчеркнем нужное

<u style="BORDER: 7px groove silver; background: #e6f8fc; border-radius: 120px; padding:5px 8px 0px 8px; text-shadow: #000 2px 1px;">Подчеркнем нужное</u>

padding - поля: верхнее, правое, нижнее (это оно нулевое) и левое.

Завершающий шаг -
берем тот или иной вариант и оформляем в качестве выносного стиля:

u {BORDER: 7px #bdfa16;
border-radius: 120px;
padding:7px 8px 0px 6px;
}

Все тоже самое, только в фигурных скобках.

Идем в настройки журнала
http://www.livejournal.com/customize/options.bml?group=customcss
в раздел пользовательских кодов, видим там окно - пустое, если у вас это первый раз, а если не пустое, то вы знаете, что делать.
Копипастим туда нашу конструкцию, жмем сохранить. Все, больше ничего не надо.

Теперь у нас по умолчанию выделенные места не просто подчеркнуты, а обведенны кружочком

Вдоль по Африке гуляют, Фиги-финики срывают

Попробуйте в комментах. (Автоматики там нет, вручную: <u>проба</u>)


Если вывести бордер в ноль, функция U жж-редактора станет подручным маркером:

Финики подразделяются на мягкие и сухие. А тек же финики с инвертным сахаром, содержащие декстрозу и глюкозу, и финики с тростниковым сахаром, содержащие в основном тростниковый сахар (сахарозу). Большинство мягких сортов - финики с инвертным сахаром, а большинство сухих сортов - финики с тростниковым сахаром.

Напомню хороший ресурс где брать цвета в кодах. (есть и множество других не хуже)



Это была тренировка; теперь у нас опыт обращения с Пользовательским CSS
и все готово, чтобы заняться превращением спойлера .

Откроем исходный код какого-либо поста, где есть спойлер - поиском по его заголовку находим соответствующее место в кодах,
и обнаруживаем, что живет нужный нам объект под именем <div class="lj-spoiler-head">
Т.е. это самый что ни наесть блок, со ссылкой на идентификатор.
Который обязан выглядеть как
<style type="text/css" >
.lj-spoiler-head {
}
</style>

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

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



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

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

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

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

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

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

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

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

Наша кнопка



Оживляж:

Нагуглим картинку. Напр:

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

<div style="display: inline-block; background: #31f568 url(http://liubavyshka.ru/_ph/21/2/978060466.gif) no-repeat 5px; padding: 1px 15px 5px 40px;  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

Параметр no-repeat исключает размножение фоновой картинки
5px задает ей отступ от границ

Поля для текста: padding: 1px 15px 5px 40px; - сверху, справа, снизу (чуть больше для выравнивания)
и слева - в соответстии с шириной фоновой картинки, чтобы текст на нее не накладывался.

И еще появился элемент display: inline-block; - здесь он делает контейнер "резиновым".

Результат:

Заходи под спойлер...


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

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



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

Вместо НАШ ДИЗАЙН КНОПКИ вставьте заготовленное описание стиля для фона, текста-
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;  color: #ffffff; font-size: 1.8em; font-weight: bold; font-family: Arial; text-decoration: none !important; text-shadow:green 2px 2px;

text-decoration: none - добавлен элемент, отвечающий за отмену подчеркивания ссылки

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

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

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

Нажатая кнопка:


Код несколько избыточный, есть куда оптимизировать, не будем в это вдаваться.


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

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

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

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



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

Снежок:

Развернуть ➽

Код для внесения в 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
Tags: HTMLство, блогоухищрения, веб-штучки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 93 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →