Вопрос по картинкам

[ageent]

Народ! существует ли способ создания закругленных углов в картинках с помощью css.

К примеру имеем картинку http://www.ageent.ru/demo/22.jpg

На выходе должны получить http://www.ageent.ru/demo/11.jpg

Картинки могут быть разного размера, закругление должно работать в ie.

еще раз. вопрос стоит не в создание закруглений у div а в создании закруглений у картинки <img src="" />

Просьба скидывать примеры, если есть.

Заранее благодареенн.

Edited May 29, 2009 by ageent

[ageent]

Архив http://www.ageent.ru/demo/corner_gif.zip

[psywalker]

посматри дружище какой классный вариант я придумал, а код ваще ничтожный, и с картинкой внутри, как ты любишь: http://psywalker.ru/Forum/5/main.html

слушай, только наверн надо его доработать ещё, ищи косяки срочно, будем исправлять,а то я скоро сваливаю

А вообще инетерсный способ я тебе скажу, вот я ща немножко переделал код, и при растягивании картинки будет: Вставь в стили вобщем:

<style type="text/css">
*{ margin: 0; padding: 0;}
	body { font: .625em Verdana, Geneva, sans-serif; }
	img { display: block; width: 100%;}  
	   div{ width: 142.5em; height: 31.7em; margin: 0em auto; background: #2f641e;}

		   em,em b,em.btm,em.btm b { 
				  background: url(sprite.jpg) no-repeat; 
				  font-size: 0; 
				  display: block; 
				  height: 7px;
				  position: relative;
		   }
				  em { top: 0px;}
				  em b { background-position: 100% -7px;}
				  em.btm { background-position: 100% -14px; top: -7px;}
				  em.btm b { background-position: 0 -21px;}
</style>

Edited May 30, 2009 by psywalker

[ageent]

круто спору нет! ток минус в том, что он только под одну картинку подогнан. Вставляем картинку другого размера и уже в css лезть нужно.

в прошлом варианте http://www.ageent.ru/demo/corner_gif/index.html мы можем любые картинки вставлять ток width и height меняя. Я про img начал говорить потому как думал что можно просто картинку вставить, прописать у нее width и height и углы автоматом появятся где нужно, не лезя в css.

Сообственно это вроде как и можно сделать только забороть перекрывает изображением фона.

<style type="text/css">
*{ margin: 0; padding: 0;}
	body { font: .625em Verdana, Geneva, sans-serif; }
	img { display: block; width: 100%;}  
	   div{ width: 142.5em; height: 31.7em; margin: 0em auto; background: #2f641e;}

		   em,em b,em.btm,em.btm b { 
				  background: url(sprite.jpg) no-repeat; 
				  font-size: 0; 
				  display: block; 
				  height: 7px;
				  position: relative;
		   }
				  em { top: 0px;}
				  em b { background-position: 100% -7px;}
				  em.btm { background-position: 100% -14px; top: -7px;}
				  em.btm b { background-position: 0 -21px;}
</style>

Изображении колбасит страшно, растягивает.

Edited May 30, 2009 by ageent

[psywalker]

погоди, а добавь вот это height: 100%; img { display: block; width: 100%; height: 100%;} посмари, теперь картинка как раз под высоту блока стала

я те говорю, ща мы те намутим способ самый лучший)), я тока не понял , чё именно те нужно, вроде этот способ всё растягивает как надо?

Я так понимаю, тебе Не нужен Фиксированный блок, чтобы просто все углы растягивала именно картинка, которая находится внутри?

Edited May 30, 2009 by psywalker

[ageent]

Я так понимаю, тебе Не нужен Фиксированный блок, чтобы просто все углы растягивала именно картинка, которая находится внутри?

не не не. Мне нужно что-бы при вставке картинок на сайт у них автоматически появлялось скругление. Картинки могут быть разного размера.

Я бы мог это и на php сделать но это лишняя нагрузка на сервак.

[psywalker]

аа, ну вот это уже врядли я смогу наколдовать, тут похожу на JS или Php правда, ну ваще задача интересная, слушай, а углы должны быть одинаковые, одинакового цвета даже?

[ageent]

углы должны быть одинаковые, одного цвета. Под цвет фона дизайна. В принципе и это решение подходит http://www.ageent.ru/demo/corner_gif/index.html ладно остановимся на том что есть )

Спасибо за помощь

Edited May 30, 2009 by ageent

[psywalker]

смотри например, полагаю, что вот это максимальный вариант: Вобщем тут дело в том, что div, в котором лежит картинка, растягиваеться на любую высоту и ширину, всё зависит от картинки, вродебы хорошо, но проблема в том, что сам этот div изначально не имеет ширины и по умолчанию уже изначально растягиваеться на всю ширину, вот если бы с этим чтото придумать, было бы здорово:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>photo</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
	body { font: .625em Verdana, Geneva, sans-serif; }
	img { display: block; width: 400px; height: 300px;}  

	  div{ background: #2f641e;}
		  em,em b,em.btm,em.btm b { 
				  background: url(sprite.jpg) no-repeat; 
				  font-size: 0; 
				  display: block; 
				  height: 7px;
				  position: relative;
		   }
				  em { top: 0px;}
				  em b { background-position: 100% -7px;}
				  em.btm { background-position: 100% -14px; top: 0px;}
				  em.btm b { background-position: 0 -21px;}
</style>
</head>

<body>
	<div class="box">
		<em><b></b></em>
			<img src="photo.jpg" alt="" />
		<em class="btm"><b></b></em>
	</div>
</body>
</html>

смотри, там меняй у картинки ширину, высоту, как будто меняешь их на разные, и всё ок, кроме ширины div, которая постоянно растягиваеться сука http://psywalker.ru/Forum/z-u/main.html

Edited May 30, 2009 by psywalker

[ageent]

div 100% это первое и второе у нас выше и ниже картинки полосы выходят )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>photo</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
	body { font: .625em Verdana, Geneva, sans-serif; }
	img { display:inline; }  
	  .box{ display: block;}
	  div{ background: #2f641e;}
		  em,em b,em.btm,em.btm b { 
				  background: url(sprite.jpg) no-repeat; 
				  font-size: 0; 
				  display: block; 
				  height: 7px;
				  position: relative;
		   }
				  em { top: 0px;}
				  em b { background-position: 100% -7px;background:#F00;}
				  em.btm { background-position: 100% -14px; top: 0px;}
				  em.btm b { background-position: 0 -21px;background:#F00;}
</style>
</head>

<body>
	<div class="box">
		<em><b></b></em>
			<img src="k1.jpg" alt="" />
		<em class="btm"><b></b></em>
	</div>
</body>
</html>

херовенько.

Edited May 30, 2009 by ageent

[psywalker]

во первых зачем ты назначаешь div {display: block;} если это и так по умолчанию блочный элемент, во вторых у меня, во вторых вот ещё вариантик доделал:

http://psywalker.ru/Forum/z-u/main.html

[ageent]

.box{ display: block;}

даж незнаю откуда эта херня взялась )

[psywalker]

да, в твоём коде появляется херня, посмотри вариант: http://psywalker.ru/Forum/z-u/main.html

[ageent]

фиговый вариант.

>div 100% это первое и второе у нас ниже картинки полосы выходят )

[psywalker]

Всёёёё победааааа http://psywalker.ru/Forum/z-u/main.html

воо, вместо div в центре я добавил span, ваще способ классный

давай проверь там всё дружище, я ща пойду похаваю, а потом обязательно надо будет добить его

Edited May 30, 2009 by psywalker

[ageent]

неа не решил. попробуй картинку другого размера и цвета вставить.

1. полоса внизу

2. float: left; ie6 не хавает

Edited May 30, 2009 by ageent

[psywalker]

1)я не понял, как это вставить картинку ДРугого Цвета? ведь цвет должен совпадать с цветом уголков зелёных?

2)У меня нет полос внизу, покажи мне что ты там от себя добавил? http://psywalker.ru/Forum/z-u/main.html

3) ИЕ6 будем думать ещё, чуть позже

[ageent]

Последний вариант охуенный! с ie6-i7 нужно решить. Тянется div на 100%

1)я не понял, как это вставить картинку ДРугого Цвета? ведь цвет должен совпадать с цветом уголков зелёных?

я картинку переделал, попробуй вставить разные изображения (любые поймешь) http://www.ageent.ru/demo/corner_gif.zip

[psywalker]

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

[ageent]

да с ie запарка будет, чет у меня никак не хочет работать.

[psywalker]

да блин дружище, чё то у меня тоже тупик ваще, чё тока я с ним уже не делал , не хочет и всё сволочь..мдее

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

Edited May 30, 2009 by psywalker

[ageent]

ага, получился вариант для всех браузеров, кроме IE.

Edited June 27, 2009 by ageent

[psywalker]

А я ваще ща так подумал, а почему бы тогда изначально не делать тупо картинки с закруглёнными уголками, и гемора меньше и элементов? Я просто сначала думал, что у тебя картинка должна тянуться как бы с углами, а тут получаеться у тебя картинки все фиксированной ширины, поэтому и показалось, что мы геморроем занимаемся)))

[ageent]

Смысл такой: человек публикует статью, скажем через редактор TinyMCE, закидивает изображение для этой статьи, потом на сайте появляется картинка с подписью типа как здесь http://www.promo-poker.ru Новости картинка разумеется должна появляется со скруглением.

>А я ваще ща так подумал, а почему бы тогда изначально не делать тупо картинки с закруглёнными уголками

а как ты думаешь не геморой ли делать углы для человека, который публикует в день скажем по 10 новостей/статей?

Edited May 30, 2009 by ageent

[psywalker]

аа, вот теперь просекаю, базара нет, тада канеш гемор делать самим картинки)), тогда будет думать ещё, но чувствую безнадёга какая та блиинн

[ageent]

если че нибудь придумаешь, пиши с большим интересом заценю )