CSS: Teclado para tela Touch Screen

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.

  •  
    Esta informação foi útil?
    0 0
    Relacionados
    Comentários
    Recentes
    últimos reviews
    • 6,0
      [Vídeo] Review Samsung Galaxy Gran Prime Duos TV
      Testamos nestas 2 últimas semanas o Samsung Galaxy Gran Prime Duos TV, a nova aposta da marca sul-coreana no mercado de ...
    • 6,7
      Review Zenfone 6
      Maior aparelho da família Zenfone está no Brasil por R$ 999,00 e espera alcançar a mesma popularidade do Zenfone 5.
    • 8,1
      Review Samsung Galaxy S5
      O smarphone primogênito da família Galaxy é a evolução de seus descendentes, evolução porque não há grandes novidades, m...

    TOPO