Slide 1
Slide 1 text
CSS tips
@raphaelfabeni
Slide 2
Slide 2 text
CSS tips
@raphaelfabeni
Slide 3
Slide 3 text
@raphaelfabeni
raphaelfabeni.com.br
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
ANTES DE COMEÇARMOS...
Slide 6
Slide 6 text
CSS é muito legal!
"Tá pronto! Falta só aplicar um CSS"
ಥ_ಥ
Slide 7
Slide 7 text
É difícil
aprender CSS?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
certo errado
Slide 10
Slide 10 text
csswizardry.com
Harry Roberts
Slide 11
Slide 11 text
difícil
encapsulamento
nada é
imutável
mexe aqui,
estraga ali
sem lógica
dependência da
ordem do código
simples para
gerar confusão
Slide 12
Slide 12 text
teoria das janelas quebradas
Slide 13
Slide 13 text
bit.ly/pikachu-css3
Slide 14
Slide 14 text
currentColor
Slide 15
Slide 15 text
// config.sass
$brand--color: #883443
$brand--color-dark: darken($brand--color, 15%)
// layout.sass
.list
border: solid 1px $brand--color
// typography.sass
.link-item
color: $brand--color
&:hover,
&:focus
color: $brand--color-dark
Slide 16
Slide 16 text
o currentColor é
parecido mas diferente...
Slide 17
Slide 17 text
bit.ly/current-color-after
Slide 18
Slide 18 text
.btn {
color: #888;
...
}
.btn:after {
width: 0;
height: 0;
border: 0.4em solid transparent;
border-left-color: currentColor;
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 5px;
transition: transform ease .3s;
}
Slide 19
Slide 19 text
bit.ly/current-color-svg
Slide 20
Slide 20 text
.alert {
color: gray;
/**/
}
.alert:after,
.alert:before {
/**/
background-image: linear-gradient(
to bottom,
currentColor 0%,
currentColor 48%,
#fff 49%,
#fff 55%,
currentColor 56%);
}
.alert svg {
/**/
fill: currentColor;
}
Slide 21
Slide 21 text
centralizando
vh e vw
Slide 22
Slide 22 text
Slide 23
Slide 23 text
.center {
width: 20vw;
height: 20vh;
background-color: #fff;
}
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
tela
100%
elemento
20%
- o resto
80%
=
Slide 26
Slide 26 text
elemento
20%
resto
80%
+
margin
40%
margin
40%
+
Slide 27
Slide 27 text
.center {
width: 20vw;
height: 20vh;
background-color: #fff;
margin: 40vh 40vw;
}
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
float-root
Slide 30
Slide 30 text
duvido vocês não
conhecerem essa técnica!
leia-se solução alternativa...
Slide 31
Slide 31 text
Slide 32
Slide 32 text
O Fabeni é um cara muito legal. Esse é um texto fake
pra apresentação mas o Fabeni ainda assim é gente
fina.
Slide 33
Slide 33 text
O Fabeni é um cara muito legal. Esse é
um texto fake pra apresentação mas o
Fabeni ainda assim é gente fina.
Slide 34
Slide 34 text
.hold {
overflow: hidden;
}
#1 overflow
.hold {
overflow: auto;
}
Slide 35
Slide 35 text
#2 clearfix
.hold:after {
content: "";
display: table;
clear: both;
}
Slide 36
Slide 36 text
O Fabeni é um cara muito legal. Esse é
um texto fake pra apresentação mas o
Fabeni ainda assim é gente fina.
Slide 37
Slide 37 text
.hold {
display: flow-root;
}
Slide 38
Slide 38 text
O Fabeni é um cara muito legal. Esse é
um texto fake pra apresentação mas o
Fabeni ainda assim é gente fina.
Slide 39
Slide 39 text
unset
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
p {
font-size: 14px;
color: deepSkyBlue;
}
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Aí você precisa mudar o estilo
de apenas alguns textos..
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
...
...
Slide 48
Slide 48 text
E nessa loucura de dizer que não te quero
Vou negando as aparências
Disfarçando as evidências
Mas pra que viver fingindo
Se eu não posso enganar meu coração
Eu sei que te amo
Chega de mentiras
De negar o meu desejo
Eu te quero mais que tudo
Eu preciso do seu beijo
Eu entrego a minha vida
Pra você fazer o que quiser de mim
Só quero ouvir você dizer que sim
Slide 49
Slide 49 text
.my-class {
color: lightCoral;
}
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
.my-class {
color: lightCoral;
}
.my-class p {
color: unset;
}
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
efeitos com
transition
Slide 54
Slide 54 text
controlar estados de
componentes usando transition
pra deixar tudo bonitão...
Slide 55
Slide 55 text
um modalzinho da hora...
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Close
Lorem ipsum dolor.
Slide 58
Slide 58 text
.modal {
position: fixed;
background-color: rgba(0,0,0,.8);
width: 100%;
height: 100%;
left: 0;
top: 0;
display: none;
}
.modal.is-open {
display: block;
}
.modal-box {
width: 100%;
max-width: 600px;
background-color: #fff;
margin: 100px auto 0;
padding: 20px;
}
Modal fechado.
Modal aberto.
Slide 59
Slide 59 text
.modal {
/**/
overflow: hidden;
width: 0;
height: 0;
opacity: 0;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
}
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
.modal {
width: 0;
height: 0;
opacity: 0;
transition: all .3s ease;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
}
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
.modal {
width: 0;
height: 0;
opacity: 0;
transition: opacity .3s ease;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
}
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
.modal {
width: 0;
height: 0;
opacity: 0;
transition:
opacity .3s ease,
width .01s .3s,
height .01s .3s;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
transition: opacity .3s ease;
}
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
.modal-box {
opacity: 0;
transition: opacity .3s .3s ease;
}
.modal {
width: 0;
height: 0;
opacity: 0;
transition:
opacity .3s ease,
width .01s .3s,
height .01s .3s;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
transition:
opacity .3s ease;
}
.modal.is-open .modal-box {
opacity: 1;
}
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
.modal-box {
opacity: 0;
transition: opacity .3s ease;
}
.modal {
width: 0;
height: 0;
opacity: 0;
transition:
opacity .3s .3s ease,
width .01s .6s,
height .01s .6s;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
transition:
opacity .3s ease;
}
.modal.is-open .modal-box {
opacity: 1;
transition:
opacity .3s .3s ease;
}
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
.modal-box {
opacity: 0;
transform: translateY(-25px);
transition: all .3s ease;
}
.modal {
width: 0;
height: 0;
opacity: 0;
transition:
opacity .3s .3s ease,
width .01s .6s,
height .01s .6s;
}
.modal.is-open {
opacity: 1;
width: 100%;
height: 100%;
transition:
opacity .3s ease;
}
.modal.is-open .modal-box {
opacity: 1;
transition: all .3s .3s ease;
transform: translateY(0);
}
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
design responsivo
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
tabelas
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
ಥ_ಥ
Slide 80
Slide 80 text
table {
overflow-x: auto;
display: block;
}
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
table {
overflow-x: auto;
display: block;
background:
radial-gradient(
ellipse, rgba(0,0,0, .3) 0%, rgba(0,0,0, 0) 75%),
radial-gradient(
ellipse, rgba(0,0,0, .3) 0%, rgba(0,0,0, 0) 75%);
background-size: 10px 100%, 10px 100%;
background-position: -3px center, calc(100% + 3px) center;
background-repeat: no-repeat;
background-color: #fff;
}
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
table tbody td:first-child {
background-image:
linear-gradient(to right, red 50%, blue 100%);
background-repeat: no-repeat;
background-size: 20px 100%;
}
table tbody td:last-child {
background-image:
linear-gradient(to left, red 50%, blue 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 20px 100%;
}
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
table tbody td:first-child {
background-image:
linear-gradient(
to right,
rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-repeat: no-repeat;
background-size: 20px 100%;
}
table tbody td:last-child {
background-image:
linear-gradient(
to left,
rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 20px 100%;
}
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
#01 #02 #03
a b c
d e f
g h i
Slide 89
Slide 89 text
#01 #02 #03
a b c
d e f
g h i
3 grupos de informação
Slide 90
Slide 90 text
#01 a
#02 b
#03 c
#01 d
#02 e
#03 f
#01 g
#02 h
#03 i
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
table {
border: none;
}
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table tr + tr {
margin-top: 20px;
}
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
table td {
position: relative;
text-align: left;
padding-left: calc(30% + 10px);
border: solid 1px #bbb;
}
table td + td {
border-top: none;
}
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
table td:before {
background-color: #f5f5f5;
border-right: solid 1px #bbb;
position: absolute;
top: 0;
left: 0;
width: 30%;
padding-right: 10px;
height: 100%;
padding-top: 10px;
text-align: right;
white-space: nowrap;
content: '';
font-weight: bold;
}
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
table td:nth-of-type(1):before { content: 'Name'; }
table td:nth-of-type(2):before { content: 'Title #1'; }
table td:nth-of-type(3):before { content: 'Title #2'; }
table td:nth-of-type(4):before { content: 'Title #3'; }
table td:nth-of-type(5):before { content: 'Title #4'; }
table td:nth-of-type(6):before { content: 'Title #5'; }
table td:nth-of-type(7):before { content: 'Title #6'; }
table td:nth-of-type(8):before { content: 'Title #7'; }
table td:nth-of-type(9):before { content: 'Title #8'; }
table td:nth-of-type(10):before { content: 'Title #9'; }
table td:nth-of-type(11):before { content: 'Title #10'; }
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Lorem ipsum.
table td:before {
/**/
content: attr(title);
}
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
adaptando seu
conteúdo
o problema do conteúdo variável
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
.list--3 li {
width: 33.3%;
}
.list--4 li {
width: 25%;
}
.list--5 li {
width: 20%;
}
@media screen and (max-width: 768px) {
.list li {
width: 100%;
}
}
Verificação prévia da
quantidade de elementos.
Slide 107
Slide 107 text
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
contando
elementos
o cara nth-last-child
Slide 110
Slide 110 text
.list li:nth-last-child(3) {
/* ┌(ಠ‿ಠ)┘ */
}
Slide 111
Slide 111 text
01 02 03
Slide 112
Slide 112 text
01 02 03
.list li:nth-last-child(3) { background-color: blue; }
Slide 113
Slide 113 text
01 02 03
.list li:nth-last-child(3) { background-color: blue; }
.list li:nth-last-child(4) { background-color: green; }
04
Slide 114
Slide 114 text
01 02 03
.list li:nth-last-child(3) { background-color: blue; }
.list li:nth-last-child(4) { background-color: green; }
.list li:nth-last-child(5) { background-color: red; }
04 05
Slide 115
Slide 115 text
• saber quantidade de elementos
• chegando no primeiro item da lista
• selecionar elementos irmãos
Slide 116
Slide 116 text
01 02 03
.list li:nth-last-child(3),
.list li:nth-last-child(3) ~ li {
background-color: blue;
}
Slide 117
Slide 117 text
.list li:nth-last-child(4),
.list li:nth-last-child(4) ~ li {
background-color: green;
}
01 02 03 04
Slide 118
Slide 118 text
.list li:nth-last-child(5),
.list li:nth-last-child(5) ~ li {
background-color: red;
}
01 02 03 04 05
Slide 119
Slide 119 text
01 02 03
01 02 03 04
01 02 03 04 05
Slide 120
Slide 120 text
.list li:nth-last-child(3),
.list li:nth-last-child(3) ~ li {
/*background-color: blue;*/
width: 33.3%;
}
.list li:nth-last-child(4),
.list li:nth-last-child(4) ~ li {
/*background-color: green;*/
width: 25%;
}
.list li:nth-last-child(5),
.list li:nth-last-child(5) ~ li {
/*background-color: red;*/
width: 20%;
}
@media screen and (max-width: 768px) {
.list li:nth-last-child(n),
.list li:nth-last-child(n) ~ li {
width: 100%;
}
}
Slide 121
Slide 121 text
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
check animation
Slide 124
Slide 124 text
css loader
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
gifs são legais...
mas CSS é mais ✌
Slide 128
Slide 128 text
você fez algo...
por mais simples que seja
pra resolver um problema
pra adicionar uma funcionalidade
pra estudo
pra nada
por diversão
porque o Fabeni pediu ajuda
Slide 129
Slide 129 text
aí aparece um
novo projeto
e você repara que pode usar aquele
mesmo coisa que você já fez
Slide 130
Slide 130 text
AQUELA JOÇA?
AQUELA JOÇA?
AQUELA JOÇA?
AQUELA JOÇA?
AQUELA JOÇA?
AQUELA JOÇA?
ONDE EU COLOQUEI
ONDE EU COLOQUEI
ONDE EU COLOQUEI
ONDE EU COLOQUEI
ONDE EU COLOQUEI
ONDE EU COLOQUEI
ONDE EU COLOQUEI
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
futuro?
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
... ufa!
Slide 137
Slide 137 text
bit.ly/css-tips
Slide 138
Slide 138 text
Referências
Quantity Ordering With CSS | Drew Minns
http://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/
Quantity Ordering | Drew Minns
http://quantityqueries.com/
Contando elementos com nth-last-child | Raphael Fabeni
http://www.raphaelfabeni.com.br/contando-elementos-nth-last-child/
Usando o currentColor do CSS | Raphael Fabeni
http://www.raphaelfabeni.com.br/current-color-css/
The end of the clearfix hack? | Rachel Andrew
https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-
hack/
lab css3 | Raphael Fabeni
http://www.raphaelfabeni.com.br/lab-css3/
Viewport sizes | @stowball
http://viewportsizes.com/
Continuing to make the web more mobile friendly | Klemen Kloboves
https://webmasters.googleblog.com/2016/03/continuing-to-make-web-more-
mobile.html
The Lengths of CSS | Chris Coyier
https://css-tricks.com/the-lengths-of-css/
Responsive data tables | Chris Coyier
https://css-tricks.com/responsive-data-tables/
unset | MDN
https://developer.mozilla.org/pt-BR/docs/Web/CSS/unset
CSS escalável | Shankar Cabus
https://medium.com/@shankarcabus/css-escalavel-parte-1-41e7e863799e
Selectors level 4 | W3C Working Draft
https://www.w3.org/TR/selectors4/
CSS Containment | Google Developers
https://developers.google.com/web/updates/2016/06/css-containment
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
No content
Slide 147
Slide 147 text
Valeu!
@raphaelfabeni