-Рубрики

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

Поиск сообщений в Молодуха_51

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 07.02.2015
Записей: 12229
Комментариев: 4
Написано: 12954


Рамки оригинальные

Понедельник, 02 Марта 2015 г. 01:49 + в цитатник
Цитата сообщения Юлия_Гурбер Рамки оригинальные

Такие вот оригинальные рамки (блоки) увидела на одном сайте.

Здесь будет ваш текст

Ваша подпись




Здесь будет ваш текст

Ваша подпись



Думаю, в них целесообразно менять лишь несколько значений:

Верхняя рамка:

Меняем цвет фона background: #8FD532;.
Обозначение цвета: #8FD532, просто оставляем решётку #,
убираем 8FD532, и ставим свой цвет.
Обратили внимание на внутреннюю тень, создающую скос? Она
на самом деле жёлтого цвета, поэтому цвета для фона подбирайте
зелёно-голубого диапазона. Другие просто не подойдут.

Далее по-порядку стоит размер рамки width: 590px;, вместо 590 подставляем своё значение.

И, наконец, меняем вид шрифта, его размер и цвет. Это строка
font-family: Georgia; font-size: 21px; font-style: italic; color:#003366;,
где Georgia — вид шрифта, 21 — размер, #003366 — цвет.

Нижняя рамка:

Меняем цвет фона background: #87CEFA;. Тут можно указать
любой цвет, на котором будет хорошо смотреться белый шрифт.

Далее видим размер рамки width: 590px;, вместо 590 подставляем
своё значение.

У шрифта не трогаем цвет (он красивый белый с тенью), но можем поменять вид шрифта — font-family: Georgia; и его размер — font-size: 23px;

источник: http://olocoder.ru/CSS26.html

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

Серия сообщений "делаем рамки":
Часть 1 - Простые рамки с заголовком
Часть 2 - Простые рамочки-обводки для текста
...
Часть 6 - Рамки, украшенные картинкой
Часть 7 - Фоновое изображение в рамке. Часть 1
Часть 8 - Рамки оригинальные
Часть 9 - Обводка внутри рамки (блока)
Часть 10 - Урок по рамочкам - составлен по просьбе
...
Часть 41 - Создание рамочек без знаний html всего за пару минут
Часть 42 - Без заголовка
Часть 43 - 9 простых рамочек для текста.

Метки:  

 

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

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

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

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