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.

Raphael Fabeni

July 01, 2017
Tweet

More Decks by Raphael Fabeni

Other Decks in Technology

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. View Slide

  147. Valeu!
    @raphaelfabeni

    View Slide