» »

Закруглить углы у картинки на сайте


Закруглить углы у картинки на сайте

Доброе время суток, дорогие друзья! Сразу хочу сказать то что если вы не знаете как закруглить края у картинок с помощью CSS стилей, то вы попали туда куда нужно так как я в этом уроке вам это продемонстрирую и покажу как это делается. делается это легко и просто и вы сами в этом сможете убедится тогда когда дочитаете данный урок до самого конца. Мы будем рассматривать примеры закругления углов как у всех четырёх сторон картинки так и у только нескольких углов, вдруг вам нужно или захочется закруглить только один угол в общем садитесь по удобнее и приготовьтесь получать нужную для вас информацию.

В целом тут сложного не чего нет и мы будем работать только со стилем border-radius который нам и будет помогать закруглять наши углы у картинок.

И так возьмём для примера одну картинку! Я взял Машу с Медведем.



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

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

Код
<div id="img-rad" style="background: url('ссылка на картинку'); width: 448px; height: 250px;"></div>


Где написана ссылка на картинку там естественно и указываем адрес к своей картинки.

Если вы заметили то мы обозначили нашу картинку стилем img-rad и с помощью его мы сейчас пропишем картинке стиль.

Код
#img-rad {  
  border-radius: 10px;//Указываем радиус скругления  
}


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

И так в первом примере мы закруглили все четыре стороны:



Теперь мы закруглим только верхние углы и для этого мы изменим немного значение border-radius в стиле.

Код
#img-rad {  
  border-radius: 150px 150px 0px 0px;//Указываем радиус скругления  
}


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



Таким же образом можно поменять значения в стиле border-radius и сделать закруглённые только нижние углы .

Код
#img-rad {  
  border-radius: 0px 0px 150px 150px;//Указываем радиус скругления  
}


И смотрите как ещё раз необычайно у нас изменилась картинка наша!



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

Мы в стиле border-radius ещё разок изменим значение вот на это

Код
#img-rad {  
  border-radius: 300px 0px 150px 300px;//Указываем радиус скругления  
}


И у нас получится вот так вот



Как видите картинка изменяется каждый раз и этому всему способствует всего лишь один стиль border-radius и примеров можно привести множество, к примеру вот так

Или вот так



Так что изменяйте значения border-radius и вперёд к изучению его возможностей, а у меня на этом пока всё!
14.09.2015 Просмотров: 477 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Canon
Canon 15.09.2015 01:181
0
А на форум можно их поставить, так как там только bb коды?
Brung
Brung 15.09.2015 01:342
0
Canon, на bb кодах не должны работать, просто не видел что на форуме где то были, а вот как материал, их много можно найти.
FeStemBer
FeStemBer 15.09.2015 01:493
0
Просто надо спросит, кто этот материал ставил, через BBкоды он делал, если через них и значит по идее на форуме должно быть такое изображение.
Kosten
Kosten 15.09.2015 01:554
0
Заливал через BB коды и как помню, модератор выставлял такой же рисунок на форуме, а значит там работает.
Сопрано
Сопрано 15.09.2015 02:185
0
Да зачем спрашивается так их изгибать и картинку портить. Можно на детском сайте разве сделать.
avatar