Con l’introduzione e il miglioramento di alcuni strumenti come SVG filters, clipping-mask, mask-image, shapes, text module level 3 e tanti altri, i CSS si stanno avvicinando sempre più ai software per la grafica editoriale. In questa sessione scopriremo come sfruttare alcuni superpoteri di CSS per realizzare dei layout straordinari!
Come sviluppare layout per il web usando le ultime tecnologie come il Flexbox Layout Module, ma anche il Grid e altre cose da 20 anni a questa parte.
Slide del talk al WordPress Meetup Torino del 19 aprile 2017.
Video del talk: https://wordpress.tv/2017/04/27/style-matters/
Diciamoci la verità, il CSS è facile e alla portata di tutti. Ma nonostante questo molti sviluppatori vedono CSS come un male necessario. Tra chi lo odia e lo evita come la peste, chi cerca di fixarlo e lo inserisce in Javascript, chi aspetta e brama qualche tool di disegno che esporti CSS utilizzabile. Ma c'è tra di noi chi il CSS lo ama, ma se ne vergogna amaramente. Usciamo fuori dall'ombra e facciamo vedere davvero cosa vuol dire scrivere CSS nel mondo del lavoro moderno. Perché alla fine che mondo sarebbe senza colori?
È tempo di pensare alle nuove funzionalità introdotte nelle specifiche 'media queries level 4' che da poco hanno ottenuto lo stato di 'candidate recommendation' dal W3C. In questa sessione analizzeremo le principali novità e come sarà possibile utilizzare questo strumento per migliorare il nostro flusso di lavoro.
Come sviluppare layout per il web usando le ultime tecnologie come il Flexbox Layout Module, ma anche il Grid e altre cose da 20 anni a questa parte.
Slide del talk al WordPress Meetup Torino del 19 aprile 2017.
Video del talk: https://wordpress.tv/2017/04/27/style-matters/
Diciamoci la verità, il CSS è facile e alla portata di tutti. Ma nonostante questo molti sviluppatori vedono CSS come un male necessario. Tra chi lo odia e lo evita come la peste, chi cerca di fixarlo e lo inserisce in Javascript, chi aspetta e brama qualche tool di disegno che esporti CSS utilizzabile. Ma c'è tra di noi chi il CSS lo ama, ma se ne vergogna amaramente. Usciamo fuori dall'ombra e facciamo vedere davvero cosa vuol dire scrivere CSS nel mondo del lavoro moderno. Perché alla fine che mondo sarebbe senza colori?
È tempo di pensare alle nuove funzionalità introdotte nelle specifiche 'media queries level 4' che da poco hanno ottenuto lo stato di 'candidate recommendation' dal W3C. In questa sessione analizzeremo le principali novità e come sarà possibile utilizzare questo strumento per migliorare il nostro flusso di lavoro.
Progettare siti da fruire su dispositivi diversi è imprescindibile nel Web design attuale. Scopriamo le tecniche fondamentali per ottenere risultati ottimi su tutti gli schermi
Quella sporca dozzina (a cascata) la vendettaDavide Di Pumpo
Dodici trucchi di cui nessuno vi parla, perché la lobby dei framework vi nasconde la verità !1!!! Dodici (circa) semplici trucchi per migliorare la vostra vita di scrittori di CSS. Costruire forme astratte, numerare elementi del DOM e soprattutto fare il ganzo con gli amici grazie alla conoscenza di proprietà CSS misconosciute. Un talk leggero e spensierato, pieno di curiosità e consigli per divertirsi ancora scrivendo CSS.
Tanto tempo fa quando ti chiedevano un sito dinamico, intendevano una roba con la intro fatta in flash. Molto è cambiato da allora, vuoi per il trauma di intro così pesanti, vuoi per la difficile implementazione. Qualunque sia il motivo, di fatto l'animazione è diventata un cittadino di seconda categoria.
Le Web Animation API sono qui per cambiare le carte in tavola. Scopriremo non solo il come ma anche il perché dietro le Web Animation API e come utilizzarle da subito.
Progettare siti da fruire su dispositivi diversi è imprescindibile nel Web design attuale. Scopriamo le tecniche fondamentali per ottenere risultati ottimi su tutti gli schermi
Quella sporca dozzina (a cascata) la vendettaDavide Di Pumpo
Dodici trucchi di cui nessuno vi parla, perché la lobby dei framework vi nasconde la verità !1!!! Dodici (circa) semplici trucchi per migliorare la vostra vita di scrittori di CSS. Costruire forme astratte, numerare elementi del DOM e soprattutto fare il ganzo con gli amici grazie alla conoscenza di proprietà CSS misconosciute. Un talk leggero e spensierato, pieno di curiosità e consigli per divertirsi ancora scrivendo CSS.
Tanto tempo fa quando ti chiedevano un sito dinamico, intendevano una roba con la intro fatta in flash. Molto è cambiato da allora, vuoi per il trauma di intro così pesanti, vuoi per la difficile implementazione. Qualunque sia il motivo, di fatto l'animazione è diventata un cittadino di seconda categoria.
Le Web Animation API sono qui per cambiare le carte in tavola. Scopriremo non solo il come ma anche il perché dietro le Web Animation API e come utilizzarle da subito.
8. Banner o Slider
in cima alla pagina
3 Box
a volte 4 per i designer più temerari
Blocco testo
in genere con background a contrasto
Altra valanga di box
inseriti un po’ a casaccio, magari circolari
Form contatti
prima del footer che fa tanto figo
Footer
con copyright e 3 colonne
I layout di oggi sono tutti uguali…
17. Flash
• UX inesistente, navigazione stile
videogame
muoversi all’interno di un sito era
davvero un’avventura
• Responsive (???)
• Introduzione animata >>> Skip intro
Unica nota positiva:
i layout erano più creativi rispetto
a oggi
18. Perché i WebSite di oggi sono
monotoni?
• Limiti tecnici
paura di tentare
• Poco tempo a disposizione / Pigrizia nella progettazione di
layout fuori dagli schemi
di sicuro un layout basato su righe e colonne sarà più facile da
adattare in modalità responsive
• Utilizzo errato e smodato di Framework CSS
adattare il design agli standard del framework senza provare a cercare
soluzioni alternative
• Scarsa conoscenza dei nuovi strumenti introdotti da CSS3
30. CSS shapes
È anche possibile utilizzare le transition per animazioni all’hover,
anche se il risultato finale non è del tutto perfetto.
.article-cactus {
…
background: url(img/cactus.png);
shape-outside: url(img/cactus.png);
transition: all 1s;
&:hover {
background: url(img/cactus-2.png);
shape-outside: url(img/cactus-2.png);
}
}
38. • La proprietà clip permetteva di
creare solo ritagli rettangolari.
• CSS3 introduce la proprietà
clip-path che permette di
ritagliare forme più complesse.
bennettfeely.com/clippy/
clip-path
42. Se la proprietà clip-path rende visibile
un elemento HTML attraverso un’area
di ritaglio,
mask (e tutte le proprietà collegate) vi
sovrappone un’immagine attraverso la
quale traspare l’elemento sottostante.
Mask Image
52. CSS blending modes
Nei software di
fotoritocco i metodi di
fusione ci forniscono la
possibilità di fondere
tra loro i livelli, con
modalità diverse a
seconda del metodo
utilizzato.
53. Metodi di fusione da CSS
CSS blending modes
background-blend-mode:
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
normal
overlay
saturation
screen
soft-light
59. SVG filters CSS filters
I filtri SVG permettono di
modificare le caratteristiche
grafiche di un’immagine input e di
sostituire a quest’ultima l’immagine
modificata.
https://testdrive-archive.azurewebsites.net/graphics/hands-on-css3/hands-on_svg-filter-effects.htm
66. Facciamo un po’ di chiarezza…
word-wrap
overflow-wrap
word-break
Text Module
67. word-wrap
può aiutare i contenuti ad andare a capo in caso di url o stringhe molto lunghe.
overflow-wrap
la proprietà word-wrap è stata rinominata in overflow-wrap nella specifica corrente CSS3
word-break
In realtà fa la stessa cosa di overflow-wrap. Ma viene usata più comunemente per le
lingue non inglesi e per la maggior parte dell'Asia orientale come il cinese, il giapponese
e il coreano.
Text Module