CSS: Teclado para tela Touch Screen

0 Comente abaixo Jonathan Lamim (@jlamim)

Se temos que fazer uma aplicação web que será utilizada em telas touch screen, este truque pode ser muito útil. Trata-se unicamente de enviar os estilos aos links cuando estão ativos (a:active), fazendo que o tamanho da letra seja maior, e a caixa que ocupa seja maior e se coloque acima da caixa padrão.

Se temos que fazer uma aplicação web que será utilizada em telas touch screen, este truque pode ser muito útil. Trata-se unicamente de enviar os estilos aos links cuando estão ativos (a:active), fazendo que o tamanho da letra seja maior, e a caixa que ocupa seja maior e se coloque acima da caixa padrão.

Veja na imagem abaixo como deverá ficar esse teclado.

Teclado para tela Touch Screen

Temos um teclado da seguinte maneira (aqui coloquei apenas alguns ítens, você deverá colocar todos os ítens do teclado):

<ul> 
<li><a href="#ndo">º</a></li>  
<li><a href="#1">1</a></li>  
<li><a href="#2">2</a></li>  
<li><a href="#3">3</a></li> 
... 
</ul> 

O que teremos que fazer é dar aos

  • o estilo de bloco e float à esquerda e ios links quando estiveren ativos trocar o
    estilo, assim a tecla ficará sobre as outras.

    ul { 
    clear: both; 

     
    li { 
    margin: 5px; 
    display: block; 
    width: 50px; 
    height: 50px; 
    float: left; margin-right:15px; 
    background: #008585; 
    text-align: center; 
    vertical-align: middle; 

     
    a { 
    background: #008585; 
    color: #FFFFFF; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: Verdana; 
    font-size: 175%; 

     
    a:active { 
    display: block; 
    background: #E1E8CD; 
    color: #008585; 
    width: 100px; 
    height: 150px; 
    position: relative; 
    top: -100px; 
    left: -25px; 
    font-size: 275%; 

    E assim finalizamos o teclado. Veja o exemplo clicando aqui.

  • Recomendamos para você
     

    Compartilhe com seus amigos:
    Mais de CSS
    • CSS: Design responsivo para menu, imagem e publicidade
      CSS: Design responsivo para menu, imagem e publicidade
    • Design responsivo com CSS3
      Design responsivo com CSS3
    • O que é tableless e como funciona essa metodologia?
      O que é tableless e como funciona essa metodologia?
    • Regras para como separar o HTML do CSS
      Regras para como separar o HTML do CSS
    • CSS Font-size: px, em, %, pt ou keyword?
      CSS Font-size: px, em, %, pt ou keyword?
    Compartilhe com seus amigos:
    últimos reviews
    • 8,4
      Review Samsung Galaxy K Zoom
      Nessas 2 últimas semanas passou por nossas mãos o potente Galaxy K Zoom, veja o que achamos dele.
    • 8,6
      Review Moto X - Segunda geração
      O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
    • 8,1
      Review Zenfone 5
      Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...

    TOPO