Шаблон:Blockquote-Th

Материал из Wikitranslators
Версия от 10:34, 17 марта 2014; CanoniC (обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Содержание

Редактируемая форма «Цитирование» с тенью

(Знакомая форма <blockquote></blockquote> с новыми элементами)

Подробное описание добавленных элементов чуть ниже. Возможно некоторые сочтут описание чрезмерно подробным и занудным. Пускай так. В данном случае моё пояснение обращено к тем, у кого нет опыта работы с параметрами шаблона (иначе говоря, кодировкой).


Вид готовой цитаты

Вот как будет выглядеть готовая цитата с указанием имени автора, книги и вообще любого источника:

«Всё что я затевал с величайшей скромностью, сегодня дало осечку с невиданной дерзостью. Всё, что я годами осторожно и крадучись вёл за ручку по-над обрывом – всё мгновенно рухнуло вниз, катясь и разваливаясь на части со страшным грохотом и звоном».
из письма Конраду Сати, 7 июня 1900

На страничке редактирования

А вот так она будет выглядеть на страничке редактирования (код формы выделен зелёным цветом):


<blockquote style="width:85%;text-align:left;border-radius:15px 0px 15px 0px;padding:15px;box-shadow:1px 2px 3px #d4a567; background:#efe5d8">«Всё что я затевал с величайшей скромностью, сегодня дало осечку с невиданной дерзостью. Всё, что я годами осторожно и крадучись вёл за ручку по-над обрывом – всё мгновенно рухнуло вниз, катясь и разваливаясь на части со страшным грохотом и звоном».<hr>
::::::::::::::::::::::из письма Конраду Сати, 7 июня 1900</blockquote>


Что к чему

Теперь немножко разберёмся, что к чему. Сразу предупреждаю, несмотря на изобилие странных знаков и слов, шаблон очень прост в освоении. Не нужно пугаться и хвататься за голову. Только немного Вашего внимания.

Итак. Как Вы уже видите, это несколько модифицированная версия знакомого шаблона <blockquote></blockquote>. Для улучшения внешнего вида добавлены стилевые значения (style="...") :

  • width:85% — ширина цитаты. Значение ширины может обозначаться как в процентах (%), так и в пикселах (px). Между процентами и пикселами есть одно существенное отличие. Значение в процентах (например, как в нашем примере - 85%) — не фиксируемое на странице (можно сказать, резиновое), то есть, вне зависимости от размеров экрана цитата будет занимать ровно 85% (или 60%, 15% и т.д.) от общей ширины страницы (не статьи, а именно страницы). Значение в пикселах — наоборот, фиксируемое. Вместо объяснения пиксельного значения, лучшим примером послужит обычная иллюстрация на странице, потому что значение картинки всегда указано в пикселах. Словом, не бойтесь экспериментировать.
  • text-align:left — положение текста в цитате. Также это может быть center или right.
  • border-radius:15px 0px 15px 0px — скругление углов. Вы можете указать либо одно числовое значение вместо четырёх, как в нашем примере. Тогда, в результате, все углы будут одинаково округлены. Если же Вам нужны квадратные углы, просто обнулите все значения.
  • padding:15px — расстояние между сторонами формы и границами внутреннего текста. 15px — это оптимально удобное значение (на мой взгляд), но Вы можете поставить своё число, от 0 до 1000 px.
  • box-shadow: — тень формы. У элемента box-shadow три числовых значения и цвет. Цвет, в принципе, можно специально не прописывать, тогда цвет тени у формы будет чёрный, по умолчанию. Теперь о числах. Первое число показывает на сколько единиц Вы отступите влево, второе — вниз, а третье покажет глубину размытия, то есть, чем больше значение, тем шире будут границы тени. Если тень Вам не нужна, просто обнулите все значения.
  • background — цвет фона формы цитирования. Тут, скорее всего, дополнительного пояснения не понадобится.
  • <hr> — горизонтальная линия, отделяющая цитату от дополнительной информации об авторе, источнике и проч.
  • :::::::::::::::::::::: — это отступ вправо. Таким простейшим способом решена проблема расположения информации в правом углу. Внимание! Чтобы получился отступ, а не цепь из видимых двоеточий, элемент обязательно вставлять с новой строки. Это пока один из самых уязвимых элементов формы с точки зрения позиционирования. Где-то нужно будет убавить двоеточий, а где-то прибавить.

Инструкции:

а) Сначала копируем форму:

<blockquote style="width:85%;text-align:left;border-radius:15px 0px 15px 0px;padding:15px;box-shadow:1px 2px 3px #d4a567; background:#efe5d8">

<hr>
:::::::::::::::::::::: —

</blockquote>

б) Смотрим, что куда вписать, вставить:

<blockquote style="width:85%;text-align:left;border-radius:15px 0px 15px 0px;padding:15px;box-shadow:1px 2px 3px #d4a567; background:#efe5d8"> ( здесь текст цитаты. поддерживается любое форматирование: изменение шрифта и его размеров, курсивное или жирное написание... словом, пишите свободно, но не забывайте о закрывающих тегах, чтобы не было катастрофы — «ой, сломалось, не работает!» ) <hr>
:::::::::::::::::::::: — ( источник, автор, год издания ит.д. ) </blockquote>

в) Подставляем свои параметры

Для того, чтобы получить необходимый цветовой вариант формы, Вам нужно всего лишь поменять числовые значения px (ещё раз напомню, px - это пикселы). Исключение составляет здесь изменение цвета, но и это легко решается. Подобрать цвет Вы сможете в этой цветовой таблице, а затем просто вписать его значение (!!!из чисел и букв!!! например: FF8C00) после знака «#» или скопировать из таблицы вместе с этим знаком (вот так:#FF8C00).

г) Любуемся результатом!

Таким вот ярким (это пример «резиновой» цитаты, с процентным значением ширины):

«Всё что я затевал с величайшей скромностью, сегодня дало осечку с невиданной дерзостью. Всё, что я годами осторожно и крадучись вёл за ручку по-над обрывом – всё мгновенно рухнуло вниз, катясь и разваливаясь на части со страшным грохотом и звоном».
из письма Конраду Сати, 7 июня 1900


Или строгим (а это пример фиксированной цитаты, с пиксельным значением ширины. Если Вы уменьшите окошко браузера, без труда увидите разницу между двумя примерами):

«Всё что я затевал с величайшей скромностью, сегодня дало осечку с невиданной дерзостью. Всё, что я годами осторожно и крадучись вёл за ручку по-над обрывом – всё мгновенно рухнуло вниз, катясь и разваливаясь на части со страшным грохотом и звоном».
из письма Конраду Сати, 7 июня 1900


Или даже таким:

«Во всех странах железные дороги для передвижения служат, а у нас сверх того и для воровства».
— Михаил Салтыков-Щедрин

Пользуйтесь на здоровье. Или как-то иначе, если будет желание. Приятного вам цитирования! --PersonatoR 07:34, 11 марта 2014 (PDT)




22px © Автор (Anna t’Haron) не возражает против копирования данного шаблона и инструкции в разных целях (включая коммерческие) при условии точной ссылки на автора и источник информации.



Личные инструменты