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!

2. SINDROME DA FOGLIO BIANCO

4. Carmine Alfano
• UX / Frontender per Fullstack Agency
• Docente UX/Html/Css/JS
• Cofondatore Community
DotNetCampania e Web Design Republic
E-mail: info@carminealfano.it
Twitter: @razzullo
Facebook: Web Design Republic
Chi Sono?

5. Potenzialità & Limiti
dei CSS

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…

12. Grafica editoriale oggi

15. Web Design ieri

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

19. Rompere gli schemi

20. brutalistwebsites.com

21. § CSS Shapes
§ Clip-path
§ Mask-image
Di cosa parleremo:
§ CSS Blending modes
§ SVG Filters
§ Text Module

22. CSS shapes

23. CSS shapes
Permettere al testo di
assumere la forma di
un’immagine scontornata
scorrendo attorno ad essa

24. CSS shapes

25. CSS shapes
.article-photo {
float: left;
border-radius: 100%;
width: 200px;
margin: 2rem;
}

26. CSS shapes
.article-photo {
float: left;
border-radius: 100%;
width: 200px;
margin: 2rem;
shape-outside: circle();
shape-margin: 2rem;
}

27. .article-photo {
border-radius: 100%;
width: 200px;
}
@media (min-width: 576px) {
.article-photo {
float: left;
margin: 2rem;
shape-outside: circle();
shape-margin: 2rem;
}
}
CSS shapes

28. CSS shapes
Per contorni più complessi
è possibile usare
una png trasparente
come shape.

29. CSS shapes
.article-cactus {
…
background:
url(img/cactus.png);
shape-outside:
url(img/cactus.png);
}

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);
}
}

32. .article-cactus {
background: url(img/cactus.png);
transition: background ease 1s, shape-outside ease 1s;
shape-outside: polygon(18px 467px, 22px 434px, 0px 364px, 0px 289px,
28px 276px, 38px 209px, 3px 164px, 0px 97px, 12px 61px, 46px 55px, 79px 54px,
95px 3px, 174px -5px, 215px 21px, 222px 51px, 244px 57px, 254px 78px, 285px
114px, 272px 180px, 242px 200px, 202px 223px, 201px 263px, 264px 295px, 256px
343px, 246px 362px, 241px 376px, 225px 435px, 237px 476px, 224px 528px, 18px
529px);
&:hover {
background: url(img/cactus-2.png);
shape-outside: polygon(18px 467px, 22px 434px, …);
}
CSS shapes
Per migliorare l’effetto sostituiamo la png con un poligono

34. .article-cactus {
background: url(img/cactus.png);
transition: background ease 1s,
shape-outside ease 1s;
shape-outside: polygon(18px 467px, 22px 434px, … );
clip-path: polygon(18px 467px, 22px 434px, … );
&:hover {
background: url(img/cactus-2.png);
shape-outside:
polygon(18px 467px, 18px 400px, …);
clip-path:
polygon(18px 467px, 18px 400px, … );
}
}
CSS shapes

36. Clip-path

37. CLIPPING-MASK = CLIP-PATH
clip-path
1 2 3

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

39. .main {
background: url('img/desert.jpg');
transition: all ease 1s;
clip-path:
polygon(50% 0%, 61% 35%, …);
}
.main:hover {
clip-path:
polygon(50% 0%, 80% 10%, …);
}
clip-path

40. .article-photo {
float: left;
background: url('img/desert.jpg’);
transition: all ease 1s;
shape-margin: 1rem;
shape-outside:
polygon(50% 0%, …);
clip-path:
polygon(50% 0%, …);
&:hover {
shape-outside:
polygon(50% 0%, …);
clip-path:
polygon(50% 0%, …);
}
}
clip-path

41. Mask image

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

43. .main {
background: url('img/desert.jpg');
background-position: top;
background-repeat: no-repeat;
}
.text {
mask-image: url('img/mask.png');
mask-position: top;
mask-repeat: no-repeat;
}
Mask Image

44. .main {
background: url('img/desert.jpg');
background-position: top;
background-repeat: no-repeat;
}
.text {
mask-image: url('img/mask.png');
mask-position: top;
mask-repeat: no-repeat;
}
Mask Image
.text h1 {
transform: translate(-50%, -50%); transition: all ease 1s;
&:hover {
transform: translate(-60%, -50%);
}
}

45. body { background: red; }
.main {
background: url('img/desert.jpg’);
mask-image:
linear-gradient(
to top,
transparent 10%,
black 50%);
}
Mask Image

46. body { background: red; }
.main {
background: url('img/desert.jpg’);
mask-image:
radial-gradient(
ellipse 90% 80% at 50% 40%,
black 40%, transparent 50%
);
}
Mask Image

47. Mask Image
+

48. body {
background: red
url('img/desert.jpg’);
}
.main {
background: url('img/desert.jpg’);
mask-image:
url('img/mask.svg’);
&:hover {
mask-position: 0 -50px;
}
}
Mask Image

49. -webkit-background-clip: text

50. h1 {
background: url('img/desert.jpg');
background-size: cover;
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-webkit-background-clip: text

51. CSS blending modes

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

54. .main {
background:
url('img/desert.jpg');
background-color:
red;
background-blend-mode:
multiply;
}
CSS blending modes

55. .main {
background:
url('img/desert.jpg');
background-color:
red;
background-blend-mode:
luminosity;
}
CSS blending modes

56. .main {
background:
url('img/desert.jpg’),
url('img/cactus.png’),
linear-gradient(red, blue);
background-blend-mode:
overlay, luminosity;
}
CSS blending modes

57. SVG filters
CSS filters

58. SVG filters CSS filters

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

60. SVG filters CSS filters
#main {
background: url('img/desert.jpg’);
filter: blur(25px);
}

61. SVG filters CSS filters
#main {
background: url('img/desert.jpg’);
filter: url(#f1);
}
<svg height="0">
<filter id="f1">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>

62. TEXT module

63. Text Module
p {
text-align: justify;
}

64. Text Module
p {
text-align: justify;
overflow-wrap: break-word;
}

65. Text Module
p {
text-align: justify;
overflow-wrap: break-word;
hyphens: auto;
}

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

68. Text Module
overflow-wrap: break-word;
word-break: break-word;
overflow-wrap: break-all;
word-break: break-all;

69. Text Module

70. Text Module
<svg viewBox="0 0 850 600">
<path id="curve»
d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c
40.67,14.43,108.57-6.91,229-145" />
<text x="25">
<textPath xlink:href="#curve">
Breaking Blank Breaking Blank
</textPath>
</text>
</svg>
path { fill: transparent; }

71. www.typetester.org
Text Module

72. CAN I USE?

73. https://joind.in/talk/1eefe
#carmine.alfano {
filter: url(#5);
}

74. Grazie!