Современные CSS формы

Автор admin мая 14, 2010 Просмотров: 636

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

Example


60c1cbd5

HTML


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Shapes</title>

<!--[if IE]>
<style>
.arrow { top: 100%; }
</style>
<![endif]-->

</head>
<body>
<div id="container">
<h1> My Heading <span class="arrow"></span> </h1>
</div>
</body>
</html>

CSS

#container {
background: #666;
margin: auto;
width: 500px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}

h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;

-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

color: #454545;
text-shadow: 0 1px 0 white;
}

.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
Немножко объясню, что здесь написано:
h1 — делается серая полосочка и выдвигаем немножко из главной области страницы(margin-left: -20px;), также на ней делаем при помощи функция -moz-linear-gradient и -webkit-gradient градиент. И придаем нашему элементу тени используя функции- -moz-box-shadow , -webkit-box-shadow. Дальше нам нужно сделать угол, он делается использованием с помощью border. Нам нужно только использовать border-left и border — top, которые делаю треугольник. Потом этот треугольник ставим в нужное нам место. Вот и все. Всего несколько минут и готово, заметьте без использования изображения.
Исходник
Demo

Мой блог находят по следующим фразам


«
»
You can leave a response, or trackback from your own site.
  • http://www.websovet.com/ Игорь Квентор

    Очень интересный эффект. Допишите только, пожалуйста, HTML код. У тэга span пропустили class="arrow"

  • admin

    И правда забыл. Спасибо что внимательно читаете.

RSS FeedSubscribe
Follow UsFollow Us