CSS: Teclado para tela Touch Screen

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.

Por Programaçã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):


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.

  • Recomendado
    Siga nas redes
    Últimas publicações
    O QUE LER EM SEGUIDA
    Assuntos css, touch screen e folha de estilo
    Siga nas redes
    Encontrou algum erro no texto?

    Entre em contato com o autor e nos ajude a melhorar a qualidade dos posts cada vez mais!

    AVISAR
    Comentários
    ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail