Оформление блока

lindim · April 21, 2011

Добрый день, помогите реализовать оформление блока как на картинке:

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

Doka · April 21, 2011

если не критично - сделайте на css3 (border-radius, -moz-border-radius, -webkit-border-radius, -o-border-radius), но поддерживается это только последними версиями браузеров (и то может не всех).

А так разрежьте блок на три: верхние углы, контент, нижние углы

Edited April 21, 2011 by Doka

Aleksty · April 21, 2011

Попробуйте этот вариант.

Стили доработаете, главное принцип.

Инпуты закругляются также, как и дивы, просто пропишите в стилях, типа этого:

.cen input {

border: 1px solid #ddd;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Вывод даты</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<link href="style.css" rel="stylesheet" type="text/css" media="all">

<style>

#myf {
	position: absolute;
	left: 300px;
	top: 200px;
	width: 300px; 
	height: 200px; 
	font-family: Arial;
	border: 2px solid #ddd;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.top {
	position: relative;
	width: 300px; 
	height: 40px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background: #2ce52c;
	-webkit-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
}
.cen {
	position: relative;
	padding-left: 20px;
	font-size: 11px;
	color: #818181;
	width: 280px; 
	height: 110px;
}
.but {
	position: relative;
	padding-left: 20px;
	font-size: 12px;
	width: 280px; 
	height: 50px;
}
</style>
</head>

<body>
	<form id="myf" name="f" action="....php" method="">
		<div class="top"><br style="line-height: 8px">
			<span style="margin-left: 20px;">Login</span>
		</div>
		<div class="cen"><br style="line-height: 16px">
			<span>Login:</span><br>
			<input name="login" type="text" style="width: 150px;"><br><br style="line-height: 6px">
			<span>Password:</span><br>
			<input name="pass" type="text" style="width: 150px;">
			<input name="knopa" type="submit" value="OK">
		</div>
		<div class="but"><br style="line-height: 8px">
			<a href="#">Register</a>    |    <a href="#">Forgot your Password?</a>
		</div>
	</form>
</body>
</html>

Edited April 21, 2011 by Aleksty

lindim · April 21, 2011

Спасибо, будем пробыват этот вариант.

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

psywalker · April 21, 2011

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

А форма должна быть резиновой по ширине?

Sign In

Оформление блока

Question

lindim

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Doka

Link to comment

Share on other sites

Aleksty

Link to comment

Share on other sites

lindim

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information