by dr derek peacockvalerianweb.com/tutor/assets/css/css3_progressiveenhancement.pdf · html6...

16
By Dr Derek Peacock

Upload: others

Post on 19-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

By Dr Derek Peacock

Page 2: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

Borders – rounded corners Backgrounds – multiple images Colour – Opacity and gradients Text – Shadows & Web Fonts Box – Shadows Transformations & Transitions Media Queries – size and aspect ratios

Page 3: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

http://html5test.com/

Page 4: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 5: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

http://caniuse.com/

Page 6: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

border-radius

Page 7: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 8: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 9: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

border-radius: 0px 0px 20px 20px;border-radius: 20px;

Page 10: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 11: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 12: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

http://www.colorzilla.com/gradient-editor/

Page 13: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 14: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,
Page 15: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,

header h1{

text-shadow: 2px 2px rgba(0, 0, 0, 0.5);}

Page 16: By Dr Derek Peacockvalerianweb.com/tutor/Assets/CSS/CSS3_ProgressiveEnhancement.pdf · HTML6 JavaScript 735 Flattr Index gdChoices Tables css HTML5 Canvas Demo Search: border-radius,