Essa grade é uma maneira divertida e agradável de exibir várias informações na mesma quantidade de espaço, fazendo com que cada seção da grade deslize em clique ou passe o mouse e exiba conteúdo extra.
No processo de criação, veremos a marcação necessária, alguns estilos e tornando a grade responsiva, bem como a implementação de uma fonte da Web com ícones. Também estudaremos o jQuery necessário, bem como as diferentes opções disponíveis.
Isto é o que vai parecer assim que terminarmos:
Então, como você pode ver, muito simples! Há um div com um ID de 'serviços' e com um nome de classe flutuante claro. Então dentro desse são seis diferentes
Isso é tão simples quanto a marcação, o que significa que, se não houver JavaScript e CSS, ele não vai quebrar o nosso conteúdo, mas ficará visível (além dos ícones, mas como estão vazios) nós não vamos vê-los de qualquer maneira). Então, este é o nosso backup, sem estilos e sem conteúdo JavaScript:
Agora que temos certeza de que o conteúdo é seguro. Podemos passar para o nosso CSS para torná-lo bonito, mas o mais importante é configurá-lo para a funcionalidade do jQuery.
Vamos dividir o CSS em três partes; o essencial que é necessário para fazer nosso jQuery funcionar, o código de fonte do ícone e, em seguida, os estilos finais para torná-lo bonito. Então aqui está a primeira seção:
#services .service {width: 33%;float: left;padding: 0.5em;min-height: 200px;overflow: hidden;position: relative;border: 1px solid #eee;}@media screen and (max-width: 600px) {#services .service {width: 50%;}}@media screen and (max-width: 320px) {#services .service {width: 100%;}}#services .service .service-icon, #services .service .service-description {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #fff;padding: 50px 0;color: #222;}#services .service .service-description {left: 100%;background: #249EC2;color: white;padding: 50px;}#services .service .service-description:hover { cursor: pointer; }
Então vamos ao que está acontecendo aqui. Primeiro, segmentamos os wrappers de caixa individuais (.service) e os organizamos na forma de grade, dando a eles uma largura de fluido, uma altura mínima e flutuando para a esquerda (é por isso que o wrapper geral tem uma correção clara). Então importante fazer seu estouro escondido (caso contrário, veríamos o conteúdo extra em todos os momentos) e sua posição relativa. Então, também estamos tornando essa grade mais amigável, usando algumas consultas de mídia para alguns tamanhos de tela diferentes e aumentando a largura de cada célula. Esse código significa que nossa grade iniciará com um design de 3 colunas no tamanho total da área de trabalho e passará por duas colunas e, finalmente, por uma coluna enquanto diminui o tamanho da tela.
Agora que as caixas externas estão no lugar, temos como alvo as seções internas, o ícone .service e a descrição do serviço. Nós fazemos estas posições absolutas (daí a altura mínima no estilo anterior) e posicionamos ambas no canto superior esquerdo (mudaremos a posição da descrição em um momento). Nós, então, torná-los 100% largos e altos para que eles preencham o elemento pai, e o resto é apenas para efeito visual. Finalmente, visamos apenas a descrição div e fazemos o valor da esquerda 100%. Isso empurra a caixa inteira para a direita e fora da vista devido ao estouro oculto no div. Este valor de posição 'esquerda' é o que estaremos direcionando e animando com o jQuery, e é por isso que é importante defini-lo agora.
Vamos seguir para a próxima etapa, aqui usaremos @ font-face para obter nossa fonte de ícones e definir os nomes de classe que já usamos no HTML para aparecerem como os ícones corretos. O primeiro passo é encontrar um recurso on-line que possa criar uma fonte de ícone adequada às suas necessidades, existem algumas disponíveis, mas para este exemplo eu decidi usar Fontastic . No site em que você escolhe os ícones que deseja usar, isso obviamente muda para qualquer projeto em que você esteja trabalhando. Mas então você pode alterar algumas informações, como os nomes das classes dos ícones e o nome da fonte como este:
Então, como você pode ver, eu escolhi os nomes das classes que usamos no HTML para que eles combinem sem problemas. O serviço fornece um download de uma pasta 'fonts' e um código. Coloque a pasta 'fonts' na sua pasta css (ou onde for mais conveniente para você). Então pegue o código que eles dão e adicione-o ao seu arquivo css. Aqui está o que você precisa:
@font-face {font-family: "slidable-grid";src:url("fonts/slidable-grid.eot");src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),url("fonts/slidable-grid.woff") format("woff"),url("fonts/slidable-grid.ttf") format("truetype"),url("fonts/slidable-grid.svg#slidable-grid") format("svg");font-weight: normal;font-style: normal;}[class^="icon-"]:before,[class*=" icon-"]:before {font-family: "slidable-grid" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;font-size: 4em;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-web:before {content: "a";}.icon-graphic:before {content: "b";}.icon-logo:before {content: "c";}.icon-dev:before {content: "d";}.icon-3d:before {content: "e";}.icon-illustration:before {content: "f";}
E aí você tem isso. Se você recarregar o projeto, os ícones aparecerão. Agora tudo o que resta é terminar o estilo para fazer com que pareça a demo final.
Vamos terminar rapidamente com os estilos finais que restam. Aqui não é nada essencial, apenas design para fazer com que pareça que queremos, por isso é tudo bastante auto-explicativo. Aqui está o código para centralizar a grade e dar a largura máxima. Também para fazer o efeito agradável de passar o mouse sobre os ícones:
@import url(reset.css);* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }.cf:after { clear: both; }.cf { *zoom: 1; }body {font-family: 'Exo 2', sans-serif; /* Google Font http://google.com/fonts */text-align: center;color: #999;background: #444;-webkit-font-smoothing: antialiased;}#services {max-width: 850px;margin: 0 auto;}#services .service .service-icon:hover {cursor: pointer;color: #249EC2;}#services .service .service-icon span {display: block;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;transition: all 0.1s linear;}#services .service .service-icon:hover span {position: relative;bottom: 5px;}
Nosso objetivo com o jQuery é reutilizar o mesmo snippet de código para toda a grade. Vamos ouvir um evento de clique (na caixa de serviço) e, quando isso acontecer, vamos animar a posição do ícone para movê-lo e trazer a descrição, também adicionaremos um nome de classe para ajudar funcionalidade. Então, primeiro inclua o jQuery em sua página, adicione nosso código em outro arquivo de script ou dentro de um