Breaking Blank

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?

Potenzialità & Limiti
dei CSS

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…

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

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

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

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

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

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

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

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

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

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

.article-cactus {
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 {
shape-outside: polygon(18px 467px, 22px 434px, …);
}
CSS shapes
Per migliorare l’effetto sostituiamo la png con un poligono

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

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

• 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

.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

.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

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

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

.main {
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%);
}
}

body { background: red; }
.main {
mask-image:
linear-gradient(
to top,
transparent 10%,
black 50%);
}
Mask Image

body { background: red; }
.main {
mask-image:
radial-gradient(
ellipse 90% 80% at 50% 40%,
black 40%, transparent 50%
);
}
Mask Image

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

h1 {
background-size: cover;
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-webkit-background-clip: text

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.

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

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

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

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

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

#main {
filter: blur(25px);
}

#main {
filter: url(#f1);
}
<svg height="0">
<filter id="f1">
<feGaussianBlur stdDeviation="10" />
</filter>
</svg>

Text Module
p {
text-align: justify;
}

Text Module
p {
overflow-wrap: break-word;
}

Text Module
p {
hyphens: auto;
}

Facciamo un po’ di chiarezza…
word-wrap
overflow-wrap
word-break
Text Module

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

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

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

www.typetester.org
Text Module

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

Breaking Blank

More Related Content

Similar to Breaking Blank

Breaking Blank