brand logo
 Página inicial / W3.CSS / Tutorial: W3Schools css menu com borda sombreada

Tutorial: W3Schools css menu com borda sombreada

W3.CSS
 -
W3Schools css menu com borda sombreada Voltar para à Página inicial 

Se você deseja aprender a como fazer um menu com borda sombreada no W3.CSS, esse tutorial é para você. O Framework W3.CSS ou W3Schools css, vai tornar essa tarefa fácil de ser realizada.

Este é o resultado final do nosso menu com borda sombreada:


W3Schools css menu com borda sombreada (código)

<!DOCTYPE html>
<html lang="pt-br">
  
 <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <title>Menu com borda sombreada</title>
 </head>

 <body>

    <nav class="w3-bar w3-border w3-border-black w3-card-4 w3-yellow">
      <a href="#" class="w3-bar-item w3-button w3-hover-white">MixTutoriais</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-white">WORDPRESS</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-white">WINDOWS</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-white">LINUX</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-white">W3.CSS</a>
    </nav>

    <div class="w3-xxlarge w3-display-middle">MENU COM BORDA SOMBREADA W3.CSS (MixTutoriais)
    </div>

 </body>

</html>

Explicando um pouco as classes do W3.CSS

Vou explicar rapidamente a função de algumas classes importantes deste menu sombreado:

Classes da tag <nav></nav>

w3-bar: é um contêiner / barra que exibirá todos os elementos horizontalmente.

w3-border: adiciona uma borda para todo o menu (em cima (top), direita (right), baixo (bottom), esquerda (left)).

w3-border-black: adiciona cor à borda do menu.

w3-card-4: adiciona sombreamento ao menu. *Esta classe tem outras funções também.

w3-yellow: cor de background para o menu.

Classes da tag <a></a>

w3-bar-item: adiciona todos os elementos ao contêiner/barra.

w3-button: herda à característica de botão.

w3-hover-white: exibe uma cor ao passar o mouse pelo elemento.

Aprenda mais:

Se chegou até aqui, você é determinado(a)! Espero que tenha gostado deste guia. Aqui no blog MixTutoriais eu dou várias dicas sobre: Windows, Linux e WordPress. Até o próximo tutorial!

FONTE

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *