CSS Tips

Muitos já perderam a paciência com CSS pelo menos uma vez na vida. No entanto, já também deram aquele suspiro de alívio quando um problema ou bug é resolvido. Fácil de aprender e difícil de dominar, o CSS é uma linguagem de fácil acesso e que esconde diversos segredos. A idéia da talk é abordar algumas dicas de alguém que já perdeu a paciência algumas vezes com CSS mas que ainda o ama. Sem ressentimentos.

Transcript

1. CSS tips
   @raphaelfabeni
   

   View Slide

2. CSS tips
   @raphaelfabeni
   

   View Slide

3. @raphaelfabeni
   raphaelfabeni.com.br
   

   View Slide

4. View Slide

5. ANTES DE COMEÇARMOS...
   

   View Slide

6. CSS é muito legal!
   "Tá pronto! Falta só aplicar um CSS"
   ಥ_ಥ
   

   View Slide

7. É difícil
   aprender CSS?
   

   View Slide

8. View Slide

9. certo errado
   

   View Slide

10. csswizardry.com
    Harry Roberts
    

    View Slide

11. 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
    

    View Slide

12. teoria das janelas quebradas
    

    View Slide

13. bit.ly/pikachu-css3
    

    View Slide

14. currentColor
    

    View Slide

15. // 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
    

    View Slide

16. o currentColor é
    parecido mas diferente...
    

    View Slide

17. bit.ly/current-color-after
    

    View Slide

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

    View Slide

19. bit.ly/current-color-svg
    

    View Slide

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

    View Slide

21. centralizando
    vh e vw
    

    View Slide

22. 
    

    View Slide

23. .center {
    width: 20vw;
    height: 20vh;
    background-color: #fff;
    }
    

    View Slide

24. View Slide

25. tela
    100%
    elemento
    20%
    - o resto
    80%
    =
    

    View Slide

26. elemento
    20%
    resto
    80%
    +
    margin
    40%
    margin
    40%
    +
    

    View Slide

27. .center {
    width: 20vw;
    height: 20vh;
    background-color: #fff;
    margin: 40vh 40vw;
    }
    

    View Slide

28. View Slide

29. float-root
    

    View Slide

30. duvido vocês não
    conhecerem essa técnica!
    leia-se solução alternativa...
    

    View Slide

31. 
    

    View Slide

32. 
    O Fabeni é um cara muito legal. Esse é um texto fake
    pra apresentação mas o Fabeni ainda assim é gente
    fina.
    

    View Slide

33. 
    O Fabeni é um cara muito legal. Esse é
    um texto fake pra apresentação mas o
    Fabeni ainda assim é gente fina.
    

    View Slide

34. .hold {
    overflow: hidden;
    }
    #1 overflow
    .hold {
    overflow: auto;
    }
    

    View Slide

35. #2 clearfix
    .hold:after {
    content: "";
    display: table;
    clear: both;
    }
    

    View Slide

36. 
    O Fabeni é um cara muito legal. Esse é
    um texto fake pra apresentação mas o
    Fabeni ainda assim é gente fina.
    

    View Slide

37. .hold {
    display: flow-root;
    }
    

    View Slide

38. 
    O Fabeni é um cara muito legal. Esse é
    um texto fake pra apresentação mas o
    Fabeni ainda assim é gente fina.
    

    View Slide

39. unset
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. p {
    font-size: 14px;
    color: deepSkyBlue;
    }
    

    View Slide

44. View Slide

45. Aí você precisa mudar o estilo
    de apenas alguns textos..
    

    View Slide

46. View Slide

47. ...
    
    ...
    
    

    View Slide

48. 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
    
    
    

    View Slide

49. .my-class {
    color: lightCoral;
    }
    

    View Slide

50. View Slide

51. .my-class {
    color: lightCoral;
    }
    .my-class p {
    color: unset;
    }
    

    View Slide

52. View Slide

53. efeitos com
    transition
    

    View Slide

54. controlar estados de
    componentes usando transition
    pra deixar tudo bonitão...
    

    View Slide

55. um modalzinho da hora...
    

    View Slide

56. View Slide

57. 
    
    
    Close
    Lorem ipsum dolor.
    
    
    

    View Slide

58. .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.
    

    View Slide

59. .modal {
    /**/
    overflow: hidden;
    width: 0;
    height: 0;
    opacity: 0;
    }
    .modal.is-open {
    opacity: 1;
    width: 100%;
    height: 100%;
    }
    

    View Slide

60. View Slide

61. .modal {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all .3s ease;
    }
    .modal.is-open {
    opacity: 1;
    width: 100%;
    height: 100%;
    }
    

    View Slide

62. View Slide

63. .modal {
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity .3s ease;
    }
    .modal.is-open {
    opacity: 1;
    width: 100%;
    height: 100%;
    }
    

    View Slide

64. View Slide

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

    View Slide

66. View Slide

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

    View Slide

68. View Slide

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

    View Slide

70. View Slide

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

    View Slide

72. View Slide

73. View Slide

74. design responsivo
    

    View Slide

75. View Slide

76. View Slide

77. tabelas
    

    View Slide

78. View Slide

79. ಥ_ಥ
    

    View Slide

80. table {
    overflow-x: auto;
    display: block;
    }
    

    View Slide

81. View Slide

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

    View Slide

83. View Slide

84. 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%;
    }
    

    View Slide

85. View Slide

86. 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%;
    }
    

    View Slide

87. View Slide

88. #01 #02 #03
    a b c
    d e f
    g h i
    

    View Slide

89. #01 #02 #03
    a b c
    d e f
    g h i
    3 grupos de informação
    

    View Slide

90. #01 a
    #02 b
    #03 c
    #01 d
    #02 e
    #03 f
    #01 g
    #02 h
    #03 i
    

    View Slide

91. View Slide

92. table {
    border: none;
    }
    table,
    thead,
    tbody,
    th,
    td,
    tr {
    display: block;
    }
    

    View Slide

93. View Slide

94. thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }
    table tr + tr {
    margin-top: 20px;
    }
    

    View Slide

95. View Slide

96. table td {
    position: relative;
    text-align: left;
    padding-left: calc(30% + 10px);
    border: solid 1px #bbb;
    }
    table td + td {
    border-top: none;
    }
    

    View Slide

97. View Slide

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

    View Slide

99. View Slide

100. 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'; }
     

     View Slide

101. View Slide

102. Lorem ipsum.
     table td:before {
     /**/
     content: attr(title);
     }
     

     View Slide

103. View Slide

104. adaptando seu
     conteúdo
     o problema do conteúdo variável
     

     View Slide

105. View Slide

106. .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.
     

     View Slide

107. 
     
     
     
     
     
     
     
     
     

     View Slide

108. View Slide

109. contando
     elementos
     o cara nth-last-child
     

     View Slide

110. .list li:nth-last-child(3) {
     /* ┌(ಠ‿ಠ)┘ */
     }
     

     View Slide

111. 01 02 03
     

     View Slide

112. 01 02 03
     .list li:nth-last-child(3) { background-color: blue; }
     

     View Slide

113. 01 02 03
     .list li:nth-last-child(3) { background-color: blue; }
     .list li:nth-last-child(4) { background-color: green; }
     04
     

     View Slide

114. 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
     

     View Slide

115. • saber quantidade de elementos
     • chegando no primeiro item da lista
     • selecionar elementos irmãos
     

     View Slide

116. 01 02 03
     .list li:nth-last-child(3),
     .list li:nth-last-child(3) ~ li {
     background-color: blue;
     }
     

     View Slide

117. .list li:nth-last-child(4),
     .list li:nth-last-child(4) ~ li {
     background-color: green;
     }
     01 02 03 04
     

     View Slide

118. .list li:nth-last-child(5),
     .list li:nth-last-child(5) ~ li {
     background-color: red;
     }
     01 02 03 04 05
     

     View Slide

119. 01 02 03
     01 02 03 04
     01 02 03 04 05
     

     View Slide

120. .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%;
     }
     }
     

     View Slide

121. 
     
     
     
     
     
     
     
     
     

     View Slide

122. View Slide

123. check animation
     

     View Slide

124. css loader
     

     View Slide

125. View Slide

126. View Slide

127. gifs são legais...
     mas CSS é mais ✌
     

     View Slide

128. 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
     

     View Slide

129. aí aparece um
     novo projeto
     e você repara que pode usar aquele
     mesmo coisa que você já fez
     

     View Slide

130. 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
     

     View Slide

131. View Slide

132. View Slide

133. futuro?
     

     View Slide

134. View Slide

135. View Slide

136. ... ufa!
     

     View Slide

137. bit.ly/css-tips
     

     View Slide

138. 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
     

     View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. rfabeni@redventures.com
     

     View Slide

147. Valeu!
     @raphaelfabeni
     

     View Slide