Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Tips

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.

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=128

Raphael Fabeni

July 01, 2017
Tweet

Transcript

  1. CSS tips @raphaelfabeni

  2. CSS tips @raphaelfabeni

  3. @raphaelfabeni raphaelfabeni.com.br

  4. None
  5. ANTES DE COMEÇARMOS...

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

    CSS" ಥ_ಥ
  7. É difícil aprender CSS?

  8. None
  9. certo errado

  10. csswizardry.com Harry Roberts

  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
  12. teoria das janelas quebradas

  13. bit.ly/pikachu-css3

  14. currentColor

  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
  16. o currentColor é parecido mas diferente...

  17. bit.ly/current-color-after

  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; }
  19. bit.ly/current-color-svg

  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; }
  21. centralizando vh e vw

  22. <div class="center"></div>

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

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

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

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

    40vw; }
  28. None
  29. float-root

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

  31. <div class="hold">

  32. <div class="hold"> O Fabeni é um cara muito legal. Esse

    é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
  33. <div class="hold"> O Fabeni é um cara muito legal. Esse

    é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
  34. .hold { overflow: hidden; } #1 overflow .hold { overflow:

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

    }
  36. <div class="hold"> O Fabeni é um cara muito legal. Esse

    é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
  37. .hold { display: flow-root; }

  38. <div class="hold"> O Fabeni é um cara muito legal. Esse

    é um texto fake pra apresentação mas o Fabeni ainda assim é gente fina.
  39. unset

  40. None
  41. None
  42. None
  43. p { font-size: 14px; color: deepSkyBlue; }

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

  46. None
  47. <p>...</p> <div> <p>...</p> </div>

  48. <p>E nessa loucura de dizer que não te quero <br>

    Vou negando as aparências<br> Disfarçando as evidências<br> Mas pra que viver fingindo<br> Se eu não posso enganar meu coração </p> <div class="my-class"> <p>Eu sei que te amo <br> Chega de mentiras <br> De negar o meu desejo <br> Eu te quero mais que tudo <br> Eu preciso do seu beijo <br> Eu entrego a minha vida <br> Pra você fazer o que quiser de mim <br> Só quero ouvir você dizer que sim </p> </div>
  49. .my-class { color: lightCoral; }

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

    }
  52. None
  53. efeitos com transition

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

  55. um modalzinho da hora...

  56. None
  57. <!-- Modal --> <div id="modal" class="modal"> <div class="modal-box"> <button id="close-modal">Close</button>

    <h2>Lorem ipsum dolor.</h2> </div> </div>
  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.
  59. .modal { /**/ overflow: hidden; width: 0; height: 0; opacity:

    0; } .modal.is-open { opacity: 1; width: 100%; height: 100%; }
  60. None
  61. .modal { width: 0; height: 0; opacity: 0; transition: all

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

    .3s ease; } .modal.is-open { opacity: 1; width: 100%; height: 100%; }
  64. None
  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; }
  66. None
  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; }
  68. None
  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; }
  70. None
  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); }
  72. None
  73. None
  74. design responsivo

  75. None
  76. None
  77. tabelas

  78. None
  79. ಥ_ಥ

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

  81. None
  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; }
  83. None
  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%; }
  85. None
  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%; }
  87. None
  88. #01 #02 #03 a b c d e f g

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

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

    #03 f #01 g #02 h #03 i
  91. None
  92. table { border: none; } table, thead, tbody, th, td,

    tr { display: block; }
  93. None
  94. thead tr { position: absolute; top: -9999px; left: -9999px; }

    table tr + tr { margin-top: 20px; }
  95. None
  96. table td { position: relative; text-align: left; padding-left: calc(30% +

    10px); border: solid 1px #bbb; } table td + td { border-top: none; }
  97. None
  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; }
  99. None
  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'; }
  101. None
  102. <td title="Name">Lorem ipsum.</td> table td:before { /**/ content: attr(title); }

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

  105. None
  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.
  107. <ul class="list list--3"> <!-- --> </ul> <ul class="list list--4"> <!--

    --> </ul> <ul class="list list--5"> <!-- --> </ul>
  108. None
  109. contando elementos o cara nth-last-child

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

  111. 01 02 03

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

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

    li:nth-last-child(4) { background-color: green; } 04
  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
  115. • saber quantidade de elementos • chegando no primeiro item

    da lista • selecionar elementos irmãos
  116. 01 02 03 .list li:nth-last-child(3), .list li:nth-last-child(3) ~ li {

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

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

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

    04 05
  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%; } }
  121. <ul class="list"> <!-- --> </ul> <ul class="list"> <!-- --> </ul>

    <ul class="list"> <!-- --> </ul>
  122. None
  123. check animation

  124. css loader

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

  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
  129. aí aparece um novo projeto e você repara que pode

    usar aquele mesmo coisa que você já fez
  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
  131. None
  132. None
  133. futuro?

  134. None
  135. None
  136. ... ufa!

  137. bit.ly/css-tips

  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
  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. rfabeni@redventures.com

  147. Valeu! @raphaelfabeni