devgiordane

[devgiordane]

Recriando menu do jogo poderoso chefão com CSS Opa dev, vamos de um pouco de nostalgia de novo? De vez eu vou recriar em CSS o menu do game the godfather, o Poderoso Chefão, bora lá?

[devgiordane]

Efeito texto “Recortado” com CSS Opa dev, no vídeo de hoje vamos aprender a fazer esse efeito de um texto em perspectiva que ao passar o mouse se desloca e da esse efeito de que foi "recortado".

[devgiordane]

Dividindo imagem em 3 partes com CSS

Dividindo imagem em 3 partes com CSS

Opa dev, no vídeo de hoje vamos aprender mais um truque com o object-fit, e a propriedade object-position. Bora lá?

Document

View On WordPress

[devgiordane]

Recriando o menu do GTA San Andreas com CSS

Recriando o menu do GTA San Andreas com CSS

Opa dev, hoje o vídeo é bem nostálgico. Vamos recriar o menu do GTA SA com CSS, bora lá?

Document PAUSE MENU RESUME START NEW GAME MAP STATS BRIEF OPTIONS QUIT GAME

View On WordPress

[devgiordane]

Efeito de "persianas" com CSS

Efeito de “persianas” com CSS

Opa dev, no vídeo de hoje eu vou te ensinar a como fazer um efeito de hover onde você pode mostrar o conteúdo que está através de uma div com um efeito que se assemelha persianas ou cortinas.

View On WordPress

[devgiordane]

Lista com efeito ao passar o mouse

Lista com efeito ao passar o mouse

Opa dev, hoje vamos aprender a fazer esse efeito bem legal onde o item “desliza” para o lado e uma seta aparece ao passar o mouse. bora lá?

HTML

<ul> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> </ul>

CSS

body { background:…

View On WordPress

[devgiordane]

Filtros de imagem com css

Filtros de imagem com css

Fala dev no vídeo de hoje, vamos aprender a fazer filtros de imagem com CSS, bora lá?

css

body { height: 100vh; margin: 0; } #app { height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } input { font-size: 30px; width: 90%; } .res { height: 400px; width: auto; margin-top:…

View On WordPress

[devgiordane]

Gerador de QRCode com Javascript

Gerador de QRCode com Javascript

Opa Dev_ no vídeo de hoje eu te ensinar a como usar a biblioteca QRCode.js para criar facilmente códigos QR.

HTML

Pomodoro Fundo Contraste URL GERAR QRCODE BAIXAR IMAGEM

View On WordPress

[devgiordane]

Desenhando uma flor com CSS

Desenhando uma flor com CSS

Opa Dev_ hoje o tutorial é uma fofura só! Vamos aprender a desenhar uma flor 🙂

<div class="flor"> <div class="ponta"><span>TENHA</span></div> <div class="ponta"><span>UM</span></div> <div class="ponta"><span>BOM</span></div> <div class="ponta"><span>DIA!</span></div> </div>

body{ margin: 0; height: 100vh; display: flex; justify-content:…

View On WordPress

[devgiordane]

Botão com efeito de degradê ao passar o mouse com CSS efeito :hover

Botão com efeito de degradê ao passar o mouse com CSS efeito :hover

No vídeo de hoje eu vim dar uma dica de como criar um efeito de degradê com o linear gradient, e para não ensinar só isso, eu vou te mostrar também como usara propriedade :hover no CSS.

HTML

<a href="#" class="btn">CLICK ME</a>

CSS

body { background-color: teal; height: 100vh; display: flex; justify-content:…

View On WordPress

[devgiordane]

Personalizando o cursor do mouse com css

Personalizando o cursor do mouse com css

Opa Dev_ no vídeo de hoje eu vou te ensinar a como personalizar o ponteiro do mouse no seu site.

Cursores Passe o mouse sobre cada paragrafo e veja a mudança do…

View On WordPress

[devgiordane]

Enumerando listas em HTML - ol e ul

Enumerando listas em HTML – ol e ul

Opa pessoal! No vídeo de hoje eu vou falar um pouco sobre as listas em HTML, vamos falar um pouco sobre as propriedades das listas ordenadas, a type que nos permite ordenar listas com letras e até caracteres romanos, e a start que nos permite inciar a lista a partir de um determinado valor. Eu mostro também como você poder criar uma enumeração de uma ul usando o counter-reset: lista; e no…

View On WordPress

[devgiordane]

Criando um ToolTips com CSS

Criando um ToolTips com CSS

Opa Dev_ no vídeo de hoje eu vou te ensinar a como criar um tooptio usando apenas css, bora lá?

HTML

<div class="tooltip"> hover me <span class="tooltiptext"> Tooltip text </span> </div>

CSS

.tooltip{ position: relative; display: inline-block; border-bottom: 1px…

View On WordPress

[devgiordane]

IF ternário e CONDICIONAL de curto-circuito

IF ternário e CONDICIONAL de curto-circuito

o if ternário, é uma forma abreviada de escrever uma condicional. A condicional de curto-circuito usando o operador && só executa o que está a direita, quando a condição que está no lado esquerdo do operador for verdadeira. Você já conhecia essas duas?

exemplo sem if ternário

let a = 1 let b = 2 let c = 100 if (a > b) { console.log("A maior que B"); } if (b < c) { console.log("B é menor do…

View On WordPress

[devgiordane]

Botão com efeito Toggle Switch body { background: #00a5f6; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } input[type="checkbox"] { -webkit-appearance: none; width: 250px; height: 100px; background-color: rgb(87, 87, 87); border-radius: 100px; position: relative; transition: all 0.5s ease-in-out; outline: none; } input[type="checkbox"]::before { transition: all 0.5s ease-in-out; content: ""; position: absolute; left: 0; background-color: teal; width: 100px; height: 100px; border-radius: 50vh; transform: scale(1.1); } input[type="checkbox"]:checked { background-color: teal; } input[type="checkbox"]:checked::before { background-color: white; left: 150px; } <input type="checkbox" name="" id="" />

[devgiordane]

Conheça o LocalStorage

Fala dev_ no vídeo de hoje eu vou te mostrar como usar o localstorage, uma alternativa bem mais simples de se trabalhar que os cookies para armazenar dados locais.

ADD {{tarefa}}

View On WordPress

[devgiordane]

Desenhando uma Gota d'água com CSS

Nesse vídeo eu ensino a fazer o desenho de uma gota em CSS, a dica aqui é usar o transform: rotate() e o border-radius, com um pouco de criatividade na propriedade box-shadow é possível chegar a um resultado bem interessante.

Nesse vídeo eu ensino a fazer o desenho de uma gota em CSS, a dica aqui é usar o transform: rotate() e o border-radius, com um pouco de criatividade na propriedade box-shadow é possível chegar a um resultado bem interessante.

<div class="drop"> <!-- Dev_ Giordane --> </div>

body { margin: 0; display: flex; height:…

View On WordPress