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

ageent · May 29, 2009

Народ! существует ли способ создания закругленных углов в картинках с помощью 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 · May 29, 2009

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

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

psywalker · May 29, 2009

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

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

ageent · May 30, 2009

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

нет.

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

Edited May 30, 2009 by ageent

psywalker · May 30, 2009

ageent

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

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

Edited May 30, 2009 by psywalker

ageent · May 30, 2009

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

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

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

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

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

s0rr0w · May 30, 2009

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

ageent · May 30, 2009

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

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

psywalker · May 30, 2009

да вот смотри например сегодня я делал похожую задачу, никаких 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 · May 30, 2009

>Три дива и одна картинка.
Я не телепат, пример плиз

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

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

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

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

ageent · May 30, 2009

s0rr0w

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

Edited May 30, 2009 by ageent

psywalker · May 30, 2009

ageent

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

ageent · May 30, 2009

psywalker

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

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

s0rr0w · May 30, 2009

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

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

ageent · May 30, 2009

s0rr0w

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

Nekromancer · May 30, 2009

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

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

ageent · May 30, 2009

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

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

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

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

Nekromancer · May 30, 2009

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

ageent · May 30, 2009

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

Edited May 30, 2009 by ageent

psywalker · May 30, 2009

ageent

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

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

Edited May 30, 2009 by psywalker

Nekromancer · May 30, 2009

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

psywalker · May 30, 2009

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

ageent · May 30, 2009

Касательно 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 · May 30, 2009

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

ageent · May 30, 2009

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 · May 30, 2009

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

Edited May 30, 2009 by psywalker

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

51 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information