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 | @jonathanlamimkt 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.

CSS: 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.

  • Mais sobre: css touch screen folha de estilo
    Share Tweet
    Recomendado
    Comentários
    Carregar comentários
    Destaquesver tudo
    • ASSINE NOSSA NEWSLETTER

      As melhores publicações no
      seu e-mail

    • Preencha para confirmar