Scribd
Upload
2K views36 pages

CSS Use Cases Preview

This document is an introduction to an ebook about learning CSS through use cases. The ebook focuses on specific CSS properties and provides real examples of how they are used, simplified code snippets, and tips for designing interfaces. It will cover popular properties like background and border in depth with examples like buttons, checkboxes, outlines, and more. The goal is to help the reader build a visual understanding of each property and how it works in code.

Uploaded by

Matti Alexandre Duarte
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views36 pages

CSS Use Cases Preview

This document is an introduction to an ebook about learning CSS through use cases. The ebook focuses on specific CSS properties and provides real examples of how they are used, simplified code snippets, and tips for designing interfaces. It will cover popular properties like background and border in depth with examples like buttons, checkboxes, outlines, and more. The goal is to help the reader build a visual understanding of each property and how it works in code.

Uploaded by

Matti Alexandre Duarte
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

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

You might also like