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

Raspberry pi e suas possibilidades

Raspberry Pi!

Desde o começo do ano brincar com coisas novas virou rotina em minha vida. Seja hardware ou software, hoje possuímos uma vasta imensidão de tecnologias a explorar e hoje vou falar de uma tecnologia que vem me deixando muito empolgado:

Raspberry pi

Conhecido por ter sido considerado o menor computador do mundo (acredito que não é mais, vide o intel edson), essa pequena placa custa apenas US$25 (modelo A) ou US$35 (modelo B) e tem como suas principais features:

  • uma CPU ARM1176JZF-S rodando a 700 MHz
  • uma GPU com suporte a OpenGL ES 2.0
  • saída HDMI ou RCA
  • entrada USB e ethernet
  • roda sistemas operacionais baseados em linux (armazenados em um cartão SD).

Continue reading

#JSConfBR – Quarta palestra com Angelina Fabbro

firefox-os

Firefox OS and You: The Web’s Best Little Secret Revealed

Essa foi uma das minhas palestras preferidas, conheço o Firefox OS desda ultima campus party recife, mas essa palestra foi muito legal, principalmente por ver o quanto a mozila está investindo na tentativa de  incentivar desenvolvedores a fazer apps para o FOS.

Continue reading

#JSConfBR – Segunda palestra com Sérgio Lopes

Tudo o que você precisa saber sobre JS carregamento e execução no navegador.

A Segunda palestra do JSConfBR foi muito legal, particulamente uma das que eu mais curti, foi totalmente focada em peformace e esclareceu duvidas interesssantes sobre como o javascript é executado na página e como tornar sua execução o mais rapida possivel.

No carregamento da página, quando o browser identifica uma tag script, ele pausa a renderização até acabar de processar o script, para então seguir com a renderização. Por isso é muito comum os desenvolvedores colocarem o script no final da página para que quando o navegador trave a execução o conteúdo em si já esteja carregado.

Continue reading

#jsconfbr – Primeira palestra com Brendan Eich

LeonardoBalter

Toward a language-neutral browser VM

Essa foi a primeira palestra do #JSConfBR, com ninguém menos que o criador do javascript. Toda a palestra foi focada em linguagem nativa x compilada e tivemos exemplos de execução de um jogo usando a Unreal enginee 3, rodando em javascript através do Emscripten/asm.js/WebGL/WebAudio.

Continue reading

LAB – Testando formatos de Imagens

 

gif-png-jpg-diff

Olá pessoas, como muitos já sabem eu finalmente iniciei minha graduação na Faculdade Marista e por causa disso, o tempo que eu tinha para planejar/postar coisas no blog foi quase que completamente extinto. Mas como a proposta do blog foi postar minhas experiências e compartilhar o que eu aprendi,  vou continuar postando (mais eventualmente que nunca) no blog mesmo que sejam posts curtos e feitos a pressa.

Aproveitando um trabalho passado pela minha professora de Introdução ao planejamento visual (ministrada pela professora: Flavia da Fonte) vou fazer uma pequena comparação e algumas considerações sobre diferentes tipos de formatos de imagens e quais (na situação colocada) seriam as melhores possibilidades para o uso na internet. Lembrando apenas de que isso é baseado em um trabalho de faculdade, logo o conteúdo pode ser um tanto chato básico, mas valeu o esforço. Continue reading

Select Personalizado com Jquery do Zero!

Select Personalizado com Jquery

De todos os inputs do html o mais complicado de personalizar (na minha opinião) é o select, para obter o select personalizado geralmente todos recorrem ao uso de códigos prontos espalhados pela internet. Hoje pretendo fazer um tutorial sobre como obter criar um select altamente personalizado utilizando Jquery + HTML + CSS sem nenhum plugin.

Continue reading