1. Начало.Прежде чем мы начнем этот учрок, давайте создадим базовые разметки, с чем мы будем работать в течение урока.
Наш XHTML будут выглядеть так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<DIV id="wrapper">
<DIV id="round"> </DIV>
<DIV id="indie"> </DIV>
<DIV id="opacity"> </DIV>
<DIV id="shadow"> </DIV>
<DIV id="resize">
<IMG src="image.jpg" width="200" height="200" alt="resizable image">
</DIV>
</DIV>
</body>
</html>
В нашем HTML документе, мы создали несколько Div элементы с идентификаторами :wrapper,round,indie,opacity,shadow,resize.
Давайте быстро создадим CSS файл.
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
Как вы можете видеть, мы учитываем все Div теги, ширина и высота каждой 300px. И выравнивать по левой стороне.
2. Закругленные углы.Создание элемента с закругленными углами это сплошная нервотрепка. По старинке, вам придется создать много элементов, которые имеют скругленные углы и установить их в качестве фона.
Эту проблему можно легко решить с CSS3 при помощи функции называемой "пограничный радиус". Мы сначала создаем черный Div элемент, с черными границами.
Мы делаем это таким образом:
#round {
background-color: #000;
border: 1px solid #000;
}
После того как вы создали Div, обновите страницу. Теперь вы должны увидеть черный квадрат Div с шириной и высотой около 300px. Теперь, давайте работать по закруглению углов. Это может быть достигнуто всего лишь в две строчки кода.
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Как вы можете видеть, мы добавили две практически идентичные строки, с той лишь разницей, "-moz" и "-webkit". МОZ-ссылка на Mozilla Firefox, а для Safari / Google chrom использовать префикс-webkit.
Обновите ваш браузер, и вы увидите, черный квадрат с округленными краями - красиво и гладко. Ну, гладкий ... В Firefox и Safari, да, но Хром делает несколько грубее.
3. Закругление отдельных углов.Это очень похоже на то, что мы делали ранее. Он также использует "border-radius", однако мы слегка модифицировали наш код.
Мы делаем это так:
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
Мы добавили "topright" и "bottomright" в наш код, что относится к верхней и нижней правой части Div элемента.
В дополнение, все значения этой переменной, "topright", "bottomright", "bottomleft" и "topleft".
4: Изменение прозрачности путем CSS 3В настоящее время, вам нужно написать несколько строк CSS для настройки прозрачности элементов. И вновь, CSS 3 упрощает этот процесс.
Этот код легко запомнить, как хорошо, что просто "opacity: value;/* значение*/". Легко, не правда ли?
Наш код будет:
#opacity {
background-color: #000;
opacity: 0.3;
}
5. Тени!В Photoshop, создания теней это тривиальная задача . Однако при реализации ее на веб-приложение, вы, вероятно, сохраняете тень, как картинку, а затем используете его в качестве фона. К сожалению, только в Safari и Chrom есть поддержка этой функции в настоящее время.
эта функция реализуется следующим образом :
-webkit-box-shadow: 3px 5px 10px #ccc;
где первое значение - 3px смещение тени по горизонтали
второе значение -5px смещение тени по вертикали
третье значение -13px размах тени
и пятое - #f00 цвет тени
Примечание! чем больше размах тени, тем больше глючит браузер при загрузке страницы.
Наш окончательный код будет выглядеть следующем образом:
#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 13px #f00; /* используются и отрицательные значения*/
}
6. Изменение размера элементов!В последней версии CSS, можно изменить размер элементов. (В настоящее время она работает только в Safari.)
С помощью этого кода, можно будет изменять размер элемента, в правом нижнем углу появиться маленький треугольник.
Его значения "max-width", "max-height", "min-width" и "min-height".
Но мы реализуем изменение размера без ограничений
Код выглядит следующим образом:
#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}
Функции resize присвоено значение both, тоесть эта строка определяет, что элемент может быть изменен как в горизонтальном и вертикальном направлениях.
Заключение.Что вы должны принять с этой статьей? В ближайшие несколько лет, ваша работа станет проще, загрузка веб-страниц будет быстрее, и вам будет оставаться больше времени.
Совместимость : Google Chrom, Safari, Mozilla Firefox
Перевел и отредактировал: Tiger
Источник :
Net Tuts +
Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!
86
