Blur Transition & Surface Template

Este slider tem uma aparência limpa e simples, que é suficientemente flexível para ficar bem com qualquer tipo de website. Usa as cores branco e cinzento escuro.

Este slider poder ser formado por ou inserido em “caixas” que o deixa desta maneira em conformidade com o seu website, ou com “full width”/ “largura total” que lhe permite preencher toda a largura horizontal do ecrã do utilizador.

A imagem principal tem uma borda branca muito fina, que é o suficiente para fazer com que as imagens se destaquem, de websites com fundos escuros ou coloridos.

Pairando sob o slide, irão aparecer duas setas de navegação, uma em cada lado do slider. São dois círculos cinzentos escuros com uma borda branca muito fina, contendo uma seta de cor branca. Se passar com o rato sob essas setas, a borda torna-se menos transparente e deste modo mais brilhantes. É um efeito muito subtil de nome roll-over, que assim deixa o utilizador perceber que as setas são interativas. Clicando nas setas permite-lhe navegar por todas as imagens do slider.

Existem legendas no canto inferior esquerdo. O texto das legendas são de cor branca, sob um retângulo com fundo cinzento escuro. O retângulo tem cantos redondos, e uma borda branca muito fina. As legendas são semi-transparentes, o que permite que a imagem de fundo seja visível.

A fonte utilizada é Open Sans Condensed, uma fonte sans-serif que é bastante neutra, mas muito amigável. É especialmente concebida para ecrãs, por isso é muito legível.

Na parte de baixo de cada slide estão uma série de círculos. Cada círculo é branco, com rebordo em cinzento-escuro e rebordo branco. O rebordo duplo é uma escolha de design bastante atrativa e elegante. Cada círculo está interligado a um slide da apresentação. São semitransparentes, exceto o círculo que está interligado ao slide que está a ser apresentado. São ligeiramente transparentes, mas menos do que os outros. Isto ajuda os utilizadores a compreender o funcionamento dos círculos e o que representam.

Passar com o cursor por cima do círculo vai inverter as cores, assim, tornam-se cinzentos-escuros com rebordo branco. Também revela uma pré-visualização da imagem do slide. Cada imagem pré-visualizada tem um rebordo branco semitransparente. Carregar num círculo irá levá-lo para a imagem correspondente e permite aos utilizadores navegar diretamente para a imagem em que estão interessados.

O efeito pré-definido é chamado ‘blur’, este desfoca a imagem anterior no seu efeito de saída e a nova imagem no seu efeito de entrada. É uma transição simples e que funciona com qualquer tipo de imagem. Quase todas as opções de transição funcionam com esta apresentação, mas outra opção boa e razoavelmente neutra é a collage.

O design desta apresentação de slides é bastante flexível e funciona com qualquer tipo de página web desde blogs a lojas online e portfólios. É completamente adaptativo e funciona tão bem em tablets e smartphones como em computadores de mesa e portáteis.