Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Опять очередной урок, который непосредственно связан с CSS3. Если говорить правду, то стандарты постепенно изменились, а точнее эволюционировали в лучшую сторону. Посмотрим на примере нашего урока, как можно создать с легкостью буклет.
Начнем наш урок с написания CSS. Для этого нам потребуется создать файл с расширением *.CSS и вставить в него код. Он довольно небольшой и будет выглядеть следующим образом (заметим, что если css пишем в <head>, то мы заключаем его между тегами <style type=”text/css”>…</style>).
<style type="text/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;
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;
}
</style>
<!--[if IE]>
<style>
.arrow { top: 100%; }
</style>
< ![endif]-->
Вторым шагом будет являться вставка HTML-кода в тело документа, т.е. заключим между тегами <body>…</body>. Он у нас получается совсем небольшим, что очень удобно.
<div id="container">
<h1> Заголовок <span class="arrow"></span> </h1>
<b>Ваш текст может находиться в данной области!</b>
</div>
Буклет на CSS3 (12.6 KB, 34 скачиваний)
Файл залит 27.07.2010 в 19:06
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Шрифт трудно читается у вас на блоге.