Acendendo seu primeiro LED (em CSS)

Não, você não precisa mais comprar um Arduino para acender o seu primeiro LED. Neste artigo vamos verificar como montar e acender o seu primeiro LED utilizando apenas HTML e CSS. É simples, rápido, e você pode visualizá-lo em todos os navegadores mais modernos.

Iniciando com HTML

Os primeiros passos para criarmos o nosso LED é adicionarmos as TAGs HTML. Como não sou nenhum especialista em LEDs, vamos nomear as partes do componente com palavras que mais remetam ao que elas são (pelo menos para mim).

O HTML base que vamos utilizar é o seguinte:

1
2
3
4
5
6
7
8
<div class="led">
  <div class="cabeca"></div>
  <div class="base"></div>
  <div class="pernas">
    <div class="perna"></div>
    <div class="perna curta"></div>
  </div>
</div>

Continuando pela cabeça

Agora que já temos a base, podemos começar com o nosso CSS. Primeiramente adicionamos um fluxo base para a nossa classe LED, definindo que os nossos componentes ficarão um em cima do outro, utilizando o layout flex (se você ainda não conhece muito o flex recomendo fortemente o Flexbox Froggy):

1
2
3
4
5
.led {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Após isso, adicionamos os estilos para a cabeça do led, com as bordas superiores arredondadas:

1
2
3
4
5
6
.cabeca {
  width: 10em;
  height: 15em;
  border-radius: 5em 5em 0 0;
  border: 1px solid lightgray;
}

Podemos adicionar ainda um background mais bonito para o nosso componente, com um degradê para parecer um pouco mais redondo:

1
2
3
4
5
6
.cabeca {
  width: 10em;
  height: 15em;
  border-radius: 5em 5em 0 0;
  background-image: linear-gradient(to top right, rgb(211, 211, 211, 0.5) 20%, rgb(211, 211, 211, 0.3) 60%, rgb(211, 211, 211, 0.2));
}

Seguindo pela base

Na sequência, continuamos pela base do LED. A base é bastante parecida com a cabeça, diferenciamento apenas pelo tamanho e a borda arredondada em todos os lados

1
2
3
4
5
6
.base {
  width: 13em;
  height: 3em;
  border-radius: 1em;
  background-image: linear-gradient(to bottom right, rgb(211, 211, 211, 0.5) 20%, rgb(211, 211, 211, 0.3) 60%, rgb(211, 211, 211, 0.2));
}

Pernas

Para concluir o layout do LED, adicionamos as perninhas do LED (que em um mundo ideal seriam utilizadas para conectar o LED com a fonte de energia).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.pernas {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.perna {
  height: 15em;
  width: 0.2em;
  background-color: gray;
  margin: 0 2em;
}
.curta {
  height: 10em;
}

Acendendo o LED

Com a casca do LED concluída, só precisamos acendê-lo. Para acender a luz podemos utilizar o box-shadow que vai criar um efeito de sombra colorida no nosso LED. Além disso, podemos ajustar a cor do nosso linear gradient para ficar mais parecido com a cor da iluminação.

Abaixo coloquei o estilo para LEDs vermelhos, verdes e azuis, que podem ser testados com os radio buttons no exemplo abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.red-light {
  box-shadow: 0px 0px 75px 10px rgb(255,0,0);
}
.red {
  background-image: linear-gradient(to top right, rgba(255, 50, 50, 0.5) 20%, rgba(255, 50, 50, 0.3) 60%, rgba(255, 50, 50, 0.2)) !important;
}
.green-light {
  box-shadow: 0px 0px 75px 10px rgb(0,255,0);
}
.green {
  background-image: linear-gradient(to top right, rgba(50, 255, 50, 0.5) 20%, rgba(50, 255, 50, 0.3) 60%, rgba(50, 255, 50, 0.2)) !important;
}
.blue-light {
  box-shadow: 0px 0px 75px 10px rgb(0,0,255);
}
.blue {
  background-image: linear-gradient(to top right, rgba(50, 50, 255, 0.5) 20%, rgba(50, 50, 255, 0.3) 60%, rgba(50, 50, 255, 0.2)) !important;
}


Conclusão

Com esses simples passos conseguimos acender o nosso primeiro LED utilizando apenas HTML e CSS. Pode parecer um passo pequeno, mas esse tutorial pode ser uma ótima porta de entrada para um novo mundo de desenvolvimento de softwares embarcados (porém em CSS).

Post Anterior
Post Seguinte