If you've seen any of my previous books, then you will see I have a thing about flowers, and in particular orchids; indeed, the cover on my first book was that of a phalaenopsis, or moth orchid! We'll use a couple of images of orchids as the basis for our next demo, as shown in the screenshot over the page, where it shows our desired effect in motion for the top image.
Tip
If you prefer using Less, then please skip to the end of this demo for an example using Less CSS.
For this demo, we will need a copy of the tutorial1A folder from the code download that accompanies this book; make sure you dig that out before continuing:
Open up a copy of
style.scssfrom thesrcfolder withintutorial1A; let's take a look at its contents.At the top of the file, we have a small handful of variables. These define some of the colors used within the code, and set the
$fullsizevariable to 100%:
The sharp-eyed among you will spot that not all colors have been given a value; the reason...