В данной статье научимся самому простому и быстрому способу в прямоугольных формах закруглять углы с помощью CSS и HTML кодов и делать красивые формы картинок для сайта.
Очень часто веб-дизайнеры в своих работах изменяют формы геометрических фигур, картинок, фотографий и т.п., получая закругленные углы. Это придаёт проекту законченность и приятный дизайн.
Существуют различные по сложности реализации способы преобразовать обычный прямоугольник в прямоугольник с закругленными углами. Мы познакомимся с двумя самыми простыми и быстрыми способами, а также научимся делать картинки и рамки вокруг картинок с закругленными углами для оформления сайта и веб-страниц:
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css.
2. Закругление углов с помощью HTML кода без записи в файл стилей.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML.
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css
Рассмотрим первый способ получения прямоугольника с закругленными углами с помощью CSS и HTML кода с записью в файл стилей Style.css.
Что такое CSS
CSS – это Каскадная Таблица стилей (Cascading Style Sheets – CSS), использующая специальный код. С его помощью можно изменять шрифты, формы и цвета элементов, на страницах веб-приложений позиционировать элементы, включать фоновые изображения. CSS3 последняя версия данной разработки CSS.
Блоки, состоящие из CSS скриптов, размещаются в файле шаблонов стилей, шрифтов и цветов – Style.css для дальнейшего подключения их с помощью HTML-файлов (файлы с раширением .php) в различных местах сайта (шапка, контент, комментарии, подвал и сайдбар).
Работать с CSS и HTML кодами и файлами легко и доступно. Главное всё делать очень внимательно и не спеша.
Делаем прямоугольник с рамкой в CSS
Чтобы изобразить на сайте обыкновенный геометрический прямоугольник, необходимо описать его параметры: длину, высоту, цвет фигуры, цвет фона блока и при необходимости стили рамки (толщина, цвет и т.п.). Для этого формируем следующий блок CSS, в котором описаны стили (параметры) прямоугольника:
#ugolkrug{
width:200px; /* Длина фигуры */
height:100px; /* Высота фигуры */
color: #0000; /* цвет текста */
background:#FF7F00; /* фон блока */
border: 3px #CCCCCC solid; /* стили рамки */
}
Заходим в админпанель WorPress, отмечаем слева пункты меню Дизайн=>Редактор, открываем файл Style.css и в конец файла добавляем этот блок. Не забывайте нажимать Save (сохранить).
Код цвета задаётся в шестнадцатеричной системе и может состоять из шести знаков (это его полный код) или из трёх знаков (сокращённый код). Сокращать код цвета можно в случае совпадения первой цифры со второй, третьей с четвертой и пятой с шестой. Например, код #BB00CC можно сокращённо записать так #b0c. Буквы A, B, C, D и F в коде цвета использовать только латинские.
Значение 3px в атрибуте border показывает ширину рамки.
После занесения стилей в файл Style.css мы можем показывать наш прямоугольник в любом месте сайта. Для этого размещаем тег HTML кода в том месте, где должен появиться наш прямоугольник. Тег имеет такой вид:
<div id="ugolkrug"></div>
Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.
В результате выдачи получаем такой прямоугольник с рамкой.
Как сделать закругленные углы в CSS
Для закругления углов используется атрибут border-radius.
Мы могли бы добавить только этот атрибут. Он нормально отображает результат закругления в новых версиях браузеров, но у многих пользователей ещё остались старые версии, где этот атрибут работает некорректно. Поэтому для совместимости мы добавим ещё несколько описаний этого атрибута, привязанного непосредственно к определённым браузерам, в наш блок в файле Style.css, получив следующий код:
#ugolkrug{
width:200px; /* Длина фигуры */
height:100px; /* Высота фигуры */
color: #0000; /* цвет текста */
background:#FF7F00; /* фон блока */
border: 3px #CCCCCC solid; /* стили рамки */
-moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
-khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
border-radius: 10px; /* закругление углов для всех, кто понимает */
}
HTML-тег div выдаст нам прямоугольник в рамке с закругленными углами:
<div id="ugolkrug"></div>
Как вставить в рамку текст
Для размещения в прямоугольнике текста необходимо в блок CSS добавить атрибут отступов текста от краёв padding, а HTML-тег будет содержать в себе нужный текст, например “pib9.ru”. Таким образом блок CSS имеет такой вид:
#ugolkrug{
width:200px; /* Длина фигуры */
height:100px; /* Высота фигуры */
color: #0000; /* цвет текста */
background:#FF7F00; /* фон блока */
border: 3px #CCCCCC solid; /* стили рамки */
-moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 10px; /* закругл. для старых Chrome и Safari */
-khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
border-radius: 10px; /* закругление углов для всех, кто понимает */
padding: 5px; /* внутренние отступы */
}
а HTML-тег для выдачи текста будет выглядеть так:
<div id="ugolkrug">pib9.ru</div>
Получаем прямоугольник с закругленными углами и текстом:
Если из кода убрать атрибуты описания размеров прямоугольника width и height, то можно получить такие формы с закругленными углами:
1. Без текста
2. С текстом
В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.
Закругление выбранных углов
В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.
Распишем значения радиуса закругления для каждого угла, указывая нули там, где отменяем закругление. Например, отменим закругление в третьем и четвертом углах. Наш код примет такой вид:
#ugolkrug{
width:200px; /* Длина фигуры */
height:100px; /* Высота фигуры */
color: #0000; /* цвет текста */
background:#FF7F00; /* фон блока */
border: 3px #CCCCCC solid; /* стили рамки */
-moz-border-radius: 10px 10px 0 0; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 10px 10px 0 0; /* закругл. для старых Chrome и Safari */
-khtml-border-radius: 10px 10px 0 0; /* закругл.для брауз.Konquerer сист. Linux */
border-radius: 10px 10px 0 0; /* закругление углов для всех, кто понимает */
padding: 5px; /* внутренние отступы */
}
Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла, т.е.:
1. Левый верхний угол.
2. Правый верхний угол.
3. Правый нижний угол.
4. Левый нижний угол.
Таким получается прямоугольник с выбранными закруглениями только в верхних углах.
2. Закругление углов с помощью HTML кода без записи в файл стилей
Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.
HTML закругленные углы
Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы. Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:
<div style="width: 320px; height: 160px; color: #0000; background: #FF7F00; border: 3px #CCCCCC solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml- border-radius: 10px; border-radius: 10px; padding: 5px;">Закругленные углы с помощью HTML без использования файла Style.css</div>
Первый способ закругления углов можно применять, когда одна и та же форма, не меняя стили, используется больше одного раза. Второй способ применяется для форм, стили которых используются один раз.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML
Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки?”.
Это делается очень просто, и сейчас мы этому научимся.
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
<div style="background: url('http://pib9.ru/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 307px; height: 230px;" title="Как вставить картинку на сайт" alt="Как вставить картинку на сайт"></div>
В атрибуте url(‘ ‘) вставляете ссылку на свою картинку.
Закругляем углы картинки с добавлением рамки
Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
#img-radius {
border:3px solid #85A0C9;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
<div id="img-radius" style="background: url('Ссылка на картинку'); width: 307px; height: 230px;" title="Картинки с закругленными углами" alt="Картинки с закругленными углами"></div>
Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:
<div style="background: url('Ссылка на картинку'); width: 307px; height: 230px; border: 3px solid #85A0C9; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;" title="Картинки с закругленными углами" alt="Картинки с закругленными углами"></div>
В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами:
Закругление выбранных углов картинки
Изменяя радиусы углов изображения, ширину и цвет рамки, можно получить нестандартные формы картинок для страницы сайта. Приведу несколько примеров кодов, с помощью которых получила следующие очень симпатичные формы картинок.
<div style="background: url('Ссылка на картинку'); width: 289px; height: 231px; border: 3px solid #F6BF15; border-radius: 150px 150px 0px 0px; -webkit-border-radius: 150px 150px 0 0; -moz-border-radius: 150px 150px 0 0;"></div>
<div style="background: url('Ссылка на картинку'); width: 265px; height: 211px; border: 7px solid #799F2E; border-radius: 120px 200px 0 180px; -webkit-border-radius: 120px 200px 0 180px; -moz-border-radius: 120px 200px 0 180px;"></div>
<div style="background: url('Ссылка на картинку'); width: 276px; height: 206px; border: 8px solid #787CAA; border-radius: 300px 0px 150px 300px; -webkit-border-radius: 300px 0px 150px 300px; -moz-border-radius: 300px 0px 150px 300px;"></div>
<div style="background: url('Ссылка на картинку '); width: 281px; height: 210px; border: 2px solid #405C0A; border-radius: 0 180px 0 200px; -webkit-border-radius: 0 180px 0 200px; - moz-border-radius: 0 180px 0 200px;"></div>
<div style="background: url('Ссылка на картинку'); width: 244px; height: 244px; border: 5px solid #CCA5D1; border-radius: 160px 160px 160px 160px; - webkit-border-radius: 160px 160px 160px 160px; -moz-border-radius: 160px 160px 160px 160px;"></div>
Ссылку на картинку и размеры можно брать в админпанели: Медиафайлы=>Библиотека и возле выбранной картинки нажать: Редактировать.
В следующей статье мы научимся использовать полученный прямоугольник с закругленными углами и рамкой в виде фона для формы подписки с помощью HTML. Вы получите готовые скрипты симпатичной формы RSS подписки, которую сможете расположить в сайдбаре, в статье или в любом другом месте своего сайта.
Как установить счетчик посещений на сайт
Как установить плагины на сайт
Header and Footer. Как вставить код на сайт.
Яндекс Вебвизор стал бесплатным. Снимает на видео действия посетителей сайта.
Спасибо. Принял на вооружение.
Спасибо, очень интересная информация. Можно, конечно, все оформить в фотошопе или другом редакторе изображений, но все же интересно узнать, как это делается с помощью кода. Помню, сам когда-то в коде делал анимационные картинки, правда, использовал JavaScript.
Классная статья, очень много полезной информации. Вроде все современные браузеры уже поддерживают css закругления
Нет не все современные браузеры. IE в Windows 8. Автору статьи надо доработать этот шаг.
А статья очень полезная! Спасибо!
IE не всегда хочет отображать то, что мы хотели бы в нём видеть. О его капризах нужно писать отдельные статьи. Неужели кто-то в нём ещё работает?
Доброе время, друг и коллега Надежда! Рад Вашим успехам и красоте на сайте! Зашел в гости. Хорошо у Вас! Развивается Ваш сайт! Паруса Интернет – бизнеса!!! Обновляетесь? Как многим людям Вы нужны, сейчас уже нужны, а не потом! “Потома” – не будет! А с доходной частью, с рекламой как? Заходите в гости, посмотрите как у меня на сайте!
Жду Вас, как друга, молодого веб-мастера, на сайт свой! Желаю Вам хорошо посчитать цыплят по осени! Хотя бархатный сезон еще и не начинался, а лето еще немного есть! Это лето не повториться, так и знаем мы, друг мой!
Добрые пожелания! До встречи, на страницах наших сайтов!
Было бы неплохо, если бы вы описали, как сделать закругление с помощью тега table (таблицы), без использования картинок в css стиле…
А так статья очень полезная, спасибо…
Статья хорошая. спасибо. Но вот ie7, ie8 не поддреживают.
Спасибо за статью, думал что загругление углов в табличке это оооочень сложно и долго, но благодаря вашим объяснениям понял что это проще простого, Огромное спасибо.
Все доступно, просто, содержательно, ничего лишнего.
Полезная статья, спс.
Можно кстати ай ди стиля для картинок прямо в тэг img вставлять. Пример:
Можно ай ди стиля картинки для закругления углов прямо в тэг ИМГ вставлять. Предлагаю автору написать об этом в статье.
Максим,в теге img можно задавать некоторые атрибуты. Но нам нужен border-radius для закругления углов, который в теге img не работает.
Атрибут border-radius в теге![]()
не работает, но если в img вставить id=”img-radius” то работает, правда в Эксплорере не работает, но в Гугл хром работает. Согласен мой вариант не универсален. 
В теге img предусмотрен универсальный атрибут id, но надежнее использовать в таком виде, как я описала в статье. Ещё, я часто выполняю закругление углов в различных формах, внутри которых можно вставить несколько картинок и различные элементы с помощью тега form, описывая border-radius для различных браузеров в атрибуте стилей: style. Пример можно посмотреть в моей статье http://pib9.ru/prodbijenie-sajtov/nastroyka-rss-na-sayt-cherez-feedburner-skript-rss-podpiski.html – пункт 5.
Отличная статья, а чтобы углы заокругливал ишачок (IE) добавте код в CSS
behavior:url(border-radius.htc); /* закругление для Internet Explorer */
Спасибо АВТОРУ !!!
IE 9 поддерживает, более ренние версии – нет.
есть картинка с привязанной к ней ссылкой! как закруглить картинку чтобы она не теряла свои свойства и при нажатии на неё кидала на нужную страницу сайта? Попробовал просто закруглить картинку при помощи html получилось но в визуальном редакторе на юкозе теперь не могу привязать к картинке ссылку. Напишите пример штмл кода с закругленной картинкой и привязанной к картинке ссылкой. Спасибо!
Михаил, на конструкторе сайтов Юкоз свой редактор, который не поддерживает некоторые атрибуты html. Я не работала на Юкоз, поэтому не смогу Вам помочь. Поищите ответ на форумах, я думаю Вы обязательно его найдёте.
Код картинки с закруглёнными углами и ссылкой может выглядеть так:
<a href="http://pib9.ru" target="_blank"><img style="background: url('http://pib9.ru/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 307px; height: 230px; border: 3px solid #85A0C9; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;" title="Картинки с закругленными углами" alt="Картинки с закругленными углами"/></a>Неплохо… Огромное спасибо за инфу. Автору респект и уважуха. Думаю, эту тему можно развивать до бесконечности Хорошо пишете. Учились где-то или просто с опытом пришло?
По образованию я – программист + самообучение + опыт
Хороший метод,но как же валидность? Да и хорошо, но IE8 и ниже например не увидят ее,а это 50% людей…
автор спасибо огромное давно искал такое чудо
Автор спасибо, подробно для любого нуба понятно! Artem пусть IE8 удаляют ))
Забыли поставить:
overflow: hidden;
Чтобы отображать только область внутри элемента, остальное скрывать.
Плюс не помешает у блочного элемента поставить z-index: 3; (ну или выше), чтобы уж наверняка.
Для данных примеров не нужны параметры “overflow: hidden;” и “z-index: 3;”, так как в примерах с картинками фоном являются сами картинки. Они никогда при приведенных в примерах параметрах не вылезут за пределы самой себя. При изменении параметров размеров картинки, фон изображения будет принимать такие-же размеры. Параметр: “z-index: 3;” тем более лишний, так как в данных примерах ничего друг на друга не может накладываться.
Если размещать коды данных в статье примеров внутри других форм, только тогда возникнет необходимость в предложенных вами параметрах.
Надежда, спасибо за доступное объяснение и в целом очень полезную статью
При работе с формой у меня появился вопрос: можно ли сделать так, чтоб одна из сторон рамки не была видна, т.е либо совпадала с цветом фона, либо не прорисовывалась вовсе
Илья, с помощью свойств стилей в рамке можно изменить многое. Граница рамки слева задаётся свойством border-left, справа — border-righ, сверху – border-top, снизу – border-bottom. Для каждой стороны рамки можно задавать индивидуальные свойства. Чтобы граница рамки не отображалась задайте в нужном свойстве none. Приведу пример кода для рамки вокруг картинки:
<div style="background: url('http://pib9.ru/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 307px; height: 230px; border: 10px solid #85A0C9; border-top: none; border-bottom: none; border-left: 5px solid #0f0; border-right: 10px solid #60f; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;" title="Картинки с закругленными углами" alt="Картинки с закругленными углами"></div>В данном примере я сделала левую границу рамки зелёного цвета шириной 5 пикселей, правую синего цвета шириной 10 пикселей, нижнюю и верхнюю границы убрала с помощью none.
Вышеописанные свойства можно применять не только для картинок с закруглёнными углами, а для всех форм, в которых используется свойство border.
Надежда, огромное человеческое спасибо!!!!!!!!)
Последняя серия картинок эффектно смотрится.
Взял фишку на вооружение
Спасибо! Очень помогла ваша статья!
А как сделать надпись на картинке?
Здравствуйте, шикарная статья, спасибо за нее. Но есть вопрос, а возможно ли в коде сделать закругление в обратную сторону. Т.е допустим левый нижний угол закругляется к правой стороне а правый соответсвенно к левой, а возможно ли сделать так чтоб правый угол закруглялся так же как и левый в правую сторону, т.е углы закруглялись в одни и те же стороны. Надеюсь поняли о чем я) Если кто знает как сделать, расскажите плз
Заранее благодарен!
Надя, есть ли возможность создать плавающее меню в WP-эшке? Когда заходишь на сайт как админ, то над всем содержимым сайта, если прокручивать ползунок броузера, в фиксированном положении находиться панель настроек. Есть желание добавить аналогичное плавающее меню. Искал в сетке, но там в основном используется jQuery, а она весьма и весьма уязвима(на форумах WP есть топики) и открывает путь к админке сайту(сам удаляю эти объекты с обновлением движка). Стараюсь javascript не тащить да и если плагины есть с плавающим меню, то они не для меня, плагин тоже ключ для стека и кроме того, для червей особенно. Пытался скомуниздить код плавающей панели админки, он беситься начинает. Искал на зарубежных сайтах, но к теме twentyten(работаю пока на локалке) нет.
Про IE в 11 версии появиться поддержка известных языков и их версий, хотя обещанного…
Материал очень пригодился. Спасибо
!
Михаил, можно создать плавающее меню с помощью HTML и CSS. Для этого в файле header.php с помощью тега
описать меню, как блочный элемент, вид блока управляется с помощью стилей.
Стили описать в файле стилей style.css, обязательно указав параметры:
margin-top – устанавливает величину отступа от верхнего края элемента;
position – устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Установить значение fixed;
Параметр z-index указывает размещение плавающего меню впереди всех элементов (в верхнем слое), так как элементы на веб-странице размещаются послойно.
Спасибо за волшебство:) Не думал что все так просто получится)
Спасибо за урок!!!)
Спасибо большое! Очень пригодились ваши уроки.
Надежда, здравствуйте!
Позволю себе одну поправочку. У Вас в тексте:
”
Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.”
Всё верно, но Валидатор будет ругаться на одинаковые ID. Поэтому
через class будет всё-таки точнее. Всего доброго.
Сергей! Полностью согласна с Вашей поправочкой. Если одни и те же параметры стиля используются на сайте несколько раз, лучше описать их в файле стилей style.css один раз и через class в HTML-кодах обращаться к нужному стилю. Если какой-либо стиль используется один раз, его можно описать непосредственно в HTML-коде.
Говоря о реакции Валидатора на одинаковые ID, я имел в виду
различие собственно ID и CLASS. Смысл вводить две “конструкции” в CSS, которые дают идентичный визуальный результат? Ответ связан с программированием (JavaScript, напр.): ID позволяет обращаться к этой сущности как к уникальному Объекту.
Да, чтобы пройти валидацию и иметь корректную выдачу картинки в браузере (в случае выдачи нескольких картинок по одному стилю) необходимо вместо селектора id использовать селектор class.
Добрый день, Надежда не подскажите как это сделать пример вторая таблица Популярные предложения недвижимости в Турции, интересует оформление края таблицы
Наталия, заголовок расположен впереди изображения таблицы формата png, а закругление таблицы нарисовано в формате png вручную, очевидно в Фотошопе или в другой программе создания изображений без использования средств HTML или CSS.
Давно изучаю программирование. Лазию по форумам, блогам первый раз вижу праграммистку тем более с профессиональным уровнем. Все грамотно все понятно. Респект вам и удачи.
Спасибо, Антон!
Добрый день!
Применил ваш код к своим картинкам на сайте, очень понравилось, спасибо!
Вот только у меня вопрос:
После применения вашего кода, картинки стали находится не среди текста а над ним, как вернуть их обратно, спасибо!
Добрый день, Алексей!
Добавьте атрибут align или стилевое свойство float для обтекания изображения текстом. Для выравнивания изображения по правому краю используйте значение right, для выравнивания по левому краю left.
Для указания расстояния от обтекаемого текста до изображения добавьте параметры vspace и hspace. hspace указывает пустое пространство одновременно слева и справа от изображения, а vspace верхний и нижний отступы.
Здрасте,
А есть вариант, чтобы border-top в прямоугольнике прогнуть во внутрь блока/прямоугольника? Чтобы возникла такая окружность во внутрь, что ли.
Буду признателен за ответ
В моей практике не было необходимости в прогибании углов внутрь. На сколько мне известно с помощью описанного в данной статье метода это сделать невозможно. Но в программировании нет ничего невозможного. Можно использовать наслоение изображений, накладывая их друг на друга. Таким образом можно получить любую фигуру.
Спасибо! Статья полезная!
Здравствуйте Надежда!
В отличие от поэта Павла Когана (“…Я с детства не любил овал! Я с детства угол рисовал!” 20 января 1936) неравнодушен к овалам.
Больше года использую на своем сайте различные варианты Ваших закругленных углов. Спасибо!
А как сделать надпись непосредственно на горизонтальной линии рамочки, нарисованной Вашим кодом, например, ?
Учитывая что, не являюсь профессиональным ВЕБ, да и возраст не тот (68 лет), не смог осилить эту задачку. Хотя практически все делаю на сайте своими руками.
Полагаю, такое развитие Вашего кода будет полезно не только мне.
Надеюсь на помощь.
Яков, на рамке невозможно разместить текст. Надпись для изображения можно выполнить под картинкой следующим образом:
<div class="aligncenter" style="background: url('http://pib9.ru/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 276px; height: 206px; border: 8px solid #787CAA; border-radius: 300px 0px 150px 300px; -webkit-border-radius: 300px 0px 150px 300px; -moz-border-radius: 300px 0px 150px 300px; " ></div> <p style="font: italic 2em Georgia, Times, serif; color: #666; text-align: center; margin: 0 0 1.3em !important;">Веселые друзья</p>Получим такой результат:
Веселые друзья
Можно надпись разместить в верхней части картинки. Для этого тег
помещаем внутрь тега
следующим образом:
<div class="aligncenter" style="background: url('http://pib9.ru/wp-content/uploads/2012/07/kak-vstavit-kartinku-na-sajt.jpg'); width: 276px; height: 206px; border: 8px solid #787CAA; border-radius: 300px 0px 150px 300px; -webkit-border-radius: 300px 0px 150px 300px; -moz-border-radius: 300px 0px 150px 300px; " > <p style="font: italic 1em Georgia, Times, serif; color: #666; text-align: center; margin: 0 0 1.3em !important;">Веселые друзья</p></div>Получаем:
Веселые друзья
Спасибо, очень здорово!
Если хочется, то можно сместить div с текстом, например margin’ом, наложив его визуально на рамку.
Веселые друзья
респект за статью. очень полезная штука.
Отличная статья
и полезная информация. Буду заглядывать в гости по чаще!
Сидел за оформлением сайта, и ваша информация была как нельзя кстати. Большое спасибо.
Dear Nadeжda!
Как же здорово, что Вы есть на свете! Очень приятно было почувствовать толику радости и восторга в этом недобром мире денег, насилия и секса. Принял на вооружение Ваши примеры. Большое СПАСИБО! Пусть Вам всегда сопутствует Удача, Радость и Любовь, и ангел-хранитель несёт Вас на руках по размытым дорогам жизни.
С Уважением –
начинающий сайто”пейсатель”
Спасибо, Graf Valerio, за пожелания! Мне так же очень приятно, в описанном Вами мире, читать такие приятные, позитивные комментарии. И Вам желаю Удачи в Вашем начинании сайто”пейсателя”!
Спасибо очень и легко помогло. Больших успехов и Вам