✂ Приручаем спойлер
Стильные стили и дивные div-ы
Содержание:
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили
Полезная штука - спойлер.
Кат, он только чтоб ленту сподручней прокручивать.
А спойлер и на открытой странице не развернется, пока его не щелкнут специально.
Под ним текст целевого назначения; кому не актуально - получает пост компактным, без лишних подробностей.
Для любителей заморачиваться: Как написать код кнопки, шаг за шагом
[ На подступах к HTML ☛ ]Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения "от сотворения мира" могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
в понедельник новолуния возьми строчку
- и будет тебе картинка;
добавь вокруг
с экстрактом корня квадратного и картинка станет ссылкой"
а конструировать то что хочется, так как хочется, со знанием дела.
ХТМЛ - наследник печатной машинки.
Как и в клавиатуре следы докомпьютерного девайса проглядывают -
табуляция, перенос строки, длинная клавиша пробела.
Пробел и буквы воспринимаются браузером как есть,
остальное требует специальных предписаний.
- перевод строки
- абзац
Возможностей у языка текстовой разметки гораздо больше, чем у пиш.машинки.
Подчеркнуть,
выделить курсивом,
жирным шрифтом
размером и цветом,
расположить по центру,
с красной строки, с фиксированным отступом;
весь текст, обернутый тэгом 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-ти пиксельным расстоянием от текста до пунктира.
Тень заголовка:
Стилевые свойства можно применять и к тегу - который задает заголовки разных уровней (размерами шрифта отличаются. 1 - самый большой).
Главный заголовок
Главный заголовок
text-shadow: 1px 2px 4px black, 0 0 1em blue; - первый набор (до запятой) дает тисненые буквы, второй - дымчатое облако вокруг.
Вложенный заголовок
Бой с тенью
Вложенный заголовок
Заголовок третьего уровня
Пушистые надписи.
Заголовок третьего уровня
Мы рассмотрели шрифтовые украшательства.
Теперь о возможностях форматирования - организации текста на странице
Пример абзаца с отступами:
Мезуза - небольшой пергаментный свиток, на котором специально обученный софер
(переписчик священных текстов) вручную написал специальным шрифтом и специальным
составом два отрывка из Писания. Футляр мезузы может быть сделан из дерева, стекла, пластика и т.д.
Мезузу прикрепляют гвоздями, шурупами либо клеем, главное, чтобы она не шаталась и не болталась.
Перед установкой мезузы произносят специальное благословение. http://fotovivo.livejournal.com/71199.html
Код для него:
Текст врезки
Где:
background - фон
padding: 12px 35px 18px 25px; - отступы (сверху; справа; снизу; слева; указание левого поля обеспечивает двухстороннее, книжное выравнивание)
font - шрифт жирный, размер12px, вида Courier
color - цвет текста
Стихотворному тексту определяем отступы по вкусу:
С. Михалков
На исходе двух столетий,
А точней - под Новый год
Черепашку как-то встретил
Одинокий Бегемот.
Бегемот вполне приличный -
В меру толстый и большой,
Энергичный, симпатичный
И с отзывчивой душой.
Черепашка на песочке
Спит за камешком, в тенечке,
Бегемот вблизи лежит -
Черепашку сторожит. ...
В тегах <выравнивание по центру> "простого ХТМЛ" без стилей,
Стихо-творение
выглядит несколько иначе:
Андрей Усачев.
Ботинок
В лопухах лежит Ботинок,
Здоровеннейший Ботин.
- Где, Ботинок, твой Братинок?
Почему лежишь один?
Вы друг с другом разошлись
И друг с другом не нашлись?
Кроме параграфов, существует более универсальный и гибкий инструмент -контейнеры-блоки
С практикой применения блоков мы уже встречались в посте про оформление подложек к картинкам
и цитат в рамочках http://fotovivo.livejournal.com/78930.html
Пример врезки:
Альтернативное
Мамонт и папонт гуляли на речке,
Бабант и дедант лежали на печке.
А внучек сидел на крылечке.
И сворачивал хобот в колечки.
М.Яснов
Рената МУХА. Собаку обидели
Я с ними делила и радость и горе.
Зачем же такое писать на заборе?
А если для них я действительно злая,
Я больше не буду.
Пусть сами - и лают!
Обтекание картинок текстом
Коды с пояснениями:
Блоки можно двигать по странице, расставлять в произвольном порядке, этим они незаменимы.
Примерчик "Доски объявлений" на DIV-ах:
( по мотивам популярных "верхних постов" ) -
Правила посещения блога
☉ Резюме в трех экземплярах
с детальным указанием
причин явки - ОБЯЗАТЕЛЬНО!
☉Явка без
уважительной причины
-НЕДЕЙСТВИТЕЛЬНА!
☉ГРАФИК посещаемости
°
°
Список на отчисление
°
°
°
☉сертификaт об обрезании
предъявлять в развернутом виде!
☉ ☉ ПЕРЕДОВИКИ ПРОИЗВОДСТВА
комментов________________
__________
____
Отличники репо-заготовки:
▣ ▣ ▣ ▣ ▣ ▣ ▣
☉ ☉Дополнительный перечень требований
Чтоб не пил, не курил и цветы всегда дарил. Забота о сохранении и умножении моего СК - святая обязанность кандидата в зафренд. Высокое сознание долга, нетерпимость к нарушениям моих интересов. Коллективизм и товарищеская взаимопомощь: от каждого по рецке - голому раскрутка. Гуманные отношения и взаимное уважение между людьми: человек человеку друг, товарищ и волк.
Только текст и форматирование, никаких картинок - попробуйте выделить и скопировать нижнее правое объявление ;)
Шаблон для доски:
☉
На первое ☉ На второе ☉
На третье ☉ ☉ На закуску ° ° ° ° °
На посошок
Так же и сам текст внутри блочных элементов понимает команды вправо-влево,
подчиняется требованиям расположиться в заданной позиции.
На картинки предписания действуют аналогично.
Границы блоков ( как и границы прочих элементов) прописываются в стилях
со сколь угодно подробными характеристиками:
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.
ЖЖ не исключение.
Например, в тексте много цитат, которым желательно цвето-шрифтовое выделение,
или всем картинкам потребовалось задать одинаковое обрамление -
описываем внешний вид и все приметы полей и рамочек в виде:
Теперь в нашем документе все абзацы
выполнены в едином стиле -
белым шрифтом Arial на серебристом фоне, с отступом 20 пикселей.
А все картинки приобрели двадцатипиксельную рифленую границу и смещены вправо.
А вот из блоков, div, нужное оформление получат только те, которые ссылаются на описание divny_div следующим образом:
Тут некий текст
И совсем бы всё расчудесно, но есть небольшая загвоздка.
В "тело" документа, через форму поста ЖЖ, такую штуку:
- в фигурных скобках прописываем ему радкально-зеленый цвет, отправляем в Сustom css
.lj-spoiler-head {border:1px solid #000000; background-color:GreenYellow;
color:#000000; width:80px; height:80px}
смотрим, что получится.
Работает! Ядрено-зеленый спойлер на во всех записях, где он используется!
Нет необходимости вносить руками вызов class="lj-spoiler-head" в коды записи, это проделывает за нас движок ЖЖ
автоматически, но мы теперь знаем, как вставить в "голову" свое описание этого класса :)
Используя свойства div-ов, можем придать спойлерной кнопке любимый цвет и размер.
Углы блока скруглить до такой степени, что он превратится в окружность.
Вставить изображение - а фон и границы при этом сделать невидимыми.
Анимированная картинка тоже годится, смайлик будет прыгать на спойлере :)
На что фантазии хватит.
Квадратные скобки вокруг ссылки никуда не денешь, разве что утопить их в фоне, слив его по цвету со шрифтом.
(На этот случай предпочтителен фон без градиента. На выпуклой кнопке маскировка менее успешна)
И наконец главный номер программы,
ради которого мы пробирались сквозь дебри стилей, тегов и их атрибутов.
Выбираем, во что приодеть наш спойлер.
Для наглядности раскраску опробуем на контейнере
Заготовка для него:
Цвет можно подобрать прямо в редакторе ЖЖ, скопировать из окошка "Код".
Напр: #31f568
Перед цифрами знак решетки обязательно.
Пусть
padding: 4px; - чем больше число, тем больше поля кнопки.
Белый цвет надписи: #ffffff , размера - 1.8em
bold - жирным шрифтом без засечек Arial
border: 1px ridge Yellow - едва заметный тонкий бордер, рельефный, желтый (Посмотреть стили рамочек)
border-radius: 12px - закругление уголков, больше число - сильнее скругление.
text-shadow:green 2px 2px 0; - тень текста зеленая четкая. (Для размытой - последняя величина увеличивается на два-три пикселя)
Вот что получим:
Наша кнопка
Оживляж:
Нагуглим картинку. Напр:
Добавим в код ее адрес:
Заходи под спойлер...
Параметр no-repeat исключает размножение фоновой картинки
5px задает ей отступ от границ
Поля для текста: padding: 1px 15px 5px 40px; - сверху, справа, снизу (чуть больше для выравнивания)
и слева - в соответстии с шириной фоновой картинки, чтобы текст на нее не накладывался.
И еще появился элемент display: inline-block; - здесь он делает контейнер "резиновым".
Результат:
Заходи под спойлер...
Пока это не кнопка, только образец внешнего вида.
Построим по нему код для спойлера:
.lj-spoiler-head {БАЗОВЫЙ СТИЛЬ } .lj-spoiler-head a {НАШ ДИЗАЙН КНОПКИ } .lj-spoiler-head a:hover {СТИЛЬ КНОПКИ ПРИ НАВЕДЕНИИ КУРСОРА } /*---modifed spojler fotovivo LJ ---*/
Просто срисуйте, как есть.
Я это выудила в исходниках страницы, как ЖЖ обращается к спойлеру,
при активном виде ссылки, при нажатии.
Вместо НАШ ДИЗАЙН КНОПКИ вставьте заготовленное описание стиля для фона, текста-
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;
Код спойлера в сборе:
.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 ---*/
Нажатая кнопка:
Код несколько избыточный, есть куда оптимизировать, не будем в это вдаваться.
Пора закруляться с постом, пока он не превратился в многотомник =)
Трудно было?
Так это и требуется ⚓
Я не спец в кодинге, разбираюсь по ходу конструирования и делюсь о впечатлениями/изобретениями в стиле "от чайника - чайнику".
Все вышеописанные премудрости на разные лады раскрывают многочисленные учебные пособия -
солидные с подробными спецификациями, для лириков-любителей, домохозяек гуманитарного склада,
иллюстированные, с роликами и пританцовываниями.
Отдельная задача сегодняшнего рассказа - пробудить интерес начинающих, продолжающих и потенциальных "бабушек"/"дедушек", далеких от цифровых технологий, к тому, как устроены картинка и текст на экране.
К слову, не весь HTML устарел. Стили заменили прежние инструменты верстки и оформления текста.
Многие элементы вполне еще рабочие и актуальные.
Якоря например. Как-нибудь в следующий раз.
Готовые примеры:
Снежок:
Развернуть ➽
Код для внесения в Custom CSS:
.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 ---*/
➽ стрелочка - шрифтовый элемент, в стили не входит;
таких псевдо-букв в таблице уникодов тьма http://unicode-table.com/ru/#geometric-shapes
Щенок
Читать дальше ➽
Код:
.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 ---*/
[...И другие превращения спойлера ☛ ]
Сторож
Разбудить ➽
.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 ---*/
Капсула
Принять...
.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 ---*/
Цербер
Развернуть...
.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 ---*/
Беспокойная кнопка может даже носиться по полю :)
Развернуть ▷▷▷
[Открыть!] Этот текст будет скрыт.
Код самой кнопки:
.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 ---*/
Для особого оживленной странички - целый выводок спойлеров гуськом:
[Пролог]Этот текст будет скрыт. ~o~[*лог*]Всякого тут понаписано.~o~[залог]Все те же~o~[эпилог]Конец.~o~[послелог]Продолжение следует.
(Если не бегают, то у вас - Хром, он баловство с marquee не жалует http://fotovivo.livejournal.com/86586.html )
в отличии от прочих стилевых изысков, которые во всех расхожих браузерах -
выглядят примерно одинаково.
Есть отличный рецепт от http://journals-covers.livejournal.com/110085.html как осуществить аналогичный подход к лж-кату.
("Живые" спойлеры - зеленые, щелкнуть - откроются, остальные - только внешний вид для примера :)
АПД Новогодние кнопочки: fotovivo.livejournal.com/100617
Содержание:
На подступах к HTML (языку гипертекстовой разметки)
Оформление шрифтов: цвет, фон, тени, рамочки. CSS и стилевые свойства
Форматирование текста на странице: отступы, background, абзац, оформление границ блока
Обтекание картинок текстом
Блоки и внешние стили
Полезная штука - спойлер.
Кат, он только чтоб ленту сподручней прокручивать.
А спойлер и на открытой странице не развернется, пока его не щелкнут специально.
Под ним текст целевого назначения; кому не актуально - получает пост компактным, без лишних подробностей.
Для любителей заморачиваться: Как написать код кнопки, шаг за шагом
[ На подступах к HTML ☛ ]Судя по предыдущим отзывам, не все представляют что оно такое
и пояснения "от сотворения мира" могут оказаться не лишними -
чтоб не слепо копировать формулы-заклинания:
в понедельник новолуния возьми строчку
- и будет тебе картинка;
добавь вокруг
с экстрактом корня квадратного и картинка станет ссылкой"
а конструировать то что хочется, так как хочется, со знанием дела.
ХТМЛ - наследник печатной машинки.
Как и в клавиатуре следы докомпьютерного девайса проглядывают -
табуляция, перенос строки, длинная клавиша пробела.
Пробел и буквы воспринимаются браузером как есть,
остальное требует специальных предписаний.
- перевод строки
- абзац
Возможностей у языка текстовой разметки гораздо больше, чем у пиш.машинки.
Подчеркнуть,
выделить курсивом,
жирным шрифтом
размером и цветом,
расположить по центру,
с красной строки, с фиксированным отступом;
весь текст, обернутый тэгом 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-ти пиксельным расстоянием от текста до пунктира.
Тень заголовка:
Стилевые свойства можно применять и к тегу - который задает заголовки разных уровней (размерами шрифта отличаются. 1 - самый большой).
Главный заголовок
Главный заголовок
text-shadow: 1px 2px 4px black, 0 0 1em blue; - первый набор (до запятой) дает тисненые буквы, второй - дымчатое облако вокруг.
Вложенный заголовок
Бой с тенью
Вложенный заголовок
Заголовок третьего уровня
Пушистые надписи.
Заголовок третьего уровня
Мы рассмотрели шрифтовые украшательства.
Теперь о возможностях форматирования - организации текста на странице
Пример абзаца с отступами:
Мезуза - небольшой пергаментный свиток, на котором специально обученный софер
(переписчик священных текстов) вручную написал специальным шрифтом и специальным
составом два отрывка из Писания. Футляр мезузы может быть сделан из дерева, стекла, пластика и т.д.
Мезузу прикрепляют гвоздями, шурупами либо клеем, главное, чтобы она не шаталась и не болталась.
Перед установкой мезузы произносят специальное благословение. http://fotovivo.livejournal.com/71199.html
Код для него:
Текст врезки
Где:
background - фон
padding: 12px 35px 18px 25px; - отступы (сверху; справа; снизу; слева; указание левого поля обеспечивает двухстороннее, книжное выравнивание)
font - шрифт жирный, размер12px, вида Courier
color - цвет текста
Стихотворному тексту определяем отступы по вкусу:
С. Михалков
На исходе двух столетий,
А точней - под Новый год
Черепашку как-то встретил
Одинокий Бегемот.
Бегемот вполне приличный -
В меру толстый и большой,
Энергичный, симпатичный
И с отзывчивой душой.
Черепашка на песочке
Спит за камешком, в тенечке,
Бегемот вблизи лежит -
Черепашку сторожит. ...
В тегах <выравнивание по центру> "простого ХТМЛ" без стилей,
Стихо-творение
выглядит несколько иначе:
Андрей Усачев.
Ботинок
В лопухах лежит Ботинок,
Здоровеннейший Ботин.
- Где, Ботинок, твой Братинок?
Почему лежишь один?
Вы друг с другом разошлись
И друг с другом не нашлись?
Кроме параграфов, существует более универсальный и гибкий инструмент -контейнеры-блоки
С практикой применения блоков мы уже встречались в посте про оформление подложек к картинкам
и цитат в рамочках http://fotovivo.livejournal.com/78930.html
Пример врезки:
Альтернативное
Мамонт и папонт гуляли на речке,
Бабант и дедант лежали на печке.
А внучек сидел на крылечке.
И сворачивал хобот в колечки.
М.Яснов
Рената МУХА. Собаку обидели
Я с ними делила и радость и горе.
Зачем же такое писать на заборе?
А если для них я действительно злая,
Я больше не буду.
Пусть сами - и лают!
Обтекание картинок текстом
Коды с пояснениями:
(начало блока)
http://cdn1.share.slickpic.com/u/Rimlus9/FromOpera/org/CVETY_001/web.jpg" style="border:4px ridge silver; float: left; (задает обтекание, картинка "отплывает" к левому краю)
padding: 15px; margin: 20px;">
Альтернативное
Мамонт и папонт гуляли на речке,
Бабант и дедант лежали на печке.
А внучек сидел на крылечке.
И сворачивал хобот в колечки.
М.Яснов
(текст обтекает картинку справа)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-ах:
( по мотивам популярных "верхних постов" ) -
Правила посещения блога
☉ Резюме в трех экземплярах
с детальным указанием
причин явки - ОБЯЗАТЕЛЬНО!
☉Явка без
уважительной причины
-НЕДЕЙСТВИТЕЛЬНА!
☉ГРАФИК посещаемости
°
°
Список на отчисление
°
°
°
☉сертификaт об обрезании
предъявлять в развернутом виде!
☉ ☉ ПЕРЕДОВИКИ ПРОИЗВОДСТВА
комментов________________
__________
____
Отличники репо-заготовки:
▣ ▣ ▣ ▣ ▣ ▣ ▣
☉ ☉Дополнительный перечень требований
Чтоб не пил, не курил и цветы всегда дарил. Забота о сохранении и умножении моего СК - святая обязанность кандидата в зафренд. Высокое сознание долга, нетерпимость к нарушениям моих интересов. Коллективизм и товарищеская взаимопомощь: от каждого по рецке - голому раскрутка. Гуманные отношения и взаимное уважение между людьми: человек человеку друг, товарищ и волк.
Только текст и форматирование, никаких картинок - попробуйте выделить и скопировать нижнее правое объявление ;)
Шаблон для доски:
Главное блюдо
На первое
На третье
На посошок
Так же и сам текст внутри блочных элементов понимает команды вправо-влево,
подчиняется требованиям расположиться в заданной позиции.
На картинки предписания действуют аналогично.
Границы блоков ( как и границы прочих элементов) прописываются в стилях
со сколь угодно подробными характеристиками:
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.
ЖЖ не исключение.
Например, в тексте много цитат, которым желательно цвето-шрифтовое выделение,
или всем картинкам потребовалось задать одинаковое обрамление -
описываем внешний вид и все приметы полей и рамочек в виде:
Теперь в нашем документе все абзацы
выполнены в едином стиле -
белым шрифтом Arial на серебристом фоне, с отступом 20 пикселей.
А все картинки приобрели двадцатипиксельную рифленую границу и смещены вправо.
А вот из блоков, div, нужное оформление получат только те, которые ссылаются на описание divny_div следующим образом:
Тут некий текст
И совсем бы всё расчудесно, но есть небольшая загвоздка.
В "тело" документа, через форму поста ЖЖ, такую штуку:
- в фигурных скобках прописываем ему радкально-зеленый цвет, отправляем в Сustom css
.lj-spoiler-head {border:1px solid #000000; background-color:GreenYellow;
color:#000000; width:80px; height:80px}
смотрим, что получится.
Работает! Ядрено-зеленый спойлер на во всех записях, где он используется!
Нет необходимости вносить руками вызов class="lj-spoiler-head" в коды записи, это проделывает за нас движок ЖЖ
автоматически, но мы теперь знаем, как вставить в "голову" свое описание этого класса :)
Используя свойства div-ов, можем придать спойлерной кнопке любимый цвет и размер.
Углы блока скруглить до такой степени, что он превратится в окружность.
Вставить изображение - а фон и границы при этом сделать невидимыми.
Анимированная картинка тоже годится, смайлик будет прыгать на спойлере :)
На что фантазии хватит.
Квадратные скобки вокруг ссылки никуда не денешь, разве что утопить их в фоне, слив его по цвету со шрифтом.
(На этот случай предпочтителен фон без градиента. На выпуклой кнопке маскировка менее успешна)
И наконец главный номер программы,
ради которого мы пробирались сквозь дебри стилей, тегов и их атрибутов.
Выбираем, во что приодеть наш спойлер.
Для наглядности раскраску опробуем на контейнере
Заготовка для него:
Цвет можно подобрать прямо в редакторе ЖЖ, скопировать из окошка "Код".
Напр: #31f568
Перед цифрами знак решетки обязательно.
Пусть
padding: 4px; - чем больше число, тем больше поля кнопки.
Белый цвет надписи: #ffffff , размера - 1.8em
bold - жирным шрифтом без засечек Arial
border: 1px ridge Yellow - едва заметный тонкий бордер, рельефный, желтый (Посмотреть стили рамочек)
border-radius: 12px - закругление уголков, больше число - сильнее скругление.
text-shadow:green 2px 2px 0; - тень текста зеленая четкая. (Для размытой - последняя величина увеличивается на два-три пикселя)
Вот что получим:
Наша кнопка
Оживляж:
Нагуглим картинку. Напр:
Добавим в код ее адрес:
Заходи под спойлер...
Параметр no-repeat исключает размножение фоновой картинки
5px задает ей отступ от границ
Поля для текста: padding: 1px 15px 5px 40px; - сверху, справа, снизу (чуть больше для выравнивания)
и слева - в соответстии с шириной фоновой картинки, чтобы текст на нее не накладывался.
И еще появился элемент display: inline-block; - здесь он делает контейнер "резиновым".
Результат:
Заходи под спойлер...
Пока это не кнопка, только образец внешнего вида.
Построим по нему код для спойлера:
.lj-spoiler-head {БАЗОВЫЙ СТИЛЬ } .lj-spoiler-head a {НАШ ДИЗАЙН КНОПКИ } .lj-spoiler-head a:hover {СТИЛЬ КНОПКИ ПРИ НАВЕДЕНИИ КУРСОРА } /*---modifed spojler fotovivo LJ ---*/
Просто срисуйте, как есть.
Я это выудила в исходниках страницы, как ЖЖ обращается к спойлеру,
при активном виде ссылки, при нажатии.
Вместо НАШ ДИЗАЙН КНОПКИ вставьте заготовленное описание стиля для фона, текста-
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;
Код спойлера в сборе:
.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 ---*/
Нажатая кнопка:
Код несколько избыточный, есть куда оптимизировать, не будем в это вдаваться.
Пора закруляться с постом, пока он не превратился в многотомник =)
Трудно было?
Так это и требуется ⚓
Я не спец в кодинге, разбираюсь по ходу конструирования и делюсь о впечатлениями/изобретениями в стиле "от чайника - чайнику".
Все вышеописанные премудрости на разные лады раскрывают многочисленные учебные пособия -
солидные с подробными спецификациями, для лириков-любителей, домохозяек гуманитарного склада,
иллюстированные, с роликами и пританцовываниями.
Отдельная задача сегодняшнего рассказа - пробудить интерес начинающих, продолжающих и потенциальных "бабушек"/"дедушек", далеких от цифровых технологий, к тому, как устроены картинка и текст на экране.
К слову, не весь HTML устарел. Стили заменили прежние инструменты верстки и оформления текста.
Многие элементы вполне еще рабочие и актуальные.
Якоря например. Как-нибудь в следующий раз.
Готовые примеры:
Снежок:
Развернуть ➽
Код для внесения в Custom CSS:
.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 ---*/
➽ стрелочка - шрифтовый элемент, в стили не входит;
таких псевдо-букв в таблице уникодов тьма http://unicode-table.com/ru/#geometric-shapes
Щенок
Читать дальше ➽
Код:
.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 ---*/
[...И другие превращения спойлера ☛ ]
Сторож
Разбудить ➽
.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 ---*/
Капсула
Принять...
.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 ---*/
Цербер
Развернуть...
.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 ---*/
Беспокойная кнопка может даже носиться по полю :)
Развернуть ▷▷▷
[Открыть!] Этот текст будет скрыт.
Код самой кнопки:
.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 ---*/
Для особого оживленной странички - целый выводок спойлеров гуськом:
[Пролог]Этот текст будет скрыт. ~o~[*лог*]Всякого тут понаписано.~o~[залог]Все те же~o~[эпилог]Конец.~o~[послелог]Продолжение следует.
(Если не бегают, то у вас - Хром, он баловство с marquee не жалует http://fotovivo.livejournal.com/86586.html )
в отличии от прочих стилевых изысков, которые во всех расхожих браузерах -
выглядят примерно одинаково.
Есть отличный рецепт от http://journals-covers.livejournal.com/110085.html как осуществить аналогичный подход к лж-кату.
("Живые" спойлеры - зеленые, щелкнуть - откроются, остальные - только внешний вид для примера :)
АПД Новогодние кнопочки: fotovivo.livejournal.com/100617