Записи Друзья Комментарии
Танюха Коренкова
Аватар Танюха_Коренкова

 -Приложения

  • Перейти к приложению Стена СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить
  • Программа телепередачУдобная программа телепередач на неделю, предоставленная Akado телегид.
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни

 -Рубрики

 -Поиск по дневнику

Поиск сообщений в Танюха_Коренкова

 -Подписка по e-mail

 

 -Интересы

 -Сообщества

Читатель сообществ (Всего в списке: 1) Мир_клипарта


Рамки, украшенные картинкой

Пятница, 23 Января 2015 г. 18:36 + в цитатник
Цитата сообщения Юлия_Гурбер
Прочитать целикомВ свой цитатник или сообщество!
Рамки, украшенные картинкой

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

Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.

Ваша подпись


Ваш текст будет располагаться слева направо. При заполнении им рамки текст будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.

Ваша подпись


Рассмотрим, что можно менять внутри рамки.

Итак, ищем строку "img src="ВАША КАРТИНКА" style="float: right; margin: 0px 0px 15px 15px" и аккуратно вставляем адрес изображения.
Атрибут margin: 0px 0px 15px 15px в этой строке — это 4 отступа вокруг изображения в пикселях:
Первая цифра — верхний отступ,
Вторая цифра — правый отступ,
Третья цифра — нижний отступ,
Четвёртая цифра — левый отступ.

За ним в следующей строке видим настройку самого текста:
font-family: Georgia; — это стиль шрифта,
color:#000000; — цвет шрифта,
font-size: 18px; — размер шрифта.

Теперь рассмотрим рамку. Нас интересует самая верхняя строка. Всё по-порядку:

background-color: #F4FC03; — это цвет внутри рамки,
border: 3px #00B344 ridge; — это ширина (3px) бордюра и его цвет (#00B344),
width: 650px; — это ширина нашей рамки, и, наконец,
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
Это четыре внутренних отступа от края рамки (бордюра) до текста.

Подготовила для вас Юлия Гурбер

Серия сообщений "рамочник":
рамочник
Часть 1 - Простые рамки с заголовком
Часть 2 - Делаем рамочки в рамочнике
...
Часть 29 - Фоновое изображение в рамке. Часть 1
Часть 30 - Стильные рамки (блоки)
Часть 31 - Рамки, украшенные картинкой
Часть 32 - рамочки без фонов.
Часть 33 - Нужные формулы для дневника
...
Часть 40 - Урок по рамочкам
Часть 41 - Еще раз о рамочках в 4 слоя-урок
Часть 42 - Рамки с формулой +Урок1

Метки:  
Понравилось: 1 пользователю
Нравится

Юлия_Гурбер   обратиться по имени Суббота, 24 Января 2015 г. 06:35 (ссылка)
Благодарю за цитирование!
Ответить С цитатой В цитатник
Комментировать — К дневнику — Страницы: [1] [Новые]
 

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

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте