ЧТО-ТО ПОВТОРЮ, ЧТО-ТО ПЕРЕПРАВЛЮ...
1. Как вставить картинку. Здесь самый простой код, в который надо вставлять адрес картинки с сайта
[img]АДРЕС КАРТИНКИ В ИНТЕРНЕТЕ[/img]

<img width="ШИРИНА" height="ВЫСОТА" src="АДРЕС КАРТИНКИ" alt="ПОДПИСЬ ЕСЛИ ХОЧЕТСЯ" />

2. Если картинка не подходит по размерам или прямоугольные теги не проходят. Пишется так:
<img width="ШИРИНА" height="ВЫСОТА" src="АДРЕС КАРТИНКИ" alt="ПОДПИСЬ ЕСЛИ ХОЧЕТСЯ" />
ВНИМАТЕЛЬНО СОБЛЮДАЙТЕ ПРОПОРЦИИ ЕСЛИ НЕ ХОТИТЕ ЧТОБЫ КАРТИНКА РАСПЛЫЛАСЬ. ПОДПИСЬ ПОЯВЛЯЕТСЯ ПРИ НАВЕДЕНИИ НА КАРТИНКУ КУРСОРА

2.1 border-radius:100% Превращает любую картинку в круглую (если ширина и высота равны) или овал

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px; border-radius:100%; box-shadow: 0px 0px 15px ;width: ШИРИНАpx; height: ВЫСОТАpx;" />

2.2 border-radius:10%; Для крупных изображений можно взять величину побольше, чтобы полукруглые края были больше

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px; border-radius:10%; box-shadow: 0px 0px 15px ;width: ШИРИНАpx; height: ВЫСОТАpx;" />

3.
3.1 Без рамки border: 0px ;

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px ; border-radius:0%; box-shadow: 0px 0px 0px #ff00ff; width: 100px; height: 100px;" />

3.2 Без указания цвета тень будет темной

<img alt="" src="https://img0.liveinternet.ru/images/attach/d/4/162/585/162585780_1001.jpg" style="border: 0px ; border-radius:10%; box-shadow: 0px 0px 15px ;width: 100px; height: 100px;" />

3.3 Толщина (например, 4px) и цвет (например, #00ff00) border: 4px solid #00ff00;

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 4px solid #00ff00; border-radius:10%; box-shadow: 0px 0px 15px #;width: 100px; height: 100px;" />

3.4 Тень во все направления box-shadow: +10px -10px 30px и ее цвет (например, #ff00ff);
+Длина вправо-влево, +длина вниз-вверх,четкая или размытая (именно в таком порядке, применяются отрицательные или положительные числа)

Вот тень одинаково со всех сторон: box-shadow: 0px 0px 45px (кроме нуля только третье значение)


А вот, например:

1 -20px -20px 5px	2 -20px 0px 5px	3 20px 0px 5px	4 20px -20px 5px 20px -20px 5px
5 -20px 20px 5px	6 0px 20px 5px	7 0px -20px 35px	8 20px 20px 5px

Под тенью текст выделяется нормально (например, примеры 1 и 4)
<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px ; border-radius:10%; box-shadow: 00px 00px 00px #ЦВЕТ;width: ШИРИНАpx; height: ВЫСОТАpx;" />

3.5 Внутренняя заливка по краям
0px 0px 75px закрашивание цветом по горизонтали и вертикали (отрицательные и положительные числа: +вправо-влево и +вниз-вверх), третий параметр размытость (ноль или выше нуля)
0px 0px 75px это равномерное окрашивание как в примере. Меняя первые два значения получится окрашивание будто примерно полумесяц
Цвет заливки #........... (выбрать из палитры) вписывать дважды для более яркого эффекта

<img style="border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%/50% 50% 50% 50%;background-image:url('АДРЕС_КАРТИНКИ');width: ШИРИНАpx; height:ВЫСОТАpx;140px outset #0000ff;box-shadow: inset 0px 0px 75px #0000ff;" />

4.
4.1. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.2. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.3. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.4. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.5. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ
4.1. <img src="http КАРТИНКИ" align="left" /> МОЙ ТЕКСТ
4.2. <img src="http КАРТИНКИ" align="right" /> МОЙ ТЕКСТ
4.3. <img src="http КАРТИНКИ" align="bottom" /> МОЙ ТЕКСТ
4.4. <img src="http КАРТИНКИ" align="top" /> МОЙ ТЕКСТ
4.5. <img src="http КАРТИНКИ" align="middle" /> МОЙ ТЕКСТ

5.
Устанавливает толщину рамки вокруг изображения. Отсутствие рамки: border="0"
<img src="http КАРТИНКИ" border="ТОЛЩИНА РАМКИ НАПРИМЕР2" />

6.
6.1. ТЕКСТ ДЛЯ КРАСНОГО ПОДЧЕРКИВАНИЯ

6.2. ТЕКСТ ДЛЯ ЗЕЛЕНОГО ПОДЧЕРКИВАНИЯ

6.1. <span style="background: url('http://img.liveinternet.ru/images/attach/1/10471/10471274_wawe.gif') repeat-x 100% 100%; padding-bottom: 2px; text-decoration: none; white-space: nowrap;">ТЕКСТ ДЛЯ КРАСНОГО ПОДЧЕРКИВАНИЯ</span>
6.2. <span style="background: url('http://img.liveinternet.ru/images/attach/1/10472/10472164_wawegreen.gif') repeat-x 100% 100%; padding-bottom: 5px; text-decoration: none; white-space: nowrap;">ТЕКСТ ДЛЯ ЗЕЛЕНОГО ПОДЧЕРКИВАНИЯ</span>
Пояснение: можно сделать прозрачную картинку гиф с чертой любого цвета, потому что ссылка идет именно на такую картинку.

7. Фоновая картинка.
Как вставить фоновую картинку, отличную от картинки днева http://www.liveinternet.ru/users/ka82/post88771163/

8
8.1.

ВАШ ТЕКСТ

8.2.

ВАШ ТЕКСТ СЛЕВА

ВАШ ТЕКСТ СПРАВА

8.1. <i><table border="0" cellspacing="8" cellpadding="0"><tr><td> <img src="АДРЕС http КАРТИНКИ СЛЕВА" border="0" /></td><td>ВАШ ТЕКСТ</td><td><img src="АДРЕС http КАРТИНКИ СПРАВА" border="0" /></td></tr></table></i>
8.2. <table border="0" cellspacing="8" cellpadding="0"> <tr> <td> ВАШ ТЕКСТ СЛЕВА </td> <td> <img src="АДРЕС ВАШЕЙ КАРТИНКИ" border="0" /> </td> <td> ВАШ ТЕКСТ СПРАВА </td> </tr> </table>

9. Поворот картинок (тут в примере 15 градусов (15deg):
000deg величина поворота от 0 до 369
<img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="НАЗВАНИЕ" style="transform:rotate(000deg);" />
Можно поворачивать картинку от какого-то угла, при этом она может по-разному наезжать на текст (если, например, хотите украсить свисающими цветами рамку)

9.1 Левый верхний угол Это для сравнения

9.2 Правый нижний Это для сравнения

9.3 Левый нижний Это для сравнения

9.4 Правый верхний Это для сравнения

9.1 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: left top; " />
9.2 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: right bottom; " />
9.3 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: left bottom; " />
9.4 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: right top; " />

СТАРАЙТЕСЬ ЧТОБЫ ВАШИ УГОЛКИ НЕ ПРЕВЫШАЛИ 200 пикселей В ДЛИНУ И 146 В ШИРИНУ


ОРАНЖЕВЫМ РАМКА-УГОЛОК СВЕРХУ
И ТЕМНО-ОРАНЖЕВЫМ - РАМКА-УГОЛОК СНИЗУ
<div style="background-image: url('//img1.liveinternet.ru/images/attach/c/6/92/545/92545493_1.gif'); background-position: 0% 0%; padding:110px 0px 0px 100px; background-repeat: no-repeat;"> <div style="background-image: url('//img0.liveinternet.ru/images/attach/c/6/92/545/92545502_2.gif'); padding:0px 100px 110px 0px;background-repeat: no-repeat;border: 0px;color:#000; background-position: 100% 100%; "> ВАШ ТЕКСТ
ВАШ ТЕКСТ
ВАШ ТЕКСТ</div></div>

ЧТО-ТО ПОВТОРЮ, ЧТО-ТО ПЕРЕПРАВЛЮ...
1. Как вставить картинку. Здесь самый простой код, в который надо вставлять адрес картинки с сайта
[img]АДРЕС КАРТИНКИ В ИНТЕРНЕТЕ[/img]

<img width="ШИРИНА" height="ВЫСОТА" src="АДРЕС КАРТИНКИ" alt="ПОДПИСЬ ЕСЛИ ХОЧЕТСЯ" />

2. Если картинка не подходит по размерам или прямоугольные теги не проходят. Пишется так:
<img width="ШИРИНА" height="ВЫСОТА" src="АДРЕС КАРТИНКИ" alt="ПОДПИСЬ ЕСЛИ ХОЧЕТСЯ" />
ВНИМАТЕЛЬНО СОБЛЮДАЙТЕ ПРОПОРЦИИ ЕСЛИ НЕ ХОТИТЕ ЧТОБЫ КАРТИНКА РАСПЛЫЛАСЬ. ПОДПИСЬ ПОЯВЛЯЕТСЯ ПРИ НАВЕДЕНИИ НА КАРТИНКУ КУРСОРА

2.1 border-radius:100% Превращает любую картинку в круглую (если ширина и высота равны) или овал

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px; border-radius:100%; box-shadow: 0px 0px 15px ;width: ШИРИНАpx; height: ВЫСОТАpx;" />

2.2 border-radius:10%; Для крупных изображений можно взять величину побольше, чтобы полукруглые края были больше

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px; border-radius:10%; box-shadow: 0px 0px 15px ;width: ШИРИНАpx; height: ВЫСОТАpx;" />

3.
3.1 Без рамки border: 0px ;

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px ; border-radius:0%; box-shadow: 0px 0px 0px #ff00ff; width: 100px; height: 100px;" />

3.2 Без указания цвета тень будет темной

<img alt="" src="https://img0.liveinternet.ru/images/attach/d/4/162/585/162585780_1001.jpg" style="border: 0px ; border-radius:10%; box-shadow: 0px 0px 15px ;width: 100px; height: 100px;" />

3.3 Толщина (например, 4px) и цвет (например, #00ff00) border: 4px solid #00ff00;

<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 4px solid #00ff00; border-radius:10%; box-shadow: 0px 0px 15px #;width: 100px; height: 100px;" />

3.4 Тень во все направления box-shadow: +10px -10px 30px и ее цвет (например, #ff00ff);
+Длина вправо-влево, +длина вниз-вверх,четкая или размытая (именно в таком порядке, применяются отрицательные или положительные числа)

Вот тень одинаково со всех сторон: box-shadow: 0px 0px 45px (кроме нуля только третье значение)


А вот, например:

1 -20px -20px 5px	2 -20px 0px 5px	3 20px 0px 5px	4 20px -20px 5px 20px -20px 5px
5 -20px 20px 5px	6 0px 20px 5px	7 0px -20px 35px	8 20px 20px 5px

Под тенью текст выделяется нормально (например, примеры 1 и 4)
<img alt="" src="АДРЕС_КАРТИНКИ" style="border: 0px ; border-radius:10%; box-shadow: 00px 00px 00px #ЦВЕТ;width: ШИРИНАpx; height: ВЫСОТАpx;" />

3.5 Внутренняя заливка по краям
0px 0px 75px закрашивание цветом по горизонтали и вертикали (отрицательные и положительные числа: +вправо-влево и +вниз-вверх), третий параметр размытость (ноль или выше нуля)
0px 0px 75px это равномерное окрашивание как в примере. Меняя первые два значения получится окрашивание будто примерно полумесяц
Цвет заливки #........... (выбрать из палитры) вписывать дважды для более яркого эффекта

<img style="border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%/50% 50% 50% 50%;background-image:url('АДРЕС_КАРТИНКИ');width: ШИРИНАpx; height:ВЫСОТАpx;140px outset #0000ff;box-shadow: inset 0px 0px 75px #0000ff;" />

4.
4.1. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.2. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.3. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.4. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ

4.5. МОЙ ТЕКСТ МОЙ ТЕКСТ МОЙ ТЕКСТ
ТЕКСТ ТЕКСТ ТЕКСТ
4.1. <img src="http КАРТИНКИ" align="left" /> МОЙ ТЕКСТ
4.2. <img src="http КАРТИНКИ" align="right" /> МОЙ ТЕКСТ
4.3. <img src="http КАРТИНКИ" align="bottom" /> МОЙ ТЕКСТ
4.4. <img src="http КАРТИНКИ" align="top" /> МОЙ ТЕКСТ
4.5. <img src="http КАРТИНКИ" align="middle" /> МОЙ ТЕКСТ

5.
Устанавливает толщину рамки вокруг изображения. Отсутствие рамки: border="0"
<img src="http КАРТИНКИ" border="ТОЛЩИНА РАМКИ НАПРИМЕР2" />

6.
6.1. ТЕКСТ ДЛЯ КРАСНОГО ПОДЧЕРКИВАНИЯ

6.2. ТЕКСТ ДЛЯ ЗЕЛЕНОГО ПОДЧЕРКИВАНИЯ

6.1. <span style="background: url('http://img.liveinternet.ru/images/attach/1/10471/10471274_wawe.gif') repeat-x 100% 100%; padding-bottom: 2px; text-decoration: none; white-space: nowrap;">ТЕКСТ ДЛЯ КРАСНОГО ПОДЧЕРКИВАНИЯ</span>
6.2. <span style="background: url('http://img.liveinternet.ru/images/attach/1/10472/10472164_wawegreen.gif') repeat-x 100% 100%; padding-bottom: 5px; text-decoration: none; white-space: nowrap;">ТЕКСТ ДЛЯ ЗЕЛЕНОГО ПОДЧЕРКИВАНИЯ</span>
Пояснение: можно сделать прозрачную картинку гиф с чертой любого цвета, потому что ссылка идет именно на такую картинку.

7. Фоновая картинка.
Как вставить фоновую картинку, отличную от картинки днева http://www.liveinternet.ru/users/ka82/post88771163/

8
8.1.

ВАШ ТЕКСТ

8.2.

ВАШ ТЕКСТ СЛЕВА

ВАШ ТЕКСТ СПРАВА

8.1. <i><table border="0" cellspacing="8" cellpadding="0"><tr><td> <img src="АДРЕС http КАРТИНКИ СЛЕВА" border="0" /></td><td>ВАШ ТЕКСТ</td><td><img src="АДРЕС http КАРТИНКИ СПРАВА" border="0" /></td></tr></table></i>
8.2. <table border="0" cellspacing="8" cellpadding="0"> <tr> <td> ВАШ ТЕКСТ СЛЕВА </td> <td> <img src="АДРЕС ВАШЕЙ КАРТИНКИ" border="0" /> </td> <td> ВАШ ТЕКСТ СПРАВА </td> </tr> </table>

9. Поворот картинок (тут в примере 15 градусов (15deg):
000deg величина поворота от 0 до 369
<img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="НАЗВАНИЕ" style="transform:rotate(000deg);" />
Можно поворачивать картинку от какого-то угла, при этом она может по-разному наезжать на текст (если, например, хотите украсить свисающими цветами рамку)

9.1 Левый верхний угол Это для сравнения

9.2 Правый нижний Это для сравнения

9.3 Левый нижний Это для сравнения

9.4 Правый верхний Это для сравнения

9.1 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: left top; " />
9.2 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: right bottom; " />
9.3 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: left bottom; " />
9.4 <img src="АДРЕС_КАРТИНКИ" width="ШИРИНА" height="ВЫСОТА" title="Повернулась" style="transform:rotate(10deg); transform-origin: right top; " />

Несколько строк от ka82 Вот что я придумала Я понимаю, что изобрела лишь новый велосипед, однако пока ни у кого не видела такого оформления. Натолкнуло на мысль то, что менять схему оформления дневника не хотца, а выразить идеи - очень. Поэтому решила сделать такие рамочки типа этой. Кто-то уже обратил внимание, что похожим образом оформлена и большая страница на Ли.ру - слева - место для аватарок и панели навигации, сверху - заголовок ну и так далее

Все сделано на основе моей шпаргалки которая наверху моей страницы Хотите такие же рамочки? Могу поделиться кодом со всеми, краткий код в инструкции ниже. Если каке-то трудности, постараюсь в меру возможностей объяснить всем, кто напишет в личку ka82 и пришлет http-адрес картинок которые он хочет поместить в рамочку. А кто-то может уже сам разобрался

Пара строк обо мне вот в этой колонке

Какое лето! Да, и еще такой конкурс хочу объявить: на самый красивый комментарий по оформлению! Пишите мне в дневник до 30 августа включительно свои комментарии. Важно не столько содержание, а оформительская часть. Приз - исполню желание победителя в рамках интернета и своих возможностей.