Рисунки на чистом CSS (single div)

Вы уверены, что все знаете о таких простых CSS-свойствах, как «box-shadow» и «background»? А, может, с их помощью вы можете нарисовать целую картину? У нас получилось даже 4 прикольных картинки на чистом CSS.

Недавно мы наткнулись на картинки, которые, как утверждалось, выполнены на чистом CSS с помощью всего лишь одного блока. Сначала мы не поверили, что возможно сделать настолько красивые картинки только одними стилями. Нас очень заинтересовала данная тема, поэтому мы решили углубить свои познания в background-ах и box-shadow-ах.

* Примеры в данной статье могут неадекватно отображаться в старых версиях браузеров.

Наша первая проба выглядит так:

 

Идея состоит в том, чтобы стилизовать один div так, чтобы получить законченное изображение. Для этого удобно использовать такие возможности CSS, как multiple background и box-shadow. А чтобы не потеряться в стилях, мы использовали препроцессор Less и его фичу «слияния».

Слияния или merge позволяют дописывать свойствам через запятую или пробел дополнительные значения. В нашем случае это имело смысл. Посмотрите пример:

.background(@param){
	background+: @param;
}

.insta{
	width: 300px;
	height: 300px;
	position: relative;
	overflow: hidden;
	border-radius: 20%;
	.background(radial-gradient(circle , white 19%,black 19%,
		black 26%,#fff 26%,#ffffff 33%,transparent 33%, 
		transparent 100%));
	.background(linear-gradient(black 0%, black 34%,white 34%, 
		white 38%,black 38%, black 100%));
	}
	
.insta:before{
	content: '';
	width: 20%;
	height: 20%;
	border-radius: 20%;
	background: white;
	position: absolute;
	top: 7%;
	right: 8%;
	}
	
.insta:after{
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	width: 18%;
	height: 25%;
	.background(linear-gradient(to right,white 0%, white 25%, 
		black 25%,black 37.5%,white 37.5%,white 62.5%,
		black 62.5%,black 75%,white 75%, white 100%));
	}

В блоке .insta мы использовали слияние .background. Это удобно, потому что можно легко добавить или исключить еще один фон, легко менять их местами, еще можно комментировать, чтобы не забыть для чего фон предназначался.

При компилировании получили такую строку в CSS:

 background: radial-gradient(circle, #fff 19%, #000 19%, #000 26%, 
	#fff 26%, #fff 33%, transparent 33%, transparent 100%), 
	linear-gradient(#000 0%, #000 34%, #fff 34%, #fff 38%, 
	#000 38%, #000 100%);

Согласитесь, что такая строка не очень проста для понимания, а тут всего 2 фона.

Для простой иконки это не критично, но вот для полноценной картинки очень даже. Например, для рисования глаза (пример ниже) мы применили одновременно 20 фонов.

Если все размеры указывать в процентах, то можно получить масштабируемую иконку. А вот и сам результат (подвигайте ползунок для масштабирования):

 
 

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

 
 

Не знаем как вас, а нас такие возможности CSS очень впечатлили. Мы вдохновились данной идеей, увидев эти сайты: "a single div", "one div"