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 quando 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.
Temos um teclado da seguinte maneira (aqui coloquei apenas alguns itens, você deverá colocar todos os itens do teclado):
<ul> <br /><li><a href="#ndo">º</a></li> <br /><li><a href="#1">1</a></li> <br /><li><a href="#2">2</a></li> <br /><li><a href="#3">3</a></li> <br />... <br /></ul> O que teremos que fazer é dar aos <li> o estilo de bloco e float à esquerda e os links quando estiverem ativos trocar o estilo, assim a tecla ficará sobre as outras.
ul { <br />clear: both; <br />} <br /><br />li { <br />margin: 5px; <br />display: block; <br />width: 50px; <br />height: 50px; <br />float: left; <br />background: #008585; <br />text-align: center; <br />vertical-align: middle; <br />} <br /><br />a { <br />background: #008585; <br />color: #FFFFFF; <br />text-decoration: none; <br />text-transform: uppercase; <br />font-family: Verdana; <br />font-size: 175%; <br />} <br /><br />a:active { <br />display: block; <br />background: #E1E8CD; <br />color: #008585; <br />width: 100px; <br />height: 150px; <br />position: relative; <br />top: -100px; <br />left: -25px; <br />font-size: 275%; <br />} E assim finalizamos o teclado. Veja o exemplo clicando aqui.
É programador, escritor e palestrante. Autor dos livros "CodeIgniter: Produtividade na criação de aplicações web em PHP", "Amazon AWS: Descomplicando a computação na nuvem" e "PHP 7 - Mudanças e Novidades". Idealizador do portal Universidade CodeIgniter, onde escreve semanalmente sobre o framework CodeIgniter.
