CSS3 Examples

Alfred 86722f1b0f Add attribute selector and web fonts examples. 10 months ago
00-base fafe32bc1d First commit 11 months ago
01-float 08f5e0e8d0 Float divs 10 months ago
02-flexbox 34cdc1aec4 Add flexbox basic examples 10 months ago
03-font-size d86e02be9a Add font size experiments 10 months ago
07-attribute-selector 86722f1b0f Add attribute selector and web fonts examples. 10 months ago
README.md 86722f1b0f Add attribute selector and web fonts examples. 10 months ago

README.md

CSS3 Examples

The 00-base folder is the base for creating new examples, copying it, pasting, and then editing.

How to...

Browser sync

$ (cd 02/; browser-sync -w)

01. Float

Locates divs horizontally, one after the other. When you resize the window, they will be placed on the next line.

02. Flexbox

Flexbox basic examples.

Do not require float display. Flex containers margins do not collapse with margins from their content.

A good article: https://internetingishard.com/html-and-css/flexbox/.

03. Font size

Some examples about how to use font sizes and adapt them for responsiveness.

04

05

06. Pseudo elements and web fonts

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML).

There is also a practice with online fonts. A good article about it: https://css-tricks.com/snippets/css/using-font-face/