Задание 2. Создание примера для текстовых эффектов в css3
Ниже приведен пример, демонстрирующий применение свойства word-wrap.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p.test
{
width:15em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">
Клавиша запаааааааааааааааааааааааааааааааааала.
</p>
</body>
</html>
Рис. 12.4. Демонстрация свойства word-wrap.
Задание 3. Создание примера для css3 Transform
Приведенный ниже код демонстрирует различные виды трансформаций текстовых блоков.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:green;
border:1px solid black;
}
div#div2
{
position: absolute; left: 50px; top: 50px;
transform:translate(150px,50px);
-ms-transform:translate(150px,50px); /* IE 9 */
}
div#div3
{
position: absolute; left: 400px; top: 50px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
}
div#div4
{
position: absolute; left: 600px; top: 150px;
transform:scale(1.5,3);
-ms-transform:scale(1.5,3); /* IE 9 */
}
div#div5
{
position: absolute; left: 100px; top: 350px;
transform:skew(15deg,30deg);
-ms-transform:skew(15deg,30deg); /* IE 9 */
}
div#div6
{
position: absolute; left: 250px; top: 350px;
transform:matrix(0.3,0.5,-0.5,0.3,0,0);
-ms-transform:matrix(0.9,0.5,-0.5,0.9,0,0); /* IE 9 */
}
</style>
</head>
<body>
<div>Исходный элемент DIV</div>
<div id="div2">Смещение</div>
<div id="div3">Поворот</div>
<div id="div4">Масштабирование</div>
<div id="div5">Сдвиг</div>
<div id="div6">Матричное преобразование</div>
</body>
</html>
Результат приведен на рис. 12.5.
Рис. 12.5. Демонстрация свойства Transform.
Контрольные задания
Опишите с помощью CSS3 текстовый блок с некоторыми значениями свойств border-radius, box-shadow, background и -ms-transform: rotate.
Проверьте как будет выглядеть результат в веб-браузере.