Linux tutoriais, Windows tutoriais, Wordpress tutoriais
Página inicialW3.CSSTutorial: W3Schools css menu com borda sombreada
W3Schools css menu com borda sombreada

Tutorial: W3Schools css menu com borda sombreada

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 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 neste menu sombreado.

Classes da <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 <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.

Se desejar aprender mais:

Espero ter te ajudado com este tutorial e não deixe de conferir os outros tutoriais sobre WordPress, Windows, W3.CSS, Linux e Saúde pois são preparados para usuários novos e intermediários. Tenho também vários links de cupons para produtos, cursos e games, aproveite. Até o próximo tutorial.

FONTE

Flaubert Henriques
Atualizado em 24/10/2019 - Escrito a 3 semanas.
Categoria: W3.CSS
Tags: , , ,

Deixe um comentário

avatar
  Inscreva-se  
Seguir comentários