Волнистый край без использования графики



Давно хотел реализовать в каком-нибудь из своих проектов, возможно уже не модный, в силу громыхающего миру Windows8 UI, дизайн а-ля subtlepatterns.com. Одним из элементов желаемого является волнистый край блочных элементов. И само собой, необходима кроссбраузерность (в разумных пределах) и никакой вспомогательной графики, вроде border-image.


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

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

Заранее извиняюсь, если не дай бог велосипед.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>
		</title>

		<meta http-equiv="content-type" content="text/html; charset=windows-1251">

		<style>
			body {
				background: #eee;
				font-family: Arial, Tahoma, Vernada;
			}
			h1 {
				font-size: 28px;
			}
			.main {
				background: #302828;
				margin: 0 auto;
				width: 1000px;
				height: 155px;
				color: #888;
				font-size: 12px;
			}
			.main-text {
				text-align: center;
			}
			.header {
				margin: 0 auto;
				width: 1000px;
				height: 20px;
			}
			.waves1 {
				background: #302828;
				width: 10px;
				height: 10px;
				border-radius: 5px 5px 0 0/3px 3px 0 0;
				float: left;
				margin-top: 18px;
			}
			.waves2 {
				background: #eee;
				width: 10px;
				height: 10px;
				border-radius: 0 0 5px 5px/0 0 3px 3px;
				float: left;
				margin-top: 12px;
			}
			.footer {
				margin: 0 auto;
				width: 1000px;
				height: 20px;
			}
			.waves3 {
				background: #302828;
				width: 10px;
				height: 10px;
				border-radius: 0 0 5px 5px/0 0 3px 3px;
				float: left;
				margin-top: -8px;
			}
			.waves4 {
				background: #eee;
				width: 10px;
				height: 10px;
				border-radius: 5px 5px 0 0/3px 3px 0 0;
				float: left;
				margin-top: -2px;
			}
		</style>
	</head>
	<body>

		<div class="header">
			<?php
				$x = 1;
				while ($x <= 50) {
					echo "<div class='waves1'></div><div class='waves2'></div>";
					$x = $x + 1;
				}
			?>
		</div>
		<div class="main">
			<div class="main-text">
				<br>
				<h1>Волнистый край на CSS3</h1><br>
				Рисуем волнистые края на CSS3 без использования графики<br>
			</div>
		</div>
		<div class="footer">
			<?php
				$x = 1;
				while ($x <= 50) {
					echo "<div class='waves3'></div><div class='waves4'></div>";
					$x = $x + 1;
				}
			?>
		</div>
	</body>
</html>
Tags:
html. css3, web-дизайн

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.