Learn CSS
By Use Cases
ebook by Joe Harrison
Introduction
First of all, thanks for picking up a copy - you’re awesome!
I’ve created this ebook to provide a visually engaging manual for
the beautiful language of CSS. The aim is to focus your attention
on this set of properties here, to remove a lot of the inevitable
confusion when learning CSS (there are 520 properties in total).
Here, you’ll see a real life scenario of how a property is used
practically, alongside a simplified code snippet showing you my
cleanest syntax. I also hope the ebook can provide you with a host
of tips on designing elegant user interfaces.
A picture can tell a thousand words, and I strongly advise taking in
the entire ebook before getting stuck in to the source code.
Hopefully after reading, you will have an instant visual association
when you see each property in the code and the CSS world will
become clearer.
Now go break stuff!
Learn CSS By Use Cases
ebook by Joe Harrison
Popular Properties
background
background
Popular Properties
Arguably the most used property in your CSS toolkit and a great
place for us to start. It has to be combined with certain properties to
see its full effect, for example - width and height. As well as making
your components look awesome, backgrounds can also be used to
debug complex CSS layout and overflow issues.
Syntax
As you’ll see here, I generally only use the background shorthand for
images and colors. Anything else I usually add separate longhand
properties, for me it just reads cleaner this way. We will learn more
about longhand and shorthand syntax throught this ebook.
Special Power
As well as accepting hex codes and colors, background or
background-image, can also accept a few functions - such as url()
and linear-gradient(). Most of my examples will showcase gradient
backgrounds, let’s face it they’re just cooler!
Tips
Some HTML elements come with predefined backgrounds such as
buttons and other form controls. These can also be different on
different browsers and devices, so I always advise to set a
background - even if its just transparent.
Buttons
Checkboxes
Outlines
Neumorphism
Skeuomorphism
Stripes
Pie charts
Loaders
Progress bars
Hero banners
Sidebars
Navbars
Global messages
Two-tone badges
Metallic buttons
Cover images
Faded content
Repeating patterns
Learn CSS By Use Cases
ebook by Joe Harrison
Popular Properties
border
border
Popular Properties
Aside from the obvious use case of putting a line around a box,
borders can be used to achieve many cool effects in CSS. In a
similar way to backgrounds, borders can also be useful when
debugging complex CSS issues.
Syntax
Again like background, border comes with it’s own shorthand syntax
as well as a few longhand properties. It’s just personal preference,
but you’ll see from my code here that I often favour the longhand.
Special Power
Being able to set different border for each side of the element,
allows us to create abstract shapes like triangles and circular
spinners. You’ll find a codepen link containing a plethora of CSS
border spinners in the references section of this ebook.
Tips
For borders to work effectively, you ideally need to enable
box-sizing: border-box inside your reset.css file. This makes it easier
to work with borders when using height, width and padding.
Vertical dividers
Horizontal dividers
Spinners
Outline controls
Ticket mockups
Waves
Placeholders
Digital signatures
Status indicators
Validation errors
Triangles
Tabs
