Cre­ate CSS web pat­terns

Learn how to cre­ate in­ter­est­ing and en­gag­ing pat­terns us­ing the CSS Doo­dle web com­po­nent.

Web Designer - - Contents -

Pat­terns are ev­ery­where. Chances are that you have stum­bled upon them ei­ther in fash­ion, in­te­rior de­sign, food pack­ag­ing or even in na­ture. In ad­di­tion, pat­terns have also been adopted in fron­tend web de­sign. While they are ap­plied in dif­fer­ent sec­tions of web­sites, they have been a pop­u­lar choice for web back­grounds given the unique ap­peal they cre­ate. How­ever, in the past, pat­terns could only be added to web­sites us­ing im­ages. The down­side of re­ly­ing on im­age-based pat­terns is that file sizes in­crease with di­men­sions thereby low­er­ing their suit­abil­ity in re­spon­sive and mo­bile-first de­signs. Fur­ther­more, where fron­tend de­sign­ers lack il­lus­tra­tion skills, up­dat­ing the web­site can take a sig­nif­i­cantly long pe­riod of time.

With CSS Doo­dle, the two chal­lenges can be solved eas­ily by sim­ply re­ly­ing on CSS to cre­ate com­plex yet ap­peal­ing pat­terns. Its us­age is pre­ferred to re­liance on Jpeg-based im­ages due to its light­weight na­ture. The web com­po­nent gen­er­ates a grid of ‘divs’ by the rules (plain CSS) in­side it. As such, you can eas­ily ma­nip­u­late those cells us­ing CSS to come up with a graphic pat­tern or an an­i­mated graph. The only limit is the limit of CSS it­self. In ad­di­tion, back­grounds can be changed eas­ily with only a few lines of code, and in­ter­ac­tiv­ity en­hanced by adding Javascript.

1. Get­ting started

Start off by cre­at­ing a folder named ‘csst­doo­dle’ on your desk­top to store the tu­to­rial files. Then cre­ate two ad­di­tional fold­ers within it: ‘css’ to store the styling files, and ‘js’ to store the Javascript files. HTML files will be stored in the root folder.

2. Cre­ate the HTML page struc­ture

Open your code edi­tor and cre­ate an ‘in­dex.html’ doc­u­ment to con­tain markup for the main web page. Be­gin by cre­at­ing the ba­sic struc­ture and give a suit­able ti­tle to the page.

<! DOCTYPE html>

<html lang=”en”>


<meta charset=”utf-8”>

<ti­tle>css Doo­dle </ti­tle>

</head> <body> </body> </html>

3. Add con­tent to the HTML struc­ture

Since the fo­cus is cre­at­ing a pat­tern in the body of the page, we will add the CSS code in this sec­tion. Be­gin by adding the HTML el­e­ment ‘css-doo­dle’, which will con­tain all the CSS code that dic­tates the na­ture of the pat­terns cre­ated. The grid size is pro­por­tional to the size of pat­terns cre­ated, as such, higher val­ues trans­late to more grids while the in­verse is true. A grid size of ‘8’ is ad­e­quate for the tu­to­rial.


< css-doo­dle grid =”8”> </css-doo­dle>


4. Style the web page — link­ing the CSS file

Link the CSS stylesheet to the HTML doc­u­ment. The styles are use­ful for cre­at­ing both the body and pat­tern styles. Cre­ate a link to this file in your HTML doc­u­ment by adding the fol­low­ing code in the head sec­tion:

<link rel=”stylesheet” href=”css/styles.css” >

5. Style the web page — style the body

Be­gin by set­ting the mar­gin to ‘0’ for all el­e­ments in CSS. This en­sures the de­sign re­mains con­sis­tent through­out. Next, add an over­flow with the hid­den pa­ram­e­ter. This cuts off any con­tent that breaks out of its bounds. Fur­ther, set the page height to ‘100vh’.

*{ mar­gin:0; over­flow: hid­den; height: 100vh; }

6. Link­ing the CSS Doo­dle script

In or­der to utilise the com­po­nent, it is im­por­tant to in­clude it in the body sec­tion. To do this, ei­ther down­load it from Github and man­u­ally link it to the HTML file. Al­ter­na­tively, add it from CDNJS by the fol­low­ing code. At this point, also link the Javascript file: <body>

< css-doo­dle grid =”8”>


<script src=’https://s3-us-west-2.ama­zon­aws. com/­dle.min.js’> </script>

<script src=”js/in­dex.js”></script>


Since we are yet to add any pat­terns in the css-doo­dle el­e­ment, your page should be blank

7. Set­ting up the pat­tern

To start set­ting up the pat­tern, first spec­ify its view­port di­men­sions us­ing VMAX. Next, add a pur­ple back­ground us­ing ‘back­ground’ and spec­ify hid­den over­flow to cut off con­tent that breaks out of its bound.

<body> < css-doo­dle grid =”8”> :doo­dle {

size: 100vmax; back­ground: #673AB7; over­flow: hid­den;




The page should ren­der as fol­lows:

8. Adding pat­tern shapes

The ‘clip-path’ CSS prop­erty cre­ates a clip­ping re­gion that de­fines what part of an el­e­ment is to be dis­played. On the other hand, ‘@shape’ cre­ates a shape pat­tern on the can­vas such as a rec­tan­gle, rhom­bus, cir­cle, clover, bud, etc. Thus, the two prop­er­ties are used in cre­at­ing a five-sided clover us­ing the code be­low:

:doo­dle { clip-path: @shape

(clover, 5);


Though the shape has been added, it is cur­rently not vis­i­ble as we are yet to spec­ify its colour prop­er­ties. Your page should re­main pur­ple.

9. Adding the pat­tern colour

Next, change the colour of the pat­tern to a light shade us­ing the HSLA prop­erty. Hue, Sat­u­ra­tion, Light­ness Al­pha (HSLA) de­fines colour based on these four prop­er­ties. Hue de­fines the de­gree of colour (0 to 360) with 0 and 360 as red. Sat­u­ra­tion de­fines its sat­u­ra­tion (0% shade of grey, 100% full colour) while Light­ness de­fines the light­ness (0% black, 100% white). Fur­ther, Al­pha de­fines a colour's opac­ity (0.0 fully trans­par­ent, 1.0 fully opaque).

//Copy the code be­low for the color// back­ground: hsla (


(300 + 3 * @in­dex()), 75%, 70%, @rand(.8)


‘@calc’ is a CSS Doo­dle func­tion that eval­u­ates cal­cu­la­tions while ‘@in­dex’ ex­poses the in­dex of each grid cell to the spec­i­fied colour. ‘@rand’ is a CSS ran­dom gen­er­a­tor func­tion that ran­domises the opac­ity of the shapes used. As such, the back­ground colour re­sults from the ad­di­tion of ‘300’ to the prod­uct of each in­dex by ‘3’ (sim­ply com­putes a unique sat­u­ra­tion colour). Ren­der the page.

10. Adding tran­si­tion

The ‘tran­si­tion’ prop­erty en­ables prop­erty el­e­ments to change value over a spec­i­fied pe­riod of time, an­i­mat­ing the prop­erty changes rather than hav­ing them oc­cur im­me­di­ately. In this par­tic­u­lar case, spec­ify a 0.2-sec­ond ease to oc­cur ran­domly. tran­si­tion: .2s ease @rand(300ms);

Re­fresh the page and ob­serve the tran­si­tion change in the oc­cur­rence of the pat­tern shapes. .


11. Scale them to dif­fer­ent sizes

The cur­rent pat­tern shapes are all sized equally. How­ever, to add a unique ap­peal, trans­form them into di­verse sizes by us­ing the ‘trans­form’ prop­erty. Be­gin by spec­i­fy­ing the dif­fer­ent sizes of the pat­terns us­ing the ‘scale ()’ func­tion. trans­form: scale (@rand (.2, 1.5)


12. Trans­late its po­si­tion

Next, trans­late the pat­tern us­ing the ‘trans­late3d ()’ func­tion, which po­si­tions el­e­ments in 3D space. Note: only the ‘x’ and ‘y’ po­si­tions are of in­ter­est in this tu­to­rial. These are ran­domly gen­er­ated by the ‘@rand’ func­tion thereby cre­at­ing ran­dom po­si­tions on the can­vas. trans­late3d (

@rand (-50%, 50%),

@rand (-50%, 50%),



Ren­der your page. Then re­fresh it a few times to ob­serve the si­mul­ta­ne­ous change in po­si­tion, colour and size of the pat­tern.

13. Adding an­i­ma­tion

Next, let's de­fine how the pat­tern should an­i­mate. Though hav­ing dif­fer­ent-sized pat­terns cre­ates a visual ap­peal, en­hance it fur­ther by adding an­i­ma­tion to each in­di­vid­ual grid cell. Add We­bkit an­i­ma­tion ‘10s’, and at an opac­ity of ‘0.2’, to each cell class in the stylesheet. .cell { -we­bkit-an­i­ma­tion: ro­tate 10s in­fi­nite; an­i­ma­tion: ro­tate 10s in­fi­nite; opac­ity:0.2; }

Fur­ther, spec­ify the ro­ta­tion of the keyframes in the stylesheet. Add the code be­low:

.cell {

@-we­bkit-keyframes ro­tate {

0% {

-we­bkit-trans­form: ro­tate(0deg); trans­form: ro­tate(0deg) }

100% {

-we­bkit-trans­form: ro­tate(360deg); trans­form: ro­tate(360deg) } }

@keyframes ro­tate {

0% {

-we­bkit-trans­form: ro­tate(0deg); trans­form: ro­tate(0deg) }

100% {

-we­bkit-trans­form: ro­tate(360deg); trans­form: ro­tate(360deg)



Now ren­der the page.

IN­TER­ACT­ING WITH THE COM­PLETE PAT­TERN 14. Adding Javascript in­ter­ac­tiv­ity

So far, we are yet to add con­tent to the Javascript file cre­ated ear­lier. This is be­cause, Javascript func­tion­al­ity in the tu­to­rial is only for ex­tra en­hance­ments, as op­posed to cre­at­ing the ac­tual pat­terns. None­the­less, add a Javascript func­tion that re­freshes the pat­tern each time the page is loaded. Add the code be­low: doc­u­­de­ventlis­tener (‘mouse­move’, func­tion(e) { if (e.tar­get.matches(‘css-doo­dle’)) {

e.tar­­fresh (); } })

The code re­freshes the pat­tern once the page is reloaded. Try out and ob­serve.

15. Chang­ing shapes

Now that the pat­tern is com­plete and ren­dered onto the page, change some of its set­tings in or­der to un­der­stand how to im­prove it fur­ther. First, change the shape to a three-sided bud. Sim­ply amend the code spec­i­fied by the ‘shape’ prop­erty as be­low: clip-path: @shape (bud, 3);

Re­sults should ap­pear as shown.

16. Chang­ing grid size

Next, in­crease the grid size from the cur­rent ‘8’ to, say, ‘13’. Ob­serve the change that oc­curs in re­la­tion to the pat­tern. Mak­ing such changes can help you de­cide on the most ap­pro­pri­ate grid size to use for your project. grid=”13”

Re­sults should ap­pear as shown.

17. Chang­ing back­ground color

Fi­nally, ex­per­i­ment and change the back­ground colour and that of the pat­tern. En­sure ob­serv­able dif­fer­ences can be noted in both in­stances.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.