10 сентября 2012 года в10.09.2012 15:10 0 0 10 1

contiguity:

mrsn0b0dy:bittersweetsacrifice:lunacyfringe:nicola:

Итак, дамы и господа, я представляю вашему вниманию наглядное, быстрое, расписанное по рабоче-крестьянски пособие по созданию красивых постов! :D Тут я расскажу о шрифтах, рамках для картинок и текста, формах картинок, размещении изображений сбоку от текста и т.д.

Расписываю всё по пунктикам, с пояснением и наглядным примером ;) Enjoy!

➀ ПУНКТ - ШРИФТЫ

Это стандартный шаблон для шрифта:

<p style="font-family: ' ШРИФТ '; color: # ЦВЕТ; text-align:center;font-size: РАЗМЕР pt"> ТЕКСТ </p>

Копируете его, вставляете в HTML-исходник. На месте "ШРИФТ" - пишете любой нужный вам шрифт, легче всего выбрать в Word. На месте "ЦВЕТ" вставляете код нужного вам цвета, вот удобный определитель:

Для создания не обычных шрифтов, используем следующие коды:

Для шрифта с фоном:

<h3 style="color: # ЦВЕТ ТЕКСТА; font-family: ШРИФТ; font-size: РАЗМЕР; line-height: 11px; letter-spacing: 3px; font-style:normal; text-align:center; text-shadow: # ЦВЕТ ФОНА 0px 1px 50px; padding: 0px; margin: 3px;"><b> ТЕКСТ </b></h3>

Для шрифта с тенью:

<p style="text-align: center; color:# ЦВЕТ ШРИФТА; font-family: ' ШРИФТ '; text-shadow: # ЦВЕТ ТЕНИ 1px 1px 2px;font-size: РАЗМЕР pt;"> ТЕКСТ </p>

➁ ПУНКТ - РАМКИ

Для текста и картинок в одинарной рамке:

<blockquote style="float: none; padding: 3px 15px; border: thin solid # ЦВЕТ РАМКИ; "><p style="text-align: center;font-family: ШРИФТ; font-size: РАЗМЕР pt"> ТЕКСТ <br /></p></blockquote>

Для текста и картинок в двойной рамке:

<p style="text-align: center;font-family: ШРИФТ; font-size: РАЗМЕР px;border-style: double; color:# ЦВЕТ РАМКИ; "><a style="color:# ЦВЕТ ТЕКСТА" > ТЕКСТ </a></p>

➂ ПУНКТ - ФОРМА КАРТИНОК

Картинки с закруглёнными углами:

Используем код:

<p style="text-align: center; text-align:;font-family: Georgia;font-size:8pt; line-height: 14px ">&nbsp;<img height= "ВЫСОТА" width= "ШИРИНА" align="middle" style="border-radius: 50px 50px 50px 50px;" src= "ССЫЛКА НА КАРТИНКУ" /></p>

➃ ПУНКТ - ОБТЕКАЕМОСТЬ КАРТИНОК ТЕКСТОМ

Текст справа - добавляем в код картинки: align=left

Код картинки примет вид:

<p><img height="150" align="left" hspace="20" width="200" hspace=20 src="https://30.media. tumblr.com/tumblr_lxy097fBPr1qbr97io1_500.gif"/></p>

align=left – картинка слева, текст справа
align=right – картинка справа, текст слева

hspace=20 – расстояние между текстом и картинкой 20 пикселей по горизонтали.
vspace=20 – расстояние между текстом и картинкой 20 пикселей по вертикали.

Спасибо за внимание ;)

солнце, огромнейшее-преогромнейшее спасибо!!!!!!!!!!!!!!!я о многом еще не в курсе, а такие вот вещи очень помагают!!!!

Уменьшить

Комментарии

Зарегистрируйтесь или войдите, чтобы добавить комментарий

Новые заметки пользователя

KAROLINA-SELASFORA — karolina-selasfora

50

Я уже забыла о том, как делать красивые посты, но зайдя сюда, удивилась тому, сколько тут моих собственных откровений. Но я стала спокойн...

32

Счастли вого Рож д ества P.s забыла выложить это на Рождество :D

32

ибо я очень сильно люблю зиму [2]

32

ибо я очень сильно люблю зиму

35

ДЖОН: На правах друга , на правах того, кто волнуется за Вас, я спрашиваю, что сделало Вас таким? ШЕРЛОК: О, Ватсон, ничто, поверьте...

36

Поздравляю вас с таким началом 2016 года. Посмотрев новый эпизод, я решила пересмотреть все серии, а особенно 3 сезон, ибо слишком много ...