Закругляем углы у картинок и создаем рамки для текста

Здравствуйте все прохожие, читатели и подписчика моего блога.
И как всегда на связи с вами, автор этого блога, Игорь!

 

В сегодняшней статье, я хочу поделиться небольшими фишками.Хоть это и не ново, но все же.

Сегодня я вам покажу, как создавать разные рамки, пунктирные сплошные и т.п.

Так же мы сегодня рассмотрим как закруглять и делать ажурные углы у картинок.

Эти фишки не обязательные на вашем блоге, но делают их привлекательными и аккуратными.

Так что это ваш выбор, применить эти фишки на деле или вообще не читать эту статью за ненадобностью))))

Давайте приступим с закругления картинок, ну а закончим рамками.

Закругляем углы у картинок, с помощью кода HTML

Я покажу простой способ закругления углов у рамки. Здесь мы будем использовать только HTML код.

Ну для начала, у себя на блоге вставьте любую картинку. Ну у себя я буду работать вот с этой картинкой

 

Получаем там же вот такой код картинки:

Ну для начала, давайте по пробуем закруглить все углы у нашей картинки. Для этого произведем не большое изменение в нашем коде, а это добавим рамку и изменим ее радиус.

 

И на скрине ниже, вы видите что вышло у меня.

 

Немного изменив радиусы углов, вы можете получить картинки с самыми интересными формами.
Ну давайте еще по эксперементируем и получим парочку интересных форм нашей картинки.

Вот посмотрите код для круглой картинки:

 

Вот посмотрите на скрине ниже, что вышло у меня

 

Немного изменив цифру в коде, мы получаем из круга овал.

Ну к примеру, давайте немного придумаем нестандартности и вот вам код для картинки кляксы:

 

А на скрине ниже, мы видим результат нашего эксперемента.

Ну и давайте сделаем еще одну интересную картинку, ну к примеру лепесток.
Код находится ниже:

 

Ну а результат на скрине ниже.

 

Ну а на этом закругляемся, экспериментировать и создавать шедевры, можно часами.

Создаем рамку во круг текста

Способов создания рамок во круг текста, масса. Но сегодня мы рассмотрим самый простой из всех.
Рамку можно создать для любого элемента.

Но сегодня будем использовать HTML код.Тегами будем обвязывать наш текст, там будут применяться стили для нашей рамки.
Снизу вы видите уже созданный код для рамки:

 

Здесь вы можете изменить ширину бордюра, размер и цвет. Так же сделаны отступы текста от стенок рамки.

 

Так же можно изменить сам вид рамки, просто заменяется обозначение «solid» на другое.

Виды рамок, бывают разные:

solid — сплошная

dashed — пунктирная

dotted — точечная

ridge — рельефная

double — двойная

 

 

Так же вы можете сделать отступы, что бы рамка не прилипала к наружному тексту. Для этого в коде, нужно только прописать вот так:

margin: 15px 0 0 15px;

Далее, если вы хотите изменить цвет в самой рамке, а еще и вставить картинку, то к примеру вам нужен вот этот код:

 

У меня вышло вот так.

 

Ну а на этом все.
Будут вопросы, задавайте в форме комментариев.

С Уважением, Игорь Александрович