fri May 11

Goals

• Google Fonts & Icons
• CSS Positions
• Background & CSS Filter
• Calc()
• CSS animations

Feedback & Recap

WebFonts

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.

Google Web Fonts

Icons

• Font Awesome – The iconic font and CSS toolkit.
• Font Awesome Cheatsheet.
• Icomoon
• The Noun Project
• Glyphsearch

Positions

• Static / Relative / Absolute / Sticky / Fixed
• W3School
• Example 1
• Example 2

Gradient, background images and CSS3 Filter

• Background images
• Background-repeat
• Background-size
• Gradient
• Gradient Generator
• Resource Pattern Design

CSS Filter for images and HTML elements

• Exemple
• W3School

IMG Object-fit

• Object-fit property

Calc is cool

Calc only works with box-sizing.

• Calc theorie

Use Cases for Calc()

• w3school
• Calc – sample
• Calc – fixed header sample
• mediaevent.de

CSS Animations

• W3School
• CSS Tricks
• Examples

Goals

• I did upload the latest Portfolio version on the webserver
• I did upload the latest version of my Personnal Project on the webserver
• I am ready for my short presentation (3-5 minutes maximum)