Gaucho

fazedor de sites 🐘 • tentando ser dataísta 💪

GitHub • Twitter

CSS

capitalizar

h1::first-letter,h2::first-letter ,h3::first-letter{
    text-transform: uppercase;
}

dark mode

@media (prefers-color-scheme: dark){...}

Fonte: MDN

centralizar o conteúdo de uma div

div{
    display: grid;
    place-content: center;
}

firefox

@-moz-document url-prefix() { 
  .selector {
     color: lime;
  }
}

Fonte: CSS-Tricks

fontes

mono

code{
    font-family:"Courier New","Liberation Mono",Courier,monospace;
}

sans

body{
    font-family: Arial,"Liberation Sans",Helvetica,sans-serif;
    font-size:24px;
    line-height:1.5em;
}

Fonte: MIT

itcss (inverted triangle css)

• settings = variables = variáveis
• tools = general = geral
• generic = reset
• base = tags
• objects = layout
• components = classes
• trumps = importante

fonte: anselme

media queries

@media (min-width: 700px) and (orientation: landscape){...}

Fonte: MDN

quebra de linha

white-space: pre-wrap;       /* Since CSS 2.1 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */

Fonte: Stack Overflow

Página inicial