как мога да направя див с заоблени ръбове, само с изполване

Y

ystefanov

Registered
на ЦСС и хтмл?

Искам да направя, трите вертикални дива от този сайт

http://www.campaigner.com

някой може ли да ми даде някакъв примерен код?
 
Код: 
<html>
<head>
	<title>Div със заоблени ъгли</title>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
	<style type="text/css">
		#div {
		width: 385px;
		height: auto;
		margin-left: 50px;
		margin-top: 50px;
		}
		#div-top {
		background: url(top.png);
		background-repeat: no-repeat;
		width: 385px;
		height: 13px;
		}
		#div-middle {
		background: url(middle.png);
		background-repeat: repeat-y;
		width: 385px;
		height: auto;
		}
		#div-bottom {
		background: url(bottom.png);
		background-repeat: no-repeat;
		width: 385px;
		height: 16px;
		}
		#div-text {
		padding-left: 10px;
		padding-right: 10px;
		}
	</style>
</head>
<body>
	<div id="div">
		<div id="div-top"></div>
		<div id="div-middle">
			<div id="div-text">Тук е текста, който искаш да се съдържа в самия див. Можеш да напишеш абсолютно всичко, което ти дойде на ума и може да сложиш
			абсолютно всичко :D</div>
		</div>
		<div id="div-bottom"></div>
	</div>
</body>
</html>

Eто ти и линк към архива с картинките и sample-то :] Свали

Това е най-простото div-че с заоблени ъгли, в което само #div-middle се разтяга според обема на информацията, която има в него. Можеш също така да направиш целия див с изцяло динамична ширита или височина... Но общо взето това е принципа...

А иначе картинките със заоблени ъгли си ги правиш с photoshop, като при създаването на картинката избираш background contents: Transparent и след това си направиш формата с Rounded Rectangle Tool :]
 
Слагаш му в стила:
Код: 
#div {
width: ?px;
height ?px;
backgorund: #000;
-moz-border-radius: 3px;
}
-moz-border-radius ти върши цялата работа за заоблянето.
Пикселите можеш да си ги настроиш колкото искаш.
 
Dizasterr каза:
Слагаш му в стила:
Код: 
#div {
width: ?px;
height ?px;
backgorund: #000;
-moz-border-radius: 3px;
}
-moz-border-radius ти върши цялата работа за заоблянето.
Пикселите можеш да си ги настроиш колкото искаш.
Увеличете...
Мисля че е добре да добавиш и още 1-2 неща като например:
Това е CSS 3 следователно не работи под всички браузъри да не говорим за ИЕ6 там дори ЦСС 2 куца и ще си имаш проблеми с браузърите. Има и вариант с JS мисля че виждал съм, но пак куцаше под някои ИЕ-та.
 
Можеш също да използваш и
Код: 
-webkit-border-radius: 10px;
. А за това, което каза в предишния пост е вярно. Това действа само при някои браузъри.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе