Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » 5 техник знакомства с CSS 3
Не нравится(-) 86 Нравится(+)
27-07-2009, 22:34 - tiger (Уроки CSS)
1. Начало.
5 техник знакомства с CSS 3

Прежде чем мы начнем этот учрок, давайте создадим базовые разметки, с чем мы будем работать в течение урока.

Наш 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. Закругленные углы.
5 техник знакомства с CSS 3

Создание элемента с закругленными углами это сплошная нервотрепка. По старинке, вам придется создать много элементов, которые имеют скругленные углы и установить их в качестве фона.

Эту проблему можно легко решить с 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. Закругление отдельных углов.
5 техник знакомства с CSS 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
5 техник знакомства с CSS 3

В настоящее время, вам нужно написать несколько строк CSS для настройки прозрачности элементов. И вновь, CSS 3 упрощает этот процесс.

Этот код легко запомнить, как хорошо, что просто "opacity: value;/* значение*/". Легко, не правда ли?
Наш код будет:
#opacity {
background-color: #000;
opacity: 0.3;
}

5. Тени!
5 техник знакомства с CSS 3

В 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. Изменение размера элементов!
5 техник знакомства с CSS 3

В последней версии 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! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 33162 раз(а) и написали 25 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!