Форум Сайтостроение Веб-строительство

как с помощью css закруглить картинки?

[Удален]
1302

сабж ............

ewg777
На сайте с 04.06.2007
Offline
225
ewg777
#1

http://www.google.ru/#hl=ru&safe=off&num=20&newwindow=1&q=%D0%B7%D0%B0%D0%BA%D1%80%D1%83%D0%B3%D0%BB%D0%B8%D1%82%D1%8C+%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8+css&lr=&aq=f&oq=&fp=5186059f47af416bТС явный идиот...

http://designformasters.info/posts/round-corners-no-image/

[Удален]
#2

мне как раз таки надо закруглить само изображение

у меня щас такой вариант стоит

border:3px solid #eee;-moz-border-radius: 3px;-khtml-border-radius: 3px;-html-border-radius: 3px;-webkit-border-radius: 3px;border-radius:3px;

но в ие не круглиться

ewg777
На сайте с 04.06.2007
Offline
225
ewg777
#3
pinkponk:
мне как раз таки надо закруглить само изображение

А css тут причем?

[Удален]
#4

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

Василий Ткачев
На сайте с 19.05.2005
Offline
481
Василий Ткачев
#5
pinkponk:
при помощи css можно, в одном вордресс плагине видел подобный стиль, только забыл че за плагин....ща поищу

так это скорее всего на пхп сделано, цсс никак этого сделать не сможет

Продвигаем естественно ( http://www.inetessentials.ru/ ) и непринужденно. Практический курс по оптимизации ( https://allintop.ru/optimization/ ) - без воды и на основе сайтов студентов. Ежегодная конференция All in Top Conf (https://www.allintopconf.ru/)
SmiTT
На сайте с 05.08.2008
Offline
123
SmiTT
#6
pinkponk:
при помощи css можно, в одном вордресс плагине видел подобный стиль, только забыл че за плагин....ща поищу

CSS Не обрабатывает сами изображения. Какого фига css будет обрабатывать их?

inetessentials опередили :)

S
На сайте с 28.10.2005
Offline
319
semenov
#7
SmiTT:
CSS Не обрабатывает сами изображения. Какого фига css будет обрабатывать их?

А наложить на углы изображения картинки-уголки? :)

Ghost Bear
На сайте с 01.07.2009
Offline
28
Ghost Bear
#8

Вроде было решение через javascript. Сам не пользовался, не знаю подробностей, но возможно это то, что вам нужно.

Пишу продвинутый веб-софт и автоматизирую сео-задачи на партнёрских условиях. Ваша тема + Мой код = Совместный успех. Велком в ЛС.
TA
На сайте с 12.06.2009
Offline
116
TiA
#9

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

Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)
Avenger
На сайте с 22.07.2007
Offline
47
Avenger
#10

смотреть тут или вот код ниже. абсолютное позиционирование + 4 картинки по углам. закругление хорошо реализовано в css-framework-0.3.15, там можно изучить подробней. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>.:[TC UP template]:.</title>

	  <style>

		a {color:#539029;}

		p {margin:0}

		.test {float:left;height:137px;margin-right:5px;overflow:hidden;width:136px;background:url(bg-project.png) no-repeat;}

		.test p {color:#393939;font-size:0.9em;line-height:1.1em;padding-top:3px;text-align:center;}

		.test p.desc {font-size:11px;padding-top:3px;}

		.test p a {font:bold 12px 'Trebuchet MS';}

		.corners-5 em.tl, .corners-5 em.tr, .corners-5 em.bl, .corners-5 em.br { position: absolute; font-size: 1px; }

			.corners-5 {height:69px;margin:5px 0 0 5px;position:relative;overflow:hidden;width:128px;}

			.corners-5 em.tl, .corners-5 em.tr, .corners-5 em.bl, .corners-5 em.br { width: 10px; height: 10px; background: url(corners-5.png); }

			.corners-5 em.tl { left: -5px; top: -5px; }

			.corners-5 em.tr { right: -5px; top: -5px; }

			.corners-5 em.bl { left: -5px; bottom: -5px; }

			.corners-5 em.br { right: -5px; bottom: -5px; }

	  </style>

</head>



<body>

<div class="test">

	<div class="corners-5"><img src="test1.jpg" alt=""/>

		<em class="tl"><!-- . --></em>

		<em class="tr"><!-- . --></em>

		<em class="bl"><!-- . --></em>

		<em class="br"><!-- . --></em>

	</div>

	<p><a href="#">Звенигорье</a></p>

	<p class="desc">Дачный поселок с уникальным ландшафтом под Звенигородом</p>

</div>

</body>

</html>
С уважением, Андрей Головнев (http://golovnev.by/)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий