Nemez_06 (nemez_06) wrote,
Nemez_06
nemez_06

Categories:

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

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

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




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

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

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

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

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


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

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


Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения "от сотворения мира" могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
в понедельник новолуния возьми строчку <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: Компьютер
Subscribe

  • 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.
  • 0 comments