- Теория
- Теория
Испытание: орнамент из сюрикенов
В этой части вы уже строили простой орнамент c помощью линейных градиентов. А теперь вам предстоит пройти испытание и стать настоящим ниндзя в построении узоров на CSS!
В качестве подсказки в коде оставлено заданное свойство background-size и в комментариях приведены используемые значения background-position для частей сюрикенов. Пропорции углов наклона указаны в градусах и кратны 5, размеры колорстопов указаны в пикселях и также кратны 5.
Подсказка: перед началом нарисуйте на бумажке шесть треугольников и объедините их в сюрикен.
Используемые цвета: #000000 и #555555
Решение
Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.
.pattern {
height: 100%;
background-image:
linear-gradient(45deg, #555555 25px, transparent 25px),
linear-gradient(-45deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #555555 25px, transparent 25px),
linear-gradient(225deg, #555555 25px, transparent 25px),
linear-gradient(45deg, #000000 25px, transparent 25px),
linear-gradient(225deg, #000000 25px, transparent 25px);
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px;
background-size: 115px 115px;
background-repeat: repeat;
}
body {
min-width: 565px;
min-height: 298px;
background-image: url("bamboo.jpg");
background-repeat: repeat;
background-position: 0 0;
}
html,
body {
margin: 0;
height: 100%;
}Хотите применять объектно-ориентированный подход и современные возможности ECMAScript для разработки веб-приложений? Хотите уметь применяеть паттерны проектирования? Записывайтесь на профессиональный курс «JavaScript. Архитектура клиентских приложений». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
