Nov 19 2012 at 23:44

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

Invite pending

Давно хотел реализовать в каком-нибудь из своих проектов, возможно уже не модный, в силу громыхающего миру 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:

Hubs:

Lumber room