Четверг, 22.06.2017, 23:36
Приветствую Вас Гость


Меню сайта
Категории
Мини-чат
Наш опрос
Оцените мой сайт
Всего ответов: 66
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » Статьи » Разные анимашки

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

1. Смотрим в настройках дневника цвет общего ("заднего") фона или определяем его. Например, для этой страницы получаем #D7AEDF.

2. Определяем фон заголовка над постом (тот, где стоит слово "написал(а)"). Здесь он #E0D5E2.

Для
определения фона не обязательно делать скриншот и открывать его в
Фотошопе. Можно воспользоваться, например, расширением для Firefox ColorZilla, расширением для Chrome EyeDropper или бесплатной программой ColorPix, которая не требует установки и запускается простым кликом по иконке exe-файла (есть и другие варианты).

3. Самая простая рамочка будет выглядеть так:

Ваш текст


Код этого варианта рамочки ( здесь )

Для
того, чтобы сделать рамочку под Вашу страницу, надо подставить в код
следующие значения (выделены цветом, каждое значение имеет вид #XXXXXX,
где Х - цифра или одна из букв A,B,C,D,E,F):

<div style="padding:8px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; background:цвет_фона_заголовка"><div style="padding:15px; border-radius:8px;  -moz-border-radius:8px; -webkit-border-radius:8px; background:цвет_общего_фона_страницы; text-align:center; font-weight:bold; color:цвет_шрифта_по_Вашему_выбору">Ваш текст</div></div>

Я надеюсь продолжить и в следующей части рассказать, как добавить в рамочку уголки

Вписываем рамочки в новый дизайн (часть 2: добавляем уголки)

В прошлый раз я рассказывал о том, как вписать рамочку в новый дизайн страницы.


У нас получился вот такой результат:


Ваш текст

( код этой рамочки )

Код рамочки для Вашей страницы:


<div style="padding:8px; border-radius:10px; background:цвет_фона_заголовка"><div style="padding:15px; border-radius:8px; background:цвет_общего_фона_страницы; text-align:center; font-weight:bold; color:цвет_шрифта_по_Вашему_выбору">Ваш текст</div></div>

Возможно, Вам захочется как-то украсить такую рамочку. Это можно сделать довольно просто, используя уголки.


Я
выбираю вот такую картинку (кстати, у неё непрозрачность - 70%, с
непрозрачностью можно "играть" и делать картинки похожими на водяные
знаки):


левый верхний уголок

Отражаем картинку по вертикали и горизонтали и получаем все четыре уголка.


Если
Вы испытываете трудности при работе в Фотошопе или он просто медленно
запускается на Вашем компьтере, для отражения картинок достаточно
программы Microsoft Office Picture Manager (Диспетчер рисунков Microsoft
Office). Эта программа есть на Вашем компьютере, если на нём установлен
Microsoft Word. Её можно найти в меню Пуск ->  Все программы ->
Microsoft Office -> средства Microsoft Office.


В программе
надо воспользоваться кнопкой "Изменить рисунки" (находится примерно в
центре сверху, на панели "Форматирование", которая должна быть
включена):


кнопка изменить

После этого справа появляется вот такое меню:


изменение рисунков

Выбираем "поворот и отражение" и дальше видим именно то, что нам нужно:


поворот и отражение

Итак,
мы получили все четыре уголка. Я предпочитаю для наглядности называть
их top_left, top_right, bottom_right и bottom_left. Дальше будет видно,
что такие названия служат подсказками: что писать в коде.


Теперь
немножко изменим код Вашей рамочки. Он станет длиннее, но в дальнейшем
будет проще работать с ним, удаляя дополнительные div-ы (чуть дальше Вы
увидите, как). Итак, код:


<div style="padding:8px; border-radius:10px; background:цвет_фона_заголовка">

<div style="border-radius:8px; background:цвет_общего_фона_страницы">

<div style="padding:15px; text-align:center; font-weight:bold; color:цвет_шрифта_по_Вашему_выбору">

Ваш текст

</div>

</div>

</div>


Код
записан в таком виде для наглядности. Если будете его копировать для
использования - убирайте все пробелы между тегами, на Ярушке это важно!


Посмотрим
внимательнее на второй div. Именно он задаёт фон внутренней части
рамочки (цвет). А теперь нам надо добавить к этому фону уголки. Чтобы
сделать это, вставляем между вторым div-ом и тем, который следует за
ним, ещё четыре div-а (по одному для каждого уголка).


Результат будет выглядеть так:


<div style="padding:8px; border-radius:10px; background:цвет_фона_заголовка">

<div style="padding:5px; border-radius:8px; background:цвет_общего_фона_страницы">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_right.png') top right no-repeat">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png') bottom right no-repeat">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_left.png') bottom left no-repeat">

<div style="min-height:320px; padding:75px 90px; text-align:center; font-weight:bold; color:цвет_шрифта_по_Вашему_выбору">

Текст (должен быть достаточно длинным)

</div>

</div>

</div>

</div>

</div>

</div>

</div>


Если Вам интересно, можете обратить внимание на позиционирование фона. Он не повторяется (no-repeat)
и, кроме того, занимает определённое положение в div-е - в зависимости
от того, куда надо поместить соответствующий уголок (например: bottom left для левого нижнего уголка - помните о том, как были выбраны названия файлов?).


У нас получилась вот такая рамочка:


Текст (должен быть достаточно длинным)

Код этой рамочки:

Недостаток этой рамочки - в том, что текст должен быть достаточно длинным. Здесь в коде я добавила ещё одну вещь - свойство min-height. Оно определяет минимальную высоту рамочки и нужно для того, чтобы уголки не наползали друг на друга:


min-height:320px


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


1 - только верхние уголки,
2 - только нижние уголки,
3 - левый верхний и правый нижний уголки,
4 - правый верхний и левый нижний уголки.


Допустим, мы хотим получить вариант 3. Вот что мы делаем с кодом:


<div style="padding:8px; border-radius:10px; background:цвет_фона_заголовка">

<div style="padding:5px; border-radius:8px; background:цвет_общего_фона_страницы">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_right.png') top right no-repeat">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png') bottom right no-repeat">

<div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_left.png') bottom left no-repeat">

<div style="min-height:120px; padding:75px 90px; text-align:center; font-weight:bold; color:цвет_шрифта_по_Вашему_выбору">

Текст

</div>

</div>

</div>

</div>

</div>

</div>

</div>


Результат:


Текст

Код этой рамочки:

Здесь изменена также минимальная высота (min-height:120px).


Ещё
одна вещь, о которой стоит сказать: отсутпы текста. Они зависят от
того, какие картинки Вы вибираете в качестве уголков. В данном случае


padding:75px 90px,


где 75px - отступ по вертикали, а 90px - отступ по горизонтали.


Ну и ещё одна мелочь - отступы самих уголков. Для них я изменила второй div, добавив в него


padding:5px


(единственное значение - отступ со всех четырёх сторон).



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


<p><a href="http://clubs.ya.ru/4611686018427435067/replies.xml?item_no=49004">В прошлый раз</a> я рассказывала о том, как вписать рамочку в новый дизайн страницы.</p>
<p>У нас получился вот такой результат:</p>
<div style="padding:8px;border-radius:10px;background:#E0D5E2;"><div style="padding:15px;border-radius:8px;background:#D7AEDF;text-align:center;font-weight:bold; color:#000000;">Ваш текст</div></div>
<p><center><cut
text="код этой рамочки"><div style="width: 220px;
height:45px;overflow:auto; background-color:#eee; border:1px solid #999;
padding:5px"><TEXTAREA COLS="30" ROWS="2"><div
style="padding:8px;border-radius:10px;background:#E0D5E2;"><div style="padding:15px;border-radius:8px;background:#D7AEDF;text-align:center;font-weight:bold; color:#000000;">Ваш текст</div></div></TEXTAREA></div></cut></center></p>
<p>Код рамочки для Вашей страницы:</p>
<code
style="font-size:15px">&lt;div style="padding:8px;
border-radius:10px; background:<span style="color:#992184">цвет_фона_заголовка</span>"&gt;&lt;div style="padding:15px; border-radius:8px; background:<span style="color:#992184">цвет_общего_фона_страницы</span>; text-align:center; font-weight:bold; color:<span style="color:#992184">цвет_шрифта_по_Вашему_выбору</span>"&gt;Ваш текст&lt;/div>&lt;/div></code>
<p>Возможно, Вам захочется как-то украсить такую рамочку. Это можно сделать довольно просто, используя уголки.</p>
<cut
text="дальше"><p>Я выбираю вот такую картинку (кстати, у неё
непрозрачность - 70%, с непрозрачностью можно "играть" и делать картинки
похожими на водяные знаки):</p>
<img style="margin:5px 0" src="http://proxy-ma.narod.ru/img/corners/corners4/top_left.png" alt="левый верхний уголок">
<p>Отражаем картинку по вертикали и горизонтали и получаем все четыре уголка.</p>
<p>Если
Вы испытываете трудности при работе в Фотошопе или он просто медленно
запускается на Вашем компьтере, для отражения картинок достаточно
программы Microsoft Office Picture Manager (Диспетчер рисунков Microsoft
Office). Эта программа есть на Вашем компьютере, если на нём установлен
Microsoft Word. Её можно найти в меню Пуск ->  Все программы ->
Microsoft Office -> средства Microsoft Office.</p>
<p>В
программе надо воспользоваться кнопкой "Изменить рисунки" (находится
примерно в центре сверху, на панели "Форматирование", которая должна
быть включена):</p>
<center><img src="http://img-fotki.yandex.ru/get/4527/75724096.7/0_69b7b_695f6e31_orig" alt="кнопка изменить"></center>
<p>После этого справа появляется вот такое меню:</p>
<center><img src="http://img-fotki.yandex.ru/get/4526/75724096.7/0_69b7c_b7083819_orig" alt="изменение рисунков"></center>
<p>Выбираем "поворот и отражение" и дальше видим именно то, что нам нужно:</p>
<center><img src="http://img-fotki.yandex.ru/get/4424/75724096.7/0_69b7d_330c571d_orig" alt="поворот и отражение"></center>
<p>Итак,
мы получили все четыре уголка. Я предпочитаю для наглядности называть
их top_left, top_right, bottom_right и bottom_left. Дальше будет видно,
что такие названия служат подсказками: что писать в коде.</p>
<p>Теперь
немножко изменим код Вашей рамочки. Он станет длиннее, но в дальнейшем
будет проще работать с ним, удаляя дополнительные div-ы (чуть дальше Вы
увидите, как). Итак, код:</p>
<code
style="font-size:15px"><p style="margin:4px 0 4px
0">&lt;div style="padding:8px; border-radius:10px;
background:<span style="color:#992184">цвет_фона_заголовка</span>"&gt;</p><p
style="margin: 4px 0 4px 30px">&lt;div style="border-radius:8px;
background:<span style="color:#992184">цвет_общего_фона_страницы</span>"&gt;</p><p
style="margin: 4px 0 4px 60px">&lt;div style="padding:15px;
text-align:center; font-weight:bold; color:<span
style="color:#992184">цвет_шрифта_по_Вашему_выбору</span>"&gt;</p><p
style="margin: 4px 0 4px 90px">Ваш текст</p><p
style="margin: 4px 0 4px 60px">&lt;/div></p><p
style="margin: 4px 0 4px 30px">&lt;/div></p><p
style="margin:0">&lt;/div></p></code>
<p>Код
записан в таком виде для наглядности. Если будете его копировать для
использования - убирайте все пробелы между тегами, на Ярушке это
важно!</p>
<p>Посмотрим внимательнее на второй div.
Именно он задаёт фон внутренней части рамочки (цвет). А теперь нам надо
добавить к этому фону уголки. Чтобы сделать это, вставляем между вторым
div-ом и тем, который следует за ним, ещё четыре div-а (по одному для
каждого уголка).</p>
<p>Результат будет выглядеть так:</p>
<code
style="font-size:15px"><p style="margin:4px 0 4px
0">&lt;div style="padding:8px; border-radius:10px;
background:<span style="color:#992184">цвет_фона_заголовка</span>"&gt;</p><p
style="margin:4px 0 4px 25px">&lt;div style="padding:5px;
border-radius:8px; background:<span style="color:#992184">цвет_общего_фона_страницы</span>"&gt;</p><p style="margin:4px 0 4px 50px">&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat"&gt;</p><p style="margin:4px 0 4px 75px">&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_right.png') top right no-repeat"&gt;</p><p style="margin:4px 0 4px 100px">&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png') bottom right no-repeat"&gt;</p><p style="margin:4px 0 4px 125px">&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_left.png')
bottom left no-repeat"&gt;</p><p style="margin:4px 0 4px
150px">&lt;div style="min-height:320px; padding:75px 90px;
text-align:center; font-weight:bold; color:<span
style="color:#992184">цвет_шрифта_по_Вашему_выбору</span>"&gt;</p><p
style="margin:4px 0 4px 175px">Текст (должен быть достаточно
длинным)</p><p style="margin:4px 0 4px
150px">&lt;/div&gt;</p><p style="margin:4px 0 4px
125px">&lt;/div&gt;</p><p style="margin:4px 0 4px
100px">&lt;/div&gt;</p><p style="margin:4px 0 4px
75px">&lt;/div&gt;</p><p style="margin:4px 0 4px
50px">&lt;/div&gt;</p><p style="margin:4px 0 4px
25px">&lt;/div&gt;</p><p style="margin:4px 0 4px
0">&lt;/div&gt;</p></code>
<p>Если Вам
интересно, можете обратить внимание на позиционирование фона. Он не
повторяется (<code style="font-size:15px">no-repeat</code>)
и, кроме того, занимает определённое положение в div-е - в зависимости
от того, куда надо поместить соответствующий уголок (например: <code
style="font-size:15px">bottom left</code> для левого нижнего
уголка - помните о том, как были выбраны названия файлов?).</p>
<p>У нас получилась вот такая рамочка:</p>
<div
style="padding:8px; border-radius:10px; background:#E0D5E2;"><div
style="padding:5px; border-radius:8px; background:#D7AEDF;"><div
style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_right.png') top right no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png') bottom right no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_left.png')
bottom left no-repeat"><div style="min-height:320px; padding:75px
90px; text-align:center; font-weight:bold; color:#000000;">Текст
(должен быть достаточно длинным)</div></div></div></div></div></div></div>
<p><center>Код
этой рамочки: <div style="width: 220px; height:45px;overflow:auto;
background-color:#eee; border:1px solid #999;
padding:5px"><TEXTAREA COLS="30" ROWS="2" value="<div
style="padding:8px; border-radius:10px; background:#E0D5E2;"><div
style="padding:5px; border-radius:8px; background:#D7AEDF;"><div
style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_right.png') top right no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png') bottom right no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_left.png')
bottom left no-repeat"><div style="min-height:320px; padding:75px
90px; text-align:center; font-weight:bold; color:#000000;">Текст
(должен быть достаточно длинным)</div></div></div></div></div></div></div></TEXTAREA></div></center></p>
<p>Недостаток
этой рамочки - в том, что текст должен быть достаточно длинным. Здесь в
коде я добавила ещё одну вещь - свойство <code
style="font-size:15px">min-height</code>. Оно определяет
минимальную высоту рамочки и нужно для того, чтобы уголки не наползали
друг на друга:</p>
<p style="text-align:center"><code style="font-size:15px">min-height:320px</code></p>
<p>Тем
не менее рамочка с коротким текстом будет смотреться не очень красиво
из-за пустого места. Поэтому для такого текста лучше использовать
"сокращённый" вариант кода рамочки, из которого убрана пара div-ов. Вы
можете оставить:</p>
<p>1 - только верхние уголки,
2 - только нижние уголки,
3 - левый верхний и правый нижний уголки,
4 - правый верхний и левый нижний уголки.</p>
<p>Допустим, мы хотим получить вариант 3. Вот что мы делаем с кодом:</p>
<code
style="font-size:15px"><p style="margin:4px 0 4px
0">&lt;div style="padding:8px; border-radius:10px;
background:<span style="color:#992184">цвет_фона_заголовка</span>"&gt;</p><p
style="margin:4px 0 4px 25px">&lt;div style="padding:5px;
border-radius:8px; background:<span style="color:#992184">цвет_общего_фона_страницы</span>"&gt;</p><p style="margin:4px 0 4px 50px">&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat"&gt;</p><p style="margin:4px 0 4px 75px"><strike>&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_right.png')
top right no-repeat"&gt;</strike></p><p
style="margin:4px 0 4px 100px">&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png')
bottom right no-repeat"&gt;</p><p style="margin:4px 0 4px
125px"><strike>&lt;div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_left.png')
bottom left no-repeat"&gt;</strike></p><p
style="margin:4px 0 4px 150px">&lt;div style="min-height:120px;
padding:75px 90px; text-align:center; font-weight:bold; color:<span
style="color:#992184">цвет_шрифта_по_Вашему_выбору</span>"&gt;</p><p
style="margin:4px 0 4px 175px">Текст</p><p
style="margin:4px 0 4px 150px">&lt;/div&gt;</p><p
style="margin:4px 0 4px
125px"><strike>&lt;/div&gt;</strike></p><p
style="margin:4px 0 4px 100px">&lt;/div&gt;</p><p
style="margin:4px 0 4px
75px"><strike>&lt;/div&gt;</strike></p><p
style="margin:4px 0 4px 50px">&lt;/div&gt;</p><p
style="margin:4px 0 4px 25px">&lt;/div&gt;</p><p
style="margin:4px 0 4px
0">&lt;/div&gt;</p></code>
<p>Результат:</p>
<div
style="padding:8px; border-radius:10px; background:#E0D5E2"><div
style="padding:5px; border-radius:8px; background:#D7AEDF"><div
style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png')
bottom right no-repeat"><div style="min-height:120px;
padding:75px 90px; text-align:center; font-weight:bold;
color:#000000">Текст</div></div></div></div></div>
<p><center>Код
этой рамочки: <div style="width: 220px; height:45px;overflow:auto;
background-color:#eee; border:1px solid #999;
padding:5px"><TEXTAREA COLS="30" ROWS="2"><div
style="padding:8px; border-radius:10px; background:#E0D5E2"><div
style="padding:5px; border-radius:8px; background:#D7AEDF"><div
style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/top_left.png') top left no-repeat"><div style="background:url('http://proxy-ma.narod.ru/img/corners/corners4/bottom_right.png')
bottom right no-repeat"><div style="min-height:120px;
padding:75px 90px; text-align:center; font-weight:bold;
color:#000000">Текст</div></div></div></div></div></TEXTAREA></div></center></p>
<p>Здесь изменена также минимальная высота (<code style="font-size:15px">min-height:120px</code>).</p>
<p>Ещё
одна вещь, о которой стоит сказать: отсутпы текста. Они зависят от
того, какие картинки Вы вибираете в качестве уголков. В данном
случае</p>
<p style="text-align:center"><code style="font-size:15px">padding:75px 90px</code>,</p>
<p>где 75px - отступ по вертикали, а 90px - отступ по горизонтали.</p>
<p>Ну и ещё одна мелочь - отступы самих уголков. Для них я изменила второй div, добавив в него</p>
<p style="text-align:center"><code style="font-size:15px">padding:5px</code></p>
<p>(единственное значение - отступ со всех четырёх сторон).</p></cut>

Категория: Разные анимашки | Добавил: serega (19.09.2012)
Просмотров: 186 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email:
Код *:
Поиск
Календарь
пополни
МОМЕНТАЛЬНАЯ ОПЛАТА
за WebMoney, RBK Money,
MoneyMail, WebCreds,
Яндекс.Деньги, терминалы
Погода
Друзья сайта