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

[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

[s0rr0w]

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

Картинка фиксированного размера или нет?

[psywalker]

Картинка фиксированного размера или нет?

полагаю, что если бы она была таковой, он бы не спрашивал

[ageent]

>Картинка фиксированного размера или нет?

нет.

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

Edited May 30, 2009 by ageent

[psywalker]

ageent

Боюсь, что такой цели с помощью CSS добиться нельзя, потому что даже и если предположить наброски с какими нибудь процентами, то при масштабировании картинки таким образом будет теряться качество, и картинка попросту будет растягиваться не соблюдая пропорции..

p. s. - Если кто нибудь найдёт тебе решение, я только буду рад записать себе его в арсенал

Edited May 30, 2009 by psywalker

[ageent]

Фиг с картинками, хотя бы дивами нормально сделать. Вот что получилось на данный момент.

http://www.ageent.ru/demo/corner/index.html

Скрипты нужны только для ie6. Так как при использовании скрипта для png (iepngfix.htc) слетает позиционирования, если кто подскажет как сделать без jquery для ie6 буду очень рад.

Тоесть вопрос в данный момент встал как отремонтировать png в ie6 что-бы при этом не нарушалось позиционирование.

Данный вариант работает хорошо! Но возможно, есть варианты сделать его еще лучше не используя jquery ?

[s0rr0w]

Три дива и одна картинка.

[ageent]

>Три дива и одна картинка.

Я не телепат, пример плиз

[psywalker]

да вот смотри например сегодня я делал похожую задачу, никаких JS даже в помине нет, просто абсолютное позиционирование и всё, только мне на ИЕ6 насрать, я не стал настраивать под него, поэтому если что, смысл главное улови:

http://www.psywalker.ru/SAITS/PayNetGate/login.html

вот код CSS и всего делов:

 form.login{ position: relative; 
		width: 39.7em;
		height: 19.8em; 
		border: 1px solid #c0c7ce; 
		background: #fff url(../img/login-trans.png) bottom right no-repeat;
		padding: 2.5em 1em 2.4em 2.5em;
		margin: 14.2em auto;
	}

		div.l-top, div.l-top div, div.l-btm, div.l-btm div { 
				height: 11px;
				width: 100%;
				position: absolute;
				background: url(../img/login-lr.gif) no-repeat;
		}
		div.l-top { background-position: 0 0; left: -1px; top: -1px;}
			div.l-top div { background-position: 100% -11px; right: -2px;}
		div.l-btm { bottom: -1px; left: -1px;  background-position: 0 -33px;}
			div.l-btm div { background-position: 100% -22px; right: -2px;}

Вот щас подправил в ИЕ6 спецом для тебя, вот что потребовалось, и никаких скриптов:

 
			div.l-top div { right: -38px;}
		div.l-btm { bottom: -1px; }
			div.l-btm div {  right: -38px;}

Edited May 30, 2009 by psywalker

[s0rr0w]

>Три дива и одна картинка.

Я не телепат, пример плиз

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

Первый див содержит фоном картинку, которую нужно закруглить.

Второй див содержит картинку с закруглениями ( примерно 2000 на 2000 пикселей, внутри прозрачно, по краям - уголки с фоном) и как фон - эту же картинку, выравненную по левому краю и низу. Диву ставим ширину, высоту и оверфлоу - хидден.

Третий див содержит эту же картинку с закруглениями, только с text-align: right, фон в виде картинки с закруглениями, который выравнивается по низу и правому краю, и position: absolute, а также ширину и высоту, и оверфлоу- хидден, ну и поиграться смещениями, чтобы закругляши ровно легли.

[ageent]

s0rr0w

Извините, конечно но это геморойное решение. Под каждую картинку (с разным размером) со смещением играться.

Edited May 30, 2009 by ageent

[psywalker]

ageent

А мой вариант вы просто проигнорили чтоль, ну пральна, нефига искать лёгкие пути, мы же все любим гемор :rolleyes:

[ageent]

psywalker

Я в прошлом сообщении специально выделил адресата s0rr0w

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

[s0rr0w]

s0rr0w

Извините, конечно но это геморойное решение. Под каждую картинку (с разным размером) со смещением играться.

Если подумать головой, то со смещением придется играться всего один раз.

[ageent]

s0rr0w

пример в студию. Теория таорией, а практика вещь неоспоримая.

[Nekromancer]

пример в студию

Деньги на бочку.

[ageent]

Данную задачу я уже решил 2 способами

1. Сам написал ( пример выше )

2. Подсказал psywalker - за что ему отдельное спасибо!

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

[Nekromancer]

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

[ageent]

Не хотите, не пишите - это дело добровольное. За деньги вариант ни катит. Это форум, а не фриланс.

Edited May 30, 2009 by ageent

[psywalker]

ageent

Подсказал psywalker - за что ему отдельное спасибо!

не за что, забудь.. На самом деле если поразмыслить, есть ещё кучу всяких способов, как сделать разные уголки и т. д. А ну ка опишите мне Задачу, только поточнее прям, я щас закончил вёрсточку одну, как раз есть свободное время, самому инересно стало только картинку в студию и чёткое описание задачи

Edited May 30, 2009 by psywalker

[Nekromancer]

прям таки закончил?

[psywalker]

ну да, закончил, врать не буду

[ageent]

Касательно div решенно на твердую 5. Вот я уже и статейку у себя оформил http://www.ageent.ru/verstca/280-create-image.html

Можно усовершенствовать данный вариант. Сделав вставку картинки через img Тоесть

<div левый верхний кгол>
   <div правый верхний угол>
	 <div нижний левый угол>
		<div нижний правый угол>
		   <img src="" />
		</div>
	 </div>
  </div>
</div>

Да вот только проблема img перекрывает фон. Пробывал z-index не помогло, если забороть это перекрытие - это будет самый суперский вариант.

[psywalker]

погоди, я не понял, а где пример, который надо исправить тут: http://www.ageent.ru/verstca/280-create-image.html Покажи, где именно и как ты делал верхний вариант (На твёрдую 5)

[ageent]

http://www.ageent.ru/demo/corner_gif/index.html

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

<div левый верхний кгол>
   <div правый верхний угол>
	 <div нижний левый угол>
		<div нижний правый угол>
		   <img src="/k1.jpg'" width="425" height="310" />
		</div>
	 </div>
  </div>
</div>

Что-бы изображение вставлялось не через div

 <div style="background: url('/k1.jpg') no-repeat; display:block; width:425px; height:310px;" class="ppp0">

а через

<img src="/k1.jpg'" width="425" height="310" />

но изображение перекрывает фон.

Edited May 30, 2009 by ageent

[psywalker]

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

Edited May 30, 2009 by psywalker