Посредством команды border-radius (закругление углов обрамления в CSS), указав одно из четырех значений для каждого угла рамки поочередно, можно задать закругления любого радиуса, что дает возможность создать неповторимую оригинальную рамку вокруг текста или изображения, определить фон блока внутри рамки, а добавление команды shadow отделяет созданный блок тенью. Цвет и размеры рамки и тени, фон блока (цвет или рисунок) легко поменять установив желаемые значения в коде CSS.
Этот способ создания рамок не загружает web-страницу изображениями - значит не замедляет время загрузки.
Некоторые варианты обрамления текста или изображений | ||||||
|
Чтобы создать такие рамки, используйте изложенные ниже коды CSS и HTML:
1.Этот код CSS следует вставить на страницу между тегами head
.krug {
width: 300px; /* ширина блока */
font-weight: bold; /* тип текста */
padding: 20px; /* отступ текста от краев */
margin: 30px 0 10px 0; /* отступы от края элемента */
border: 2px solid #000; /* цвет и толщина рамки */
box-shadow:10px 10px 15px #999999; /* цвет и толщина тени */
}
.krug1 {
background-color:#FFD4A0;
border-radius: 10px 0 20px 30px;
}
.krug2 {
border-radius: 10px 10px 10px 10px;
}
.krug3 {
background-image: url("http://img-fotki.yandex.ru/get/4808/svoi-ivanov.3/0_59b9d_b2f30154_XS.jpg");
border-radius: 30px 15px 0;
}
.krug4 {
background-color:#E7E7E7;
border-radius: 4em 0;
}
.krug5 {
background-color:#FFFF00;
border-radius: 50%;
}
</style>
2.Эти коды HTML вставляем на страницу между тегами body
<div
class="krug krug1"> ФОН ОПРЕДЕЛЕННОГО ЦВЕТА </div>
<div
class="krug krug2"> ПРОЗРАЧНЫЙ ФОН </div>
<div
class="krug krug3"> ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ФОНА </div>
<div
class="krug krug4><a href=" …URL ссылки...">
ТЕКСТОВАЯ ССЫЛКА </a></div>
<div
class="krug krug5"><a href=" URL ссылки "><img
src=" URL изображения " ></a></div>
Подробности на странице: Создание гиперссылок.
Из представленных способов обрамления (.krug1-5) выберите понравившиеся для использования, а остальные удалите,чтобы не загромождать страницу.
КОД ЛЮБОГО ЦВЕТА ВЫ МОЖЕТЕ ВЫБРАТЬ ЗДЕСЬ
...Дерзайте...