Categorie
Bootstrap Frameworks

{BOOTSTRAP} Gestire il layout con il Grid System

Gestione del layout Bootstrap ci fornisce una potente griglia mobile-first flexbox basato su un sistema a 12 colonne e dozzine di classi predefinite per creare e definire il layout di una pagina web.La griglia di Bootstrap è predisposta per la creazione di layout fluidi responsive.Questo sistema di griglia è costruito con su Flexbox CSS ed è completamente […]

Categorie
Bootstrap Frameworks

{BOOTSTRAP} Cos’è Bootstrap, struttura e installazione

Introduzione a Bootstrap Bootstrap è un Framework Toolkit front-end, il più utilizzato, nato nel 2010 da Twitter per meno delgi sviluppatori Mark Otto e Jacob Thornton.Con Bootstrap puoi sviluppare interfacce web, attraverso template HTML preconfezionati responsive. Si tratta del progetto più popolare sulla piattaforma GitHub, con oltre 58.000 star e più di 20.000 fork.Su un […]

Categorie
CSS

{CSS} Flexbox Layout

Cos’è CSS Flexbox Layout Risorse sul webhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox Il modulo CSS Flexbox layout, chiamata anche semplicemente Flexbox, è un nuovo standard che aggiorna la CSS Flexible Box Layout. Si tratta di un layout unidimensionale, sta indicare che, gestisce il layout una dimensione per volta, le righe distintamente dalle colonne. Un modello differente, bidimensionale, è CSS Grid Layout […]

Categorie
CSS

{CSS} CSS Grid Layout

Risorse sul web https://www.w3schools.com/css/css_grid.asphttps://www.ionos.it/digitalguide/siti-web/creare-siti/css-grid/ Cos’è CSS Grid Layout Il modulo CSS Grid Layout, indubbiamente il più utilizzato, offre un sistema di layout basato su griglia, con righe e colonne, che semplifica la progettazione di pagine Web. Doversamente dal Felxbox layout, siamo di fronte ad un layout bidimensionale, ovvero, che gestisce due dimensioni contemporaneamente (colonne e […]

Categorie
CSS

{CSS} Flexible box Layout

Cos’è CSS Flexible box Layout Avvertenza: Il modulo CSS flessibile layout originale è stato sostituito da uno standard più recente attualmente risulta ancora supportato attraverso i prefissi -moz- e -webkit-. Vedere flexbox per informazioni sullo standard attuale. Risorse dal web:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layouthttps://www.html.it/pag/19465/flexible-box-layout/ Un’altro modulo utile della specifica CSS3 è senza dubbio il Flexible layout module (detto anche flexbox). Questo modulo ci consente di […]

Categorie
CSS

{CSS} Multi-column Layout

Cos’è CSS Multi-Column Layout Risorse dal web:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns#related_css_fragmentation_propertieshttps://www.html.it/pag/19464/layout-multicolonna/ CSS Multi-Column Layout  è un modulo di CSS che aggiunge il supporto per i layout a più colonne.  Fonisce un gruppo di proprietà che rendono possibile la dislocazione del contenuto di un box-contenitore su più colonne. CODICE HTML Note: Lo ritroveremo usarto molto spesso sui <div> <section> o <article>. Principali proprietà column-width suddivide […]

Categorie
CSS

{CSS3} Le pseudo-classi strutturali

Attraverso le pseudo-classi strutturali abbiamo la possibilità di selezionare  gli elementi in base alla loro relazione :first-child La pseudo-classe :first-child corrisponde al primo figlio dell’elemento padre CODICE HTML CODICE CSS :last-child La pseudo-classe :last-child seleziona l’ultimo figlio dell’elemento padre :only-child La pseudo-classe :only-child corrisponde ad un elemento il cui oggetto padre non ha figli o più semplicemente corrisponde all’elemento che è […]

Categorie
CSS

{CCS} Le animazioni

Direttiva @-keyframes E’ possibile animare un elemento html attraverso la direttiva @-keyframes messa a disposizione da CSS3 I tre elementi necessari per creare un animazione Per creare un animazione avremo bisogno: 1. Elemento html da animare ( e se lo si desidera delle proprietà css associate inizialmente ad esso)2. Creare un blocco di animazione 3. […]

Categorie
CSS

{CSS} Le trasformazioni

Il modulo CSS 2D Transforms incluso nella specifica CSS3 ci consente di effettuare delle trasformazioni su un oggetto presente nella pagina.Le trasformazioni possono anche essere combinate tra loro possiamo quindi  ruotare, scalare, inclinare e capovolgere un elemento. Le proprietà necessarie sono: transform & transform-origin: transform dove specifichiamo quali “trasformazioni” applicare (rotate, scale ecc.) transform-origin dove definiamo l’origine […]

Categorie
CSS

{CSS} Le transizioni

Con le proprietà css di transizione è possibile attribuire ad un elemento diversi valori, quello iniziale e quello finale, determinare la durata temporale, della transizione stessa, ed indicarne la modalità di innesco attraverso le pseudo-classi. Questo è possibile attraverso l’utilizzo delle seguenti proprietà: transition-property indica la proprietà o le proprietà che dovra subire la transizione […]