Scribd Logo
Carica

Benvenuto in Scribd!

  • 20 Pro CSS Tips

    Caricato da

    tetevo
    12 visualizzazioni22 pagine
    20 Pro CSS Tips

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    20 Pro CSS Tips

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni22 pagine

    20 Pro CSS Tips

    Caricato da

    tetevo
    20 Pro CSS Tips

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 22

    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    1 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    2 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

    box-sizing

    box-sizing
    box-sizing html

    html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }

    box-sizing

    3 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    space-
    between

    .flex-container {
    display: flex;
    justify-content: space-between;
    }
    .flex-container .item {
    flex-basis: 23%;
    }

    :not()

    .nav li {
    border-right: 1px solid #666;
    }
    .nav li:last-child {
    border-right: none;
    }

    4 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    :not()

    .nav li:not(:last-child) {
    border-right: 1px solid #666;
    }

    .nav

    .nav li + li
    .nav li:first-child ~ li :not()

    line-height
    body

    line-height

    5 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    body
    Contact Archives About

    body {
    line-height: 1.5;
    }

    html, body {
    height: 100%;
    margin: 0;
    }
    body {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    }

    6 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    .logo {
    background: url("logo.svg");
    }

    .no-svg .icon-only:after {
    content: attr(aria-label);
    }

    *
    +

    *+*{
    margin-top: 1.5rem;
    }

    7 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    .intro > * {
    margin-bottom: 1.25rem;
    }

    box-
    decoration-break

    8 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    box-decoration-break
    Contact Archives About

    .p {
    display: inline-block;
    box-decoration-break: clone;
    -o-box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    }

    inline-block

    clone

    table-layout: fixed

    .calendar {
    table-layout: fixed;
    }

    9 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    <a>
    href

    a[href^="http"]:empty::before {
    content: attr(href);
    }

    a[href]:not([class]) {
    color: #999;
    text-decoration: none;
    transition: all ease-in-out .3s;
    }

    10 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    .container {
    height: 0;
    padding-bottom: 20%;
    position: relative;
    }
    .container div {
    border: 2px dashed #ddd;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    }

    11 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    img {
    display: block; Contact Archives About
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    height: auto;
    line-height: 2;
    position: relative;
    text-align: center;
    width: 100%;
    }
    img:before {
    content: "We're sorry, the image below is missing :(";
    display: block;
    margin-bottom: 10px;
    }
    img:after {
    content: "(url: " attr(src) ")";
    display: block;
    font-size: 12px;
    }

    rem
    em

    html{font-size: 15px;}
    font-size rem

    article {
    font-size: 1.25rem;
    }
    aside {
    font-size: .9rem;
    }

    h2 {

    font-size: 2em;

    12 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    }
    Contact Archives About
    p {

    font-size: 1em;

    :not()

    video[autoplay]:not([muted]) {
    display: none;
    }

    :root

    13 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About


    :root:

    :root {
    font-size: calc(1vw + 1vh + .5vmin);
    }

    em
    :root:

    body {
    font: 1rem/1.6 sans-serif;
    }

    font-size

    font-size

    input[type="text"],
    input[type="number"],
    select,
    textarea {
    font-size: 16px;
    }

    14 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    :root {
    --main-color: #06c;
    --accent-color: #999;
    }

    h1, h2, h3 {
    color: var(--main-color);
    }
    a[href]:not([class]),
    p,
    footer span{
    color: var(--accent-color);
    }

    15 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    16 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    17 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    18 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    19 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    20 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    21 de 22 10/09/2017 18:41
    Level Up Your CSS Skills With These 20 Pro CSS Tips - Web Designer... http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips?ref...

    Contact Archives About

    22 de 22 10/09/2017 18:41

    Potrebbero piacerti anche