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 добавить атрибут

отступов текста от краёв 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>

Закругленные углы с помощью 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 подписки, которую

сможете расположить в сайдбаре, в статье или в любом другом месте своего сайта.

Источник.

Fisonka