закругление углов средствами CSS HTML

Powerslave · June 20, 2007

Задача: Закругление углов у картинки средствами CSS-HTML

Что есть: Есть картинки разных размеров, которые загружаются в статью.

Ньюансы:

1. Картинки разных размеров

2. Хотелось бы в див вставлять тег а не бекграундом

3. Некоторые картинки являются ссылками.

Те решения что я наш?л:

1. http://www.phpground.ru/forum/post-46.html. Делаем РОдительский див ставим ему размер изображения, ставим ему в бэкграунд само изображение. Внутри этого дива ещ? один див, с кусочками по углам.

2. Что бы как то сделать что бы можно было по фотографии кудато переходить прийд?тся воспользоваться онклик при нажати на дивный блок

3. Пример просто картинки с угалками http://recodes.ru/projects/some/

Вопрос: Как сделать проще и соблюсти "Ноьюансы" ? Заранее спасибо

Vlad · January 25, 2008

Просто. Первая картинка это верхняя часть блока с закруглениями, вторая - нижняя.

Что-то вроде этого.

______

/

______/

Вставлять можно прямо картинкой или фоновым рисунком. Между картинками содержимое блока.

nvgudz · February 3, 2008

В продолжение темы - Градиент, углы, border - html and css http://trifler.ru/blog/post_1186248660.html

Было использовано на практике, результат неплохой.

spdif · February 3, 2008

Можно ли сделать такой блок с рамкой:
на блоках и CSS проще и красивее, чем с помощью таблицы из 9-ти ячеек?

...? да, вот пример.

<html>

<style>
body { margin: 0; padding: 10px; background-color: #ccf; }
.xtop, .xbottom { display: block; background: transparent; font-size: 1px; }
.xb1, .xb2, .xb3, .xb4 { display: block; overflow: hidden; }
.xb1, .xb2, .xb3 { height: 1px; }
.xb2, .xb3, .xb4, .cont { background: White; border-left: 1px solid #00f; border-right: 1px solid #00f; }
.xb1 { margin:0 5px; background: #00f; }
.xb2 { margin:0 3px; border-width: 0 2px; }
.xb3 { margin:0 2px; }
.xb4 { height: 2px; margin: 0 1px; }
.cont { padding: 8px 10px; }
</style>

<body>
<div class="all"><div class="top"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b></div>
<div class="cont"> <!-- :cool: --> </div>
<div class="bottom"><b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div></div>
</body>

</html>

Mordraug · February 14, 2008

Интересное решение из 1ой картинки тут

Правда там пример рассматривается в контексте PNG ? но сама идея думаю будет понятна, что косается уголков.

BassEast · November 18, 2008

Интересное решение из 1ой картинки тут
Правда там пример рассматривается в контексте PNG ? но сама идея думаю будет понятна, что косается уголков.

Не прокатит "Данное решение не работает в режимах strict и transitional для IE версии 6 и ниже"

doniv · December 21, 2008

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

http://www.artlebedev.ru/tools/technogrett...ounded-corners/

Fenix · April 17, 2009

<html>
<style>
.rtop, .rbottom{
 display:block
 border: 1px solid black;
}

.rtop *, .rbottom *{
 display: block; 
 height: 1px; 
 overflow: hidden;
 background:red;
}
.r1{
 margin: 0 5px
}
.r2{
 margin: 0 3px
}
.r3{
 margin: 0 2px
}
.r4{
 margin: 0 1px; height: 2px}
</style>

<div id="container">

<b class="rtop">
 <b class="r1"></b> 
 <b class="r2"></b> 
 <b class="r3"></b> 
 <b class="r4"></b>
</b>
<div style='background:red;'>nrkjhkhkhkjh</div>

<b class="rbottom">
 <b class="r4"></b> 
 <b class="r3"></b> 
 <b class="r2"></b> 
 <b class="r1"></b>
</b>

</div>

</html>

Можно сделать так чтобы было только нижнии скругления?

base239 · May 8, 2009

Это конечно все интересно, но чтобы было легко и красиво надо доверится профи http://roundpic.com

Great Rash · May 15, 2009

2base239 <-- Видимо этот камрад не читал название темы

Если кому интересно вот помутил на досуге.

HTML:

<div class="container">
	<div class="border1">
		<div class="border2"></div>
		<div class="border3"></div>
		<p>
			text text text text text text 
			text text text text text text 
			text text text text text text 
			text text text text text text 
			text text text text text text
		</p>
	</div>
</div>

CSS:

* {
	margin: 0;
	padding: 0;
	font: 12px Tahoma, Arial, sans-serif;
}

body {
	margin: 10px;
}

p {
	margin: 5px;
}

.container {
	float: left;
	width: 300px;
	margin: 4px 0; /* Compensate negative margin */
	border-left: #f00 1px solid;
	border-right: #f00 1px solid;
}

.border1 {
	position: relative;
	margin: -4px 3px;
	background: #f00;
	border-top: #f00 1px solid;
	border-bottom: #f00 1px solid;
}

.border2 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2px;
	right: -2px;
	border-left: #f00 2px solid;
	border-right: #f00 2px solid;
}

.border3 {
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -3px;
	right: -3px;
	border-left: #f00 1px solid;
	border-right: #f00 1px solid;
}

Проверял в ИЕ8 (в режиме ИЕ7) и в Mozilla Firefox 3.0.10. Интересно будет ли работать в ИЕ6...

Al77 · July 8, 2009

http://www.roundedcornr.com

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

Justnewone · July 8, 2009

http://www.roundedcornr.com
Вот сайт нашел по этой теме. Можно сгенерировать различные типы скруглений, как я понял используются изображения на углоках.

CTRL + колесо на их сайте меня сразу отговорили.

Быколай · September 10, 2009

нашёл рецепт который всем устраивает:

<style>
.big {width: 550px;padding: 5px 15px;}
.big h2{padding: 0;}
.big .e{display:block; position: relative;}
.big .e *{display: block; overflow: hidden; position: relative; z-index: 2; font-size: 0px;}
.big b.e b, .big b.e i, .big b.e u {height: 1px !important; background: green;}   
.big b.e b{margin: 0 5px;}
.big b.e i{margin: 0 3px;}
.big b.e u{margin: 0 2px;}
.big b.e span{margin: 0 1px; height: 2px !important; background: green;}
.big div{background: green; padding: 0 10px;
</style>
<div class="big">
<b class='e'><b></b><i></i><u></u><span></span></b>
<div><h2>Это большая часть статьи </h2>
где-то у неё обязательно должен быть <a href="">to be contied....</a> может на следующей странице???</div>
<b class='e'><span></span><u></u><i></i><b></b></b>
</div>

но одна загвоздка - заголовки (Н) дают полоску основного цвета страницы можно конечно решить добавив после дива ещё закругление:

<div class="big">
<b class='e'><b></b><i></i><u></u><span></span></b>
<div><b class='e'><b></b><i></i><u></u><span></span></b><h2>Это бOльшая часть статьи </h2>
где-то у неё обязательно должен быть <a href="">to be contied....</a> может на следующей странице???</div>
<b class='e'><span></span><u></u><i></i><b></b></b>
</div>

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

Edited September 10, 2009 by Быколай

Great Rash · September 11, 2009

Немеряно элементов!

Быколай · September 11, 2009

Немеряно элементов!

никто не спорит. а как косяк-то с <H..> вылечить?

psywalker · September 12, 2009

нашёл рецепт который всем устраивает:
<style>
.big {width: 550px;padding: 5px 15px;}
.big h2{padding: 0;}
.big .e{display:block; position: relative;}
.big .e *{display: block; overflow: hidden; position: relative; z-index: 2; font-size: 0px;}
.big b.e b, .big b.e i, .big b.e u {height: 1px !important; background: green;}   
.big b.e b{margin: 0 5px;}
.big b.e i{margin: 0 3px;}
.big b.e u{margin: 0 2px;}
.big b.e span{margin: 0 1px; height: 2px !important; background: green;}
.big div{background: green; padding: 0 10px;
</style>
<div class="big">
<b class='e'><b></b><i></i><u></u><span></span></b>
<div><h2>Это большая часть статьи </h2>
где-то у неё обязательно должен быть <a href="">to be contied....</a> может на следующей странице???</div>
<b class='e'><span></span><u></u><i></i><b></b></b>
</div>
но одна загвоздка - заголовки (Н) дают полоску основного цвета страницы можно конечно решить добавив после дива ещё закругление:
<div class="big">
<b class='e'><b></b><i></i><u></u><span></span></b>
<div><b class='e'><b></b><i></i><u></u><span></span></b><h2>Это бOльшая часть статьи </h2>
где-то у неё обязательно должен быть <a href="">to be contied....</a> может на следующей странице???</div>
<b class='e'><span></span><u></u><i></i><b></b></b>
</div>
но по-варварски выходит... какой-то стиль видимо надо заголовку добавить, пробовал и так и эдак, что-то не выходит? можете что-то посоветовать??

1) Закрой ковычки после последнего правила в CSS

2) Способ кал, уголки выглядят некрасиво

Flare · September 12, 2009

Способ кал, уголки выглядят некрасиво

Не говоря уже про то что код засирается до нельзя

Быколай · September 12, 2009

1) Закрой ковычки после последнего правила в CSS
2) Способ кал, уголки выглядят некрасиво

"Кавычками" скобки теперь обзываются? Скопипастил криво. Не в этом дело.

Не говоря уже про то что код засирается до нельзя

ну гавнецом раскидываться все эксперты. вопрос по прежнему открыт.

psywalker · September 12, 2009

"Кавычками" скобки теперь обзываются? Скопипастил криво. Не в этом дело.
ну гавнецом раскидываться все эксперты. вопрос по прежнему открыт.

А по твойму способ отличный?

А что собственно за вопрос, скрин с подробным объяснением в студию

Быколай · September 12, 2009

А по твойму способ отличный?
А что собственно за вопрос, скрин с подробным объяснением в студию

я его не рекламирую и не хвалю. если с памятью в порядке всё моей, вопрос: какое свойство добавить заголовкам, ибо они дают пробел в бэкраунде дива. psywalker, глядя на скрин что-то новое откроется вам?

18 строчек скопипастить и сохранить как .htm - по-моему это во стократ нагляднее. или я неправ??? :rolleyes: оп чём говорит это? вы даже и не глянули как код работает зато говном раскидались. проехали....

зы что тут подробно объяснять-то?

Edited September 12, 2009 by Быколай

psywalker · September 12, 2009

я его не рекламирую и не хвалю. если с памятью в порядке всё моей, вопрос: какое свойство добавить заголовкам, ибо они дают пробел в бэкраунде дива. psywalker, глядя на скрин что-то новое откроется вам?
18 строчек скопипастить и сохранить как .htm - по-моему это во стократ нагляднее. или я неправ??? оп чём говорит это? вы даже и не глянули как код работает зато говном раскидались. проехали....
зы что тут подробно объяснять-то?

Во первых я говном не раскидывался и код копипастил, а переспрашиваю, потому что удивился, что вопрос десткий слишком, не поверил, что имеется ввиду проблема, которая решается просто обычным марджином у заголовка, неужели так трудно просто его поставить? .big h2{ margin: 0;}

Быколай · September 13, 2009

Во первых я говном не раскидывался и код копипастил, а переспрашиваю, потому что удивился, что вопрос десткий слишком, не поверил, что имеется ввиду проблема, которая решается просто обычным марджином у заголовка, неужели так трудно просто его поставить? .big h2{ margin: 0;}

от ведь как. с недесткими вопросами я бы и не сунулся :rolleyes: ... psywalker, благодарю!

psywalker · September 13, 2009

от ведь как. с недесткими вопросами я бы и не сунулся ... psywalker, благодарю!

Да не за что, обращайся, если чё

mendow · February 7, 2010

мой вариант

http://cms4u.ru/html/corner/round.html

критика приветствуется.

verstun · March 10, 2010

http://www.prostosait.com.ua/ тут несколько вариантов решения закругленных уголков.

borinets · March 26, 2010

Powerslave, у меня в блоге есть пару интересных вариантов решения проблемы:

Закругление с использованием картинок

и

Закругление без картинок

в ближайшее время еще выложу неплохой мануал по Nifty Corners Cube - вообще крутая штука =) Там используется java-script и css, зато любой радиус, поддержка градиентов и т.д. - применяемость в 99% случаев.

Sign In

закругление углов средствами CSS HTML

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

memed

61 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