Jump to content
  • 0

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

Powerslave

Asked by Powerslave,

 Share

Question

Powerslave Explorer

Powerslave

Posted
Posted

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

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

Ньюансы:

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • Answers 61
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

memed
memed

Нашла хорошую статью (правда css-ос там не ограничивается). Мне она помогла. Может еще кому-нибудь пригодиться.

61 answers to this question

Recommended Posts

  • 0
PacMan Explorer

PacMan

Posted
Posted

css

.rc {
	background: #93aaac;
	padding: 0;
	position: relative;
	overflow: hidden;
	height: 100%;
}
.rc-top,
.rc-top div,
.rc-bot,
.rc-bot div {
	height: 9px;
	line-height: 0;
	background: url(http://www.cn.ru/i/ofstory/rx7.gif) no-repeat left top;
}

.rc-bot {background-position: left -9px;}
.rc-top div {background-position: right -18px;}
.rc-bot div {background-position: right -27px;}

.rc-top,
.rc-bot {
	position: relative;
	z-index: 2;
}

.rc-content {
	position: relative;
	margin: -9px 0;
	z-index: 1;
}

html (background-color: #e7e8da)

<div class="rc">
	<div class="rc-top"><div><!-- --></div></div>
	<div class="rc-content">
		Картинко тут
	</div>
	<div class="rc-bot"><div><!-- --></div></div>
</div>

Link to comment
Share on other sites
  • 0
Kind_74 Explorer

Kind_74

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

1. http://www.phpground.ru/forum/post-46.html.

Чего не получается ни чего с "груглыми углами", прошу прощения за каламбур. Может быть не все базеры это поддерыживают, пробовал в Опере, ИЭ.

Link to comment
Share on other sites
  • 0
Powerslave Explorer

Powerslave

Posted
  • Author
Posted

PacMan, В IE тво? предложение не проходит ((((( вот что у меня получилось - http://sem40.ru/shablon/index.html картинка та, что сразу над фиолетовым блоком.

Эксплорер что то путает с высотами и колбасит

Link to comment
Share on other sites
  • 0
Kind_74 Explorer

Kind_74

Posted
Posted
css

Спасибо все получилось!!!

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

Один вопрос: как получилось что картинка одна ко всем 4ем углам???

Link to comment
Share on other sites
  • 0
PacMan Explorer

PacMan

Posted
Posted
Возможны ли коментарии по выше указанному коду, не совсем в нем разобрался что к чему, чтоб коректировать по своему усмотрению?

Я не знаю что комментировать... Вроде все доступно. Ковыряй, разбирайся.

Преимущество данного способа в том что изменив добавив 1 картинку и css код можно создавать любые блоки с закругленными краями (в том числе с border-ом) как подклассы .rc

Один вопрос: как получилось что картинка одна ко всем 4ем углам???

А вы е? посмотреть не пробовали? :D Это сделано для экономии трафика.

Link to comment
Share on other sites
  • 0
Lazar Explorer

Lazar

Posted
Posted 
<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>

Link to comment
Share on other sites
  • 0
kiD Explorer

kiD

Posted
Posted

выходной неудался.... но как вариант

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; CHARSET=utf-8' />
<title>кнопки закруглые</title>
<style type="text/css">

html, body {
 margin:0px;
 padding:0px; 
 background:#ff0;
}

.smb{
 line-height:6px;
 font-size:32px;
 font-weight:bold;
 color:#000;
}

.cvr{
 position:relative;
 left:4px;
 margin-right:8px;
 height:14px;
 background:#000;
}

.txt{
 position:absolute;
 display:table-cell;
 width:100%;
 text-align:center;
 color:#fff;
 font-size:12px;
 line-height:12px;
}

</style> 
</head>

<body>

<div style='width:110px; margin:10px auto 15px auto;'>
 <div class='smb' style='float:left;'>ο</div>
 <div class='smb' style='float:right;'>ο</div>
 <div class='cvr'></div>
</div>

<div style='width:110px; margin:10px auto 15px auto;'>
 <div class='smb' style='float:left;'>ò</div>
 <div class='smb' style='float:right;'>ó</div>
 <div class='cvr'><span class='txt'><tt>регистрация</tt></span></div>
</div>

</body>
</html>

недостатки:

в ИЕ не работает (что не может не радовать);

применимо для относительно "не высоких" слоев;

отсутствие динамики....

кароче нужно это не пользовать!

Link to comment
Share on other sites
  • 0
Цветков Антон Explorer

Цветков Антон

Posted
Posted

Перенесено из другой темы:

Помню, когда-то читал статейку на этом сайте о создании слоя с отрезанными уголками... Среди комментов, вроде, кто-то выкладывал ссылку на сайт, где подобные "непрямоугольные" рамки делались лишь через CSS. Также кто-то прямо в комментах выкладывал тот код... Как бы там ни было, мне эти примеры не понравились (я говорю не про статейные, а про те, которые используют лишь CSS) - слишком как-то некрасиво и неопрятно выглядит их код, потому от делать нечего стало интересно самому сделать подобное. Результат, на мой взгляд, получился достаточно неплох: http://rid.mirgames.ru/aats/sites/example02/ - прошу оценить... :o

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

Link to comment
Share on other sites
  • 0
Ксеня Explorer

Ксеня

Posted
Posted

Доброе утро!

Вчера я тут видела объяснение, как сделано верхнее меню на данном сайте. Но сегодня оно исчезло:|

Если можно, пожалуйста еще раз объясните. Очень нужно.

Спасибо заранее:)

Link to comment
Share on other sites
  • 0
Jenek Explorer

Jenek

Posted
Posted

Недавно я тоже обращался к этой теме Закругление углов без использования изображений

Потом Dimox развил тему в статье Сглаженные закругленные углы без использования изображений

Ну и нельзя не добавить ссылочку на список из 50+ техник закругления углов, в том числе и без изображений там есть, что выбрать.

Link to comment
Share on other sites
  • 0
alexlut Explorer

alexlut

Posted
Posted

В примерах от PacMan и Lazar div-подложка растягивается на 100% ширины родительского элемента. Как сделать, чтобы она была по ширине всавляемого рисунка?

У меня получилось только когда я засунул всю конструкцию еще в один див с float: left, и то в IE6 не срабатывает...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept