Category: Html5

Criando um Modal Responsivo 100% CSS

Fazer componentes em CSS puro é um dos privilégiso que chegaram com o CSS3, seguindo essa onda, resouvi criar um modal responsivo que não use JS. É claro que não ter JS nem sempre será uma vantagem em seu projeto, mas acredito que o resultado ficou interessante e resouvi compartilha-lo aqui.

Vamos lá, nosso HTML ficou assim:

<body>
    <h1>Simple Responsive Modal</h1>
    <a href="#modal">Open Modal</a>
    <section id="modal" class="">
       <div class="content">
           <header>
              <h1>Nome do Modal</h1> 
           </header>
            <iframe width="100%" height="405" src="https://www.youtube.com/embed/fLexgOxsZu0" frameborder="0" allowfullscreen></iframe>
              <p id="eow-description">Moonshine Jungle Tour 2014 tickets and more info: <br><a href="http://www.brunomars.com/moonshinejungletour" target="_blank" title="http://www.brunomars.com/moonshinejungletour" rel="nofollow" dir="ltr" class="yt-uix-redirect-link">http://www.brunomars.com/moonshinejun...</a><br><br>Available now on iTunes!.</p>
           <a href="#" class="close">X</a>
       </div>
    </section>
</body>

Como podem ver nada muito complicado, os principais pontos desse HTML são:

section#modal será onde os compontentes do modal ficarão.
div.content será onde o conteudo (seja lá qual for) vai ficar.
<a href=”#modal”></a> será o  link que ativará nosso modal
<a href=”#”></a>  será o link que fechará nosso modal.

Nosso CSS ficará:

body {
    font-family:sans-serif;
    background:gray;
}
#modal::before{
    position: fixed;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.4);
    top: 0;
    left: 0;
    
}
#modal .content{
    position:absolute;
    width:90%;
    max-width: 900px;
    height:90%;
    max-height:600px;
    background:white;
    padding:20px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
    border-radius: 6px;    
}
#modal .content .close{
    width: 30px;
    height: 30px;
    display: block;
    font-weight: bold;
    background-color: black;
    border-radius: 25px;
    color: white;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0px 0px 5px rgb(0,0,0);
    top: -10px;
    right: -10px;
    position: absolute;
    
}
#modal{
    opacity: 0;
    height: 0;
    transition: opacity 0.4s;
    display: block;
    pointer-events: none;
}
#modal:target{
    opacity: 1;
    height: auto;
    pointer-events: auto;
}

A mecanica é bem simples, o :target é ultilizado para adicionar estilo quando uma ancora é selecionada, com ele eu posso ativar nosso modal atravéz daquele link no html. O :before do #modal foi usado pra fazer aquela camada escura embaixo do modal. Esse Modelo em questão se espande tanto em autura quanto em largura, mas acredito que pode ser facilmente adaptado para outras situações.

É isso, espero que tenha a leitura tenha sido proveitosa, se tiver dúvidas sinta-se avontade para deixar nos comentários.

É isso.

Vamos falar de IndexedDB

A Webstore API do HTML5 (local e session storage) já é bastante usada para guardar dados offline, porém essa API não permite uma flexibilidade boa para fazer buscas eficientes, nem guardar dados duplicados em uma mesma chave. Para esses casos existe uma API chamada IndexedDb que consiste basicamente em um banco de dados chave-valor, NoSQL,  disponível offline, rodando diretamente no navegador do usuário. Nesse post pretendo fazer um pouco de como funciona e falar de alguns conceitos que aprendi enquanto estudava essa API.

Continue reading