Войти
s-lub » Учебники » CSS 3 » Что такое CSS 3 и что в нём изменилось.

Что такое CSS 3 и что в нём изменилось.

Что такое CSS 3 и что в нём изменилось.

CSS 3 – это новый и последний на данным момент стандарт оформления стилей в HTML документе, отличии от предыдущей версии CSS 2.1 его возможности стали значительно шире.

Благодаря новым свойствам и атрибутам стало возможно:

- сглаживать или закруглять углы на различных элементах;

- создавать градиенты;

- более гибко использовать фоны элементов;

- добавлять тени к элементам, фигурам, тексту;

- использовать на сайте новые шрифты, добавляя их в корень сайта;

- создавать анимацию без использования флеш;

- появились новые способы использования старых функций.

Пример:

<style type="text/css">
#wrap {
position:relative;
border:1px #000 solid;
float:left;
width:330px;
height:220px;
margin-right:30px;
background:-webkit-linear-gradient(top,#E567B1,#84004D);
background:-moz-linear-gradient(top,#CB0077,black);
background:-o-linear-gradient(top,#CB0077,black);
box-shadow:3px 3px 10px 1px #000000;
}

#inner {
position:absolute;
top:80px;
left:0px;
padding:10px 0px;
background-color:#dfc51e;
width:330px;
border-radius:50px;
color:white;
font-family:Arial;
text-align:center;
font-size:3em;
text-shadow:2px 2px 0px #000000;
}
</style>

</head>

<body>
<div id="wrap">
<div id="inner">S-lub.ru</div>
</div>

</body>

CSS 3 уже плотно вошло в обиход создания сайтов и начиная с 2015 года все браузеры отлично его воспринимают, поэтому не стоит опасаться, что не все пользователи вашего сайта смогут полноценно пользоваться вашим ресурсом.


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение