fogli di stile css3 - panoramica - giovanni · 2018-04-13 · introduzione al css versione 3 css3...
TRANSCRIPT
![Page 1: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/1.jpg)
prof. Giovanni Borga
prof. Giovanni Borga
Fablab Design
Fogli di stile CSS3 - panoramica
Sviluppo di siti web
![Page 2: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/2.jpg)
prof. Giovanni Borga
Fablab Design
Introduzione al CSS versione 3
CSS3 è la versione più recente dei fogli di stile.
E’ totalmente compatibile con le versioni precedenti.
Il CSS3 è stato diviso in «moduli» (che comprendono anche tutte le specifiche del CSS2).
Tra le principali novità vi sono i moduli
• TEXT EFFECTS,
• 2D/3D TRANSFORMATIONS,
• ANIMATIONS,
• MULTIPLE COLUMN LAYOUT
• USER INTERFACE.
Altri nuovi elementi sono integrativi nei moduli selectors, box model, background and borders, image values and replaced content. A questo riguardo sono da segnalare in particolare nuovi tipi e forme di bordi e gradienti di sfondo e le ombreggiature.
![Page 3: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/3.jpg)
prof. Giovanni Borga
Fablab Design
Rounded corners
#example1 {border: 2px solid green;border-radius: 25px;
}
#example2 {border: 2px solid green;border-radius: 50px 20px;
}
www.w3schools.com/css/css3_borders.asp
![Page 4: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/4.jpg)
prof. Giovanni Borga
Fablab Design
Border images
www.w3schools.com/css/css3_border_images.asp
![Page 5: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/5.jpg)
prof. Giovanni Borga
Fablab Design
Backgrounds
www.w3schools.com/css/css3_backgrounds.asp
![Page 6: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/6.jpg)
prof. Giovanni Borga
Fablab Design
Gradients
www.w3schools.com/css/css3_gradients.asp
![Page 7: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/7.jpg)
prof. Giovanni Borga
Fablab Design
Shadows
www.w3schools.com/cssref/css3_pr_box-shadow.asp
![Page 8: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/8.jpg)
prof. Giovanni Borga
Fablab Design
Text / Fonts
Proprietà di gestione del testo e possibilità di inserire nuovi fonts.
www.w3schools.com/css/css3_text_effects.asp www.w3schools.com/css/css3_fonts.asp
![Page 9: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/9.jpg)
prof. Giovanni Borga
Fablab Design
Transforms
www.w3schools.com/css/css3_2dtransforms.asp
![Page 10: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/10.jpg)
prof. Giovanni Borga
Fablab Design
Transitions/Animations (regola @keyframes)
Caratteristiche avanzate di «dinamicizzazione» e interattività degli elementi HTML.
/* The animation code */@keyframes example {
0% {background-color: red;}25% {background-color: yellow;}50% {background-color: blue;}100% {background-color: green;}
}
/* The element to apply the animation to */div {
width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;
}
www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
![Page 11: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/11.jpg)
prof. Giovanni Borga
Fablab Design
Border-radius applicato alle immagini
![Page 12: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/12.jpg)
prof. Giovanni Borga
Fablab Design
Personalizzazione dei pulsanti
www.w3schools.com/css/css3_buttons.asp
![Page 13: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/13.jpg)
prof. Giovanni Borga
Fablab Design
User Interface: resizing, outline offset, box sizing
.div1 {width: 300px;height: 100px;border: 1px solid blue;box-sizing: border-box;
}
.div2 {width: 300px;height: 100px;padding: 50px;border: 1px solid red;box-sizing: border-box;
}
Due DIV, pur avendo padding diverso vengono renderizzati 300x100 pxgrazie alla proprietà box-sizing.
www.w3schools.com/css/css3_user_interface.asp
![Page 14: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/14.jpg)
prof. Giovanni Borga
Fablab Design
Media queries
@media screen and (min-width: 480px) {body {
background-color: lightgreen;}
}
Esempio di formattazione del body valida solo per schermi di larghezza superior a 480px:
Altri esempi su: www.w3schools.com/css/css3_mediaqueries_ex.asp
![Page 15: Fogli di stile CSS3 - panoramica - Giovanni · 2018-04-13 · Introduzione al CSS versione 3 CSS3 è la versione più recente dei fogli di stile. E’ totalmente compatibile con le](https://reader033.vdocuments.mx/reader033/viewer/2022042612/5f5d499ce5769d290d74c579/html5/thumbnails/15.jpg)
prof. Giovanni Borga
Fablab Design
Riferimento web per CSS3
Tutorial completi su W3SCHOOLS:
www.w3schools.com/css/css3_intro.asp