50 CSS Útil Trechos para ajudar os Designes

0
0 Flares 0 Flares ×

CSS é a linguagem subjacente que dá websites seu look. Embora CSS é uma linguagem simples e fácil de aprender, pode ser difícil para aproveitar em alguns casos. Nada a temer, existem soluções alternativas que você pode encontrar online, e aqui estão, mas apenas 10 queridos úteis que você pode usar.

Se você deseja quebrar longo texto, AutoAdjust a largura de suas colunas da tabela, ou criar um estado de carregamento simples, sem o uso de Gifs, temos os trechos que vai entregar, e muito mais.

1. Vertical Align Anything

Se você trabalha com CSS, então isso vai incomodá-lo: como faço para alinhar o texto ou um elemento vertical do recipiente? Agora, com o uso de CSS3 transformações, podemos resolver este problema de forma mais elegante, como este:

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>.verticalcenter{</span> .verticalcenter {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>position: relative;</span> position: relative;</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>top: 50%;</span> top: 50%;</span>
  4.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>-webkit-transform: translateY(-50%);</span> -webkit-transform: translateY (-50%);</span>
  5.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>-o-transform: translateY(-50%);</span> -o-transform: translateY (-50%);</span>
  6.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>transform: translateY(-50%);</span> transform: translateY (-50%);</span>
  7. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Usando esta técnica, tudo – de uma única linha de texto, uma série de parágrafos, ou uma caixa – irá alinhar verticalmente. Na medida em que o suporte ao navegador está em causa, CSS3 Transform obras no Chrome 4, Opera 10, Safari 3, Firefox 3 e Internet Explorer 9.

2. Estique Um Elemento A Janela Completa Altura

Em determinadas situações, você pode querer esticar um elemento para a altura da janela cheia. Redimensionamento elemento básico só irá redimensionar-se ao tamanho do recipiente de modo a tornar um elemento abranger a altura de toda a altura da janela, precisamos envolver o mais alto elemento: html e body .

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>html,</span> html,</span>
  2. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>body {</span> body {</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>height: 100%;</span> height: 100%;</span>
  4. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Em seguida, aplique a altura de 100% a qualquer elemento, assim:

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>div {</span> div {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>height: 100%;</span> height: 100%;</span>
  3. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

3. Aplicando Estilos Diferentes Com Base No Formato De Arquivo

Às vezes você pode ter vários links que você quer fazer olhar diferente dos outros, a fim de torná-lo mais fácil de saber onde o link está indo. Este trecho abaixo irá adicionar um ícone antes de o texto do link e utilizar diferentes ícones ou imagens para diferentes tipos de fontes, que neste exemplo é um link externo.

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>a[href^=“http://”]{</span> um [href ^ = “http: //”] {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>padding-right: 20px;</span> padding-right: 20px;</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background: url(external.gif) no-repeat center right;</span> background: url (external.gif) no-repeat centro-direita;</span>
  4. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  5. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>/* emails */</span> / * * E-mails /</span>
  6. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>a[href^=“mailto:”]{</span> a [href ^ = “mailto:”] {</span>
  7.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>padding-right: 20px;</span> padding-right: 20px;</span>
  8.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background: url(email.png) no-repeat center right;</span> background: url (Email.png) no-repeat centro-direita;</span>
  9. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  10. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>/* pdfs */</span> / * Pdfs * /</span>
  11. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>a[href$=“.pdf”]{</span> um [$ href = “. pdf”] {</span>
  12.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>padding-right: 20px;</span> padding-right: 20px;</span>
  13.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background: url(pdf.png) no-repeat center right;</span> background: url (pdf.png) no-repeat centro-direita;</span>
  14. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Aqui está o que parece.

4. Cruz-Browser Tons De Cinza Imagem

Tons de cinza pode entregar um tom mais profundo para o seu site tornando-o mais elegante e, por vezes minimalista. Aqui, iremos adicionar um filtro de escala de cinza em uma imagem usando SVG. Aqui está o que fazer para aplicar em tons de cinza:

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”><svg xmlns=“http://www.w3.org/2000/svg”></span> <xmlns SVG = “http://www.w3.org/2000/svg”></span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”><filter id=“grayscale”></span> <Id filter = “tons de cinza”></span>
  3.         <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”><feColorMatrix type=“matrix” values=“0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0”/></span> <type = valores feColorMatrix “Matrix” = “0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0,3333 0 0 0,3333 0,3333 0,3333 0 0 0 0 0 1 0” /></span>
  4.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”></filter></span> </ Filter></span>
  5. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”></svg></span> </ Svg></span>

E para entregar este cross-browser, usamos o filter propriedade da seguinte maneira:

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>img {</span> img {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>filter: url(filters.svg#grayscale);</span> Filtro: url (# filters.svg tons de cinza);</span> <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>/* Firefox 3.5+ */</span> / * Firefox 3.5+ * /</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>filter: gray;</span> Filtro: gray;</span> <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>/* IE6-9 */</span> / * * IE6-9 /</span>
  4.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>-webkit-filter: grayscale(1);</span> -webkit-filter: tons de cinza (1);</span> <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>/* Google Chrome, Safari 6+ & Opera 15+ */</span> / * Google Chrome, Safari e Opera 6+ 15+ * /</span>
  5. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

5. Animando Um Fundo Gradiente

Uma das características mais atraentes em CSS é a capacidade de adicionar efeitos de animação. Você pode animar a cor de fundo, a opacidade, tamanho, mas infelismente não para Gradient Color. Atualmente, você não pode animar o fundo gradiente no entanto esse trecho pode ser de alguma ajuda. Ele move o postion fundo para fazê-lo olhar como se está animando.

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>button {</span> botão {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background-image: linear-gradient(#5187c4, #1c2f45);</span> background-image: linear de gradiente (# 5187c4, # 1c2f45);</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background-size: auto 200%;</span> background-size: auto 200%;</span>
  4.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background-position: 0 100%;</span> background-position: 0 a 100%;</span>
  5.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>transition: background-position 0.5s;</span> transição: background-position 0,5s;</span>
  6. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  7. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>button:hover {</span> botão: hover {</span>
  8.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background-position: 0 0;</span> background-position: 0 0;</span>
  9. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Aqui está uma demonstração para mostrar o que ele faz.

6. Tabela CSS Coluna AutoLargura

As tabelas são uma dor, especialmente quando se trata de ajustar as larguras das colunas.No entanto, há um atalho que você pode usar. Adicionar white-space: nowrap na tdelemento para facilmente corrigir a disposição do texto.

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>td {</span> td {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>white-space: nowrap;</span> white-space: nowrap;</span>
  3. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Confira a demonstração para comparar o resultado.

7. Mostrando Box Sombra Apenas Em Um Ou Dois Lados

Se você quer ter caixa de sombras, tente esse truque que pode dar-lhe caixa sombras em cada lado de uma caixa. Para fazer isso, primeiro definir uma caixa com uma largura e altura específica. Dê-lhe uma sombra usando :after elemento pseudo e brincar para obter o posicionamento correto. Este é o código para fazer uma sombra só-bottom:

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>.box-shadow {</span> .box-shadow {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>background-color: #FF8020;</span> background-color: # FF8020;</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>width: 160px;</span> width: 160px;</span>
  4.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>height: 90px;</span> height: 90px;</span>
  5.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>margin-top: -45px;</span> margin-top: -45px;</span>
  6.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>margin-left: -80px;</span> margin-left: -80px;</span>
  7.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>position: absolute;</span> position: absolute;</span>
  8.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>top: 50%;</span> top: 50%;</span>
  9.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>left: 50%;</span> left: 50%;</span>
  10. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  11. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>.box-shadow:after {</span> .box-shadow: after {</span>
  12.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>content: “”;</span> conteúdo“”;</span>
  13.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>width: 150px;</span> width: 150px;</span>
  14.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>height: 1px;</span> height: 1px;</span>
  15.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>margin-top: 88px;</span> margin-top: 88 pixels;</span>
  16.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>margin-left: -75px;</span> margin-left: -75px;</span>
  17.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>display: block;</span> display: block;</span>
  18.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>position: absolute;</span> position: absolute;</span>
  19.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>left: 50%;</span> left: 50%;</span>
  20.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>z-index: -1;</span> z-index: 1;</span>
  21.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>-webkit-box-shadow: 0px 0px 8px 2px #000000;</span> -webkit-box-shadow: 0px 0px 8px 2px # 000000;</span>
  22.        <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>-moz-box-shadow: 0px 0px 8px 2px #000000;</span> -moz-box-shadow: 0px 0px 8px 2px # 000000;</span>
  23.             <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>box-shadow: 0px 0px 8px 2px #000000;</span> box-shadow: 0px 0px 8px 2px # 000000;</span>
  24. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Esta é a demonstração:

8. Wrapping Contexto Texto Longo

Se alguma vez você se deparar com uma palavra que é mais longo do que o próprio recipiente, este truque será útil para você. Por defeito, o texto horizontalmente, vai encher independentemente da largura do recipiente, por exemplo:

Com um simples código CSS você pode fazer o texto ajustar a largura do recipiente.

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>pre {</span> pre {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>white-space: pre-line;</span> white-space: pre-line;</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>word-wrap: break-word;</span> word-wrap: break-palavra;</span>
  4. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Isto é o que parece agora:

9. Fazendo O Texto Borrado

Quer transformar embaçada texto? O que podemos fazer é tornar a cor transparente, t galinha adicionar text-shadow como este.

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>.blurry-text {</span> .blurry-text {</span>
  2.    <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>color: transparent;</span> color: transparent;</span>
  3.    <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>text-shadow: 0 0 5px rgba(0,0,0,0.5);</span> text-shadow: 0 0 5px rgba (0,0,0,0.5);</span>
  4. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

E voilà, você tem mesmo algum texto embaçada.

10. Animando Reticências Usando CSS Animation

Esses trechos vão ajudá-lo a fazer uma animação chamada elipse, útil para fazer estados de carga simples em vez de usar uma imagem GIF.

  1. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>.loading:after {</span> .loading: after {</span>
  2.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>overflow: hidden;</span> overflow: hidden;</span>
  3.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>display: inline-block;</span> display: inline-block;</span>
  4.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>vertical-align: bottom;</span> vertical-align: bottom;</span>
  5.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>animation: ellipsis 2s infinite;</span> 2s reticências infinito;: animação</span>
  6.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>content: “\2026”;</span> conteúdo“\ 2026”;</span> <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>/* ascii code for the ellipsis character */</span> / * Código ASCII para o personagem de reticências * /</span>
  7. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  8. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>@keyframes ellipsis {</span> keyframes reticências {</span>
  9.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>from {</span> a partir de {</span>
  10.         <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>width: 2px;</span> width: 2px;</span>
  11.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  12.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>to {</span> para {</span>
  13.         <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>width: 15px;</span> width: 15px;</span>
  14.     <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>
  15. <span class=“notranslate” onmouseover=“_tipon(this)” onmouseout=“_tipoff()”><span class=“google-src-text” style=“direction: ltr; text-align: left”>}</span> }</span>

Vamos ver o demo.

Não brinque com os trechos e experimentar o que mais você pode fazer com ele.

0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×

Deixe seu comentário sobre esté Post do Blog

Comente a Publicação