July 29, 2012 at 18:29

Pure CSS cicada principle

  • Tutorial
The cicada principle allows you to build very long, non-repeating web page backgrounds from a few simple images. It was first described by Alex Walker in April 2011 and quickly gained popularity. A whole gallery of backgrounds made on this principle has appeared on designfestival.com .

In many cases, you can save even more by using gradients. Even taking into account the fact that so far almost all browsers support the property linear-gradientwith only prefixes, the total amount of CSS code needed to create the background is several times smaller than the size of several PNGs with fragments, and, more importantly, it does not require unnecessary server requests. So, Eric Meyer recently gave an example of implementationthe first two backgrounds from Walker's original article in pure CSS. For simple color bars (above), 2.66 Kb of CSS code was needed (with prefixes, without minification and compression). In the future, when all popular browsers get rid of prefixes, 0.59 Kb of code will be enough. In the original example, the images weighed about 6 KB + 3 requests to the server. The second curtain example (below) is even more impressive. Even with prefixes, you get about ten times the gain.

The code for the examples is straightforward and simple. I did not cite the full version with all the prefixes so as not to clutter up the article. Here is the top example:

/* Простые вертикальные полоски */
background-image:
	linear-gradient(   /* первый слой */
		0deg,
		rgba(171,191,196,0.6),
		rgba(171,191,196,8) 50%,			
		rgba(255,0,0,0) 50%,
		rgba(255,0,0,0)
	)
	,
	linear-gradient(    /*  второй слой */
		0deg,
		rgba(203,138,153,0.7),
		rgba(203,138,153,0.7) 49%,
		rgba(203,138,153,0.5) 50%,
		rgba(255,0,0,0) 50%,
		rgba(255,0,0,0)
	)
	,
	linear-gradient(    /* третий слой */
		0deg,
		rgba(220,209,185,0) 0%,
		rgba(220,209,185,0) 20%,
		rgba(220,209,185,0.4) 20%,
		rgba(220,209,185,0.8) 80%,
		rgba(255,0,0,0) 80%,
		rgba(255,0,0,0)
	)
	;
background-size:
	29px 100%,
	37px 100%,
	53px 100%
	;
background-repeat: repeat-x;
height: 200px;

Here is the bottom one:

/* Занавес */
background-image:
	linear-gradient(     /* вертикальный градиент для всего фона */
		90deg,
		rgba(255,128,128,0.25),
		rgba(255,128,128,0) 75%
	)
	,
	linear-gradient(     /* первый слой */
		-1deg,
		transparent,
		transparent 30%,
		#510A0E 35%,
		#510A0E 40%,
		#61100F 43%,
		#B93F3A 50%,
		#4B0408 55%,
		#6A0F18 60%,
		#651015 65%,
		#510A0E 70%,
		#510A0E 75%,
		rgba(255,128,128,0) 80%,
		transparent
	)
	,
	linear-gradient(     /* второй слой */
		2deg,
		#510A0E,
		#510A0E 20%,
		#61100F 25%,
		#B93F3A 40%,
		#4B0408 50%,
		#6A0F18 70%,
		#651015 80%,
		#510A0E 90%,
		#510A0E
	)		
	;                     /* Мейер поленился делать третий слой :(   */
background-size:
	auto,
	300px 100%,
	109px 100%;
background-position: 
background-repeat: repeat-x;
height: 400px;

The first to combine linear gradients and the principle of cicada was invented by Randy Merrill in June 2011. Prior to this, there was a not-so-successful attempt to use radial gradients to generate pseudo-random noise. So far, the widespread use of such a technique is hindered by the backwardness of browsers - in order to make gradients work, you have to pile up mountains of the same code with different prefixes, and to use IE under version 10 in general,  however, if you want to experiment with “cicadients”, here are a few useful links:DXImageTransform.Microsoft.gradient()





Tags:

Also popular now: