Спрайты [15/16]
Спрайт — это одно большое изображение, в котором содержится много маленьких, как бы карта изображений. Вот живой пример (эта же картинка выведена на тёмном фоне внизу мини-браузера), который мы будем использовать в задании.
Спрайты используются, чтобы снизить количество запросов на сервер. Каждая маленькая картинка — это отдельный запрос, а чем меньше запросов, тем лучше. Поэтому маленькие картинки «склеивают» в одну большую.
Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.
В спрайты обычно объединяют иконки и различные мелкие декоративные изображения. Кстати, есть сервисы для быстрого создания спрайтов и генерации CSS-кода для них, например, SpritePad.
Файл css53.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Эффекты с повторяющимся фоном</title>
<style>
body {
padding-top: 40px;
}
.block {
height: 70px;
margin: 30px 50px;
background-color: #3498db;
background-repeat: repeat-x;
border-radius: 5px;
box-shadow: 1px 1px 3px #999999;
}
.block1 {
background-image: url("https://htmlacademy.ru/assets/course13/stitch.png");
background-repeat: repeat-x;
background-position:30px 30px;
}
.block2 {
background-image: url("https://htmlacademy.ru/assets/course13/zigzag.png");
background-repeat: repeat-x;
background-position: 0 0;
}
.block3 {
background-image: url("https://htmlacademy.ru/assets/course13/shadow.png");
background-repeat: repeat-x;
background-position: 0 100%;
}
</style>
</head>
<body>
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
</body>
</html>
Испытание: cat Academy [16/16]
В последнем испытании нужно собрать постер группы «CAT Academy». Адреса картинок и небольшая подсказка есть в комментариях в CSS-коде.
Вы можете накладывать фоны друг на друга с помощью вложенных элементов, а можете использовать множественные фоновые изображения.
Множественные фоновые изображения — это очень просто. Берёте знакомое свойство background и перечисляете в нем картинки через запятую. Например:
background:
url("img1.png") no-repeat 0 0,
url("img2.png") repeat-x 50% 50%,
url("img3.png");
В этом примере у элемента будет 3 фоновых картинки. Причем картинка img3.png будет в нижнем слое, а img1.png в верхнем. В множественных фоновых изображениях нельзя задавать фоновый цвет, поэтому он вынесен в отдельный блок.
Файл css55.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: CAT Academy</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.block {
width: 300px;
height: 300px;
background: #3498db;
}
/*.bg {
height: 300px;
}*/
.block1 {
width:300px;
height:300px;
background-image: url("/assets/course13/star.png");
background-position: 0 10px;
background-repeat: repeat-x;
}
.block2 {
background-position: 0 270px;
background-repeat: repeat-x;
}
.block3 {
background:
url("https://htmlacademy.ru/assets/course13/cat_fish_128.png") 90px 145px no-repeat,
url("https://htmlacademy.ru/assets/course13/cat_grumpy_128.png") 15px 125px no-repeat,
url("https://htmlacademy.ru/assets/course13/cat_drunk_128.png") 160px 125px no-repeat,
url("https://htmlacademy.ru/assets/course13/cat_walk_128.png") 80px 80px no-repeat,
url("https://htmlacademy.ru/assets/course13/cat_academy.png") 20px 20px no-repeat;
}
</style>
</head>
<body>
<div class="block">
<div class="bg">
<div class="block1">
<div class="block1 block2">
<div class="block1 block2 block3">
</div><!--end block1 block2 block3-->
</div><!--end block1 block2-->
</div><!--end block1-->
</div>
</div>
</body>
</html>