Этот урок CSS, расскажет Вам об одном из самых простых и удобных способов создания закруглённых углов.
Итак, попробуем сделать...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:
Цитата:
.b1, .b2, .b3, .b4 {
display:block; /* Задание отображения границ и углов */
overflow:hidden; /* Задание отображения границ и углов */
}
.b1, .b2, .b3 {
height:1px; /* Задание высоты границ и углов */
}
.b2, .b3, .b4 {
background:#ffedbe; /* Задание цвета фона в пределах закругления */
border-left:1px solid #00346e; /* Задание стилей левых углов */
border-right:1px solid #00346e; /* Задание стилей правых углов */
}
.b1 {
margin:0 5px; /* Задание отступов */
background:#00346e; /* Задание цвета верхней и нижней границ */
}
.b2 {
margin:0 3px; /* Задание отступов */
border-width:0 2px; /* Задание ширины границы */
}
.b3 {
margin:0 2px; /* Задание отступов */
}
.b4 {
height:2px; /* Задание высоты границ и углов */
margin:0 1px; /* Задание отступов */
}
.content {
background:#ffedbe; /* Задание общего фона */
border:0 solid #00346e; /* Задание стилей границ */
border-width:0 1px; /* Задание ширины границ */
}
|
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
Цитата:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<span class="b1"></span><span class="b2"></span><span class="b3"></span><span class="b4"></span>
<div class="content">
Содержание блока
</div>
<span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span>
</body>
</html>
|
4) Сохраняем и смотрим, что получилось.
Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx
--------------------------------------------------------------------
В этом уроке, я расскажу Вам, как на CSS создать простое выпадающее меню.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:
Цитата:
#menu,
#menu ul {
border: 1px solid #b4b4b4;
background: #003a63;
float: left;
width: 300px;
}
#menu li {
float: left;
position: relative;
background: #003a63;
}
#menu a {
color: #fff;
text-decoration: none;
display: block;
width: 125px;
padding: 3px 10px;
}
#menu a:hover {
color: #000;
background-color: #9ad5ff;
}
#menu li:hover,
#menu li.jshover {
background-color: #9ad5ff;
}
#menu li ul {
display: none;
position: absolute;
padding: 5px 2px;
width: 140px;
}
#menu li li a {
width: 118px;
}
#menu li:hover ul,
#menu li.jshover ul {
background-color: #003a63;
display: block;
}
#menu li:hover li ul,
#menu li.jshover li ul {
display: none;
width: 140px;
}
#menu li:hover li:hover ul,
#menu li.jshover li.jshover ul {
display: block;
}
|
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
Цитата:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>
</head>
<body>
<ul id="menu">
<li><a href="/">Главная</a></li>
<li><a href="/">Меню</a>
<ul>
<li><a href="/">Пункт 1</a></li>
<li><a href="/">Пункт 2</a></li>
<li><a href="/">Пункт 3</a></li>
</ul>
</li>
</ul>
</body>
|
Заметим, что наше меню нормально работает во всех браузерах, включая IE6, который поддерживает параметр hover только для ссылок. Это так, благодаря следующему скрипту в нашем коде:
Цитата:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>
|
4) Сохраняем и смотрим, что получилось.
------------------------------------------------------------------
В этом уроке я расскажду Вам о том, как при помощи CSS создать текст с фоновым градиентом.
Итак, приступим...
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код:
Цитата:
h1 {
font: bold 330%/100%;
font-size: 30px;
position: relative;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 30px;
}
|
Для создания открывающих и закрывающих кавычек нам понадобятся 1 рисунок - градиент.
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
Цитата:
<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<h1><span></span>ГРАДИЕНТНЫЙ ТЕКСТ</h1>
</body>
</html>
|
4) Сохраняем и смотрим, что получилось.
Цитата:
Пояснения к коду:
width: 100%; - Задание ширины поля
position: absolute;
position: relative; - задание положение градиентного блока и текста.
|
В этом методе создания градиентного текста есть ряд недостатков. Главным по моему мнению является тот - что это не работает в IE6. Поправим:
Добавьте между тегами head такой код:
Цитата:
<!--[if lt IE 6]>
<style>
h1 span {
background: none;
filter: progid XImageTransform.Microsoft.AlphaImageLoader (src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
|
Вторым недостатком является то, что этот метод сильно завистит от цвета фона и текста. Это придётся каждый раз учитывать при создании.
Ну вот, это пока все, если еще найду уроки то обязательно накидаю!!!