Em 2012...

( Felipe Fialho )

Um piano...

( Felipe Fialho )

Um xadrez

( Felipe Fialho )

É possível utilizar componentes desenvolvidos apenas com CSS?

Massa... Mas quais são as técnicas?

Pseudo-Elements

são usados em CSS para adicionar efeitos diferentes em alguns seletores, ou parte de alguns seletores.

:target

Podemos utilizar o :target para adicionar uma interação com um elemento que possui o ID atrelado em algum elemento [href]

HTML

<a href="#menu">Open menu :)</a>

<nav id="menu">
    <ul>    
	<li><a href="">Home</a></li>
	<li><a href="">About</a></li>
	<li><a href="">Contact</a></li>
    </ul>
</nav>

CSS

a[href="#menu"] {  
    text-align: center;
    display: block;
    position: absolute;
    top: 50%;
    z-index: 2;
    margin-top: -200px;
    text-decoration: none;
    width: 100%;
    font-size: 50px;
    color: #229394;
    -webkit-transition:all ease 0.5s;
    -o-transition:all ease 0.5s;
    transition:all ease 0.5s;
}

#menu:target {
    /* Go Code */
}

Exemplo =D

:checked && ~

Com o :checked, podemos capturar uma interação no elemento alvo e assim utilizamos o ~ para capturar o irmão do elemento em que ocorreu a interação...

HTML

<!-- Collapse -->
<div class="collapse">

  <label class="collapse-btn" for="collapse-1">Lorem ipsum dolor sit amet</label>
  <input class="collapse-open" type="checkbox" id="collapse-1" aria-hidden="true" hidden />

  <div class="collapse-content">
    <div class="collapse-inner">
      ...
    </div>
  </div>

</div>

CSS

.collapse-panel {
  display: none;
}

.collapse-open:checked ~ .collapse-panel {
  display: block;
}

Exemplo =D

Um pequeno teste...

Antes

Um resultado de teste no GTMetrix antes da alteração.

Oque foi feito?

1- Todo o js do site foi removido

2 - Passou-se a usar o Modal e o Collapse do framework 

Resultado

Teste Final

1- O carregamento dos icones foi removido e o CSS embedado

Resultado Final

ajustes que muitas vezes esquecemos de fazer, como diminuir requisições, podem causar um impacto muito maior na perfomance de um projeto.