alfred
/
css3.examples
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Activity
CSS3 Examples
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
7 Commits
1 Branch
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
Alfred e1b5624a69 Add some responsiveness to flexbox examples 1 month ago
00-base First commit 2 years ago
01-float Float divs 2 years ago
02-flexbox Add some responsiveness to flexbox examples 1 month ago
03-font-size Add font size experiments 2 years ago
07-attribute-selector Add attribute selector and web fonts examples. 2 years ago
README.md Add attribute selector and web fonts examples. 2 years 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/