Framework W3.css

Este texto-base aborda os seguintes temas:

Frameworks W3.CSS Painéis e Containers Imagens Hover

● Frameworks

Os frameworks CSS estão atualmente ganhando muita popularidade e é difícil imaginar o desenvolvimento de uma página sem usá-los. Como todas as ferramentas de desenvolvimento, os frameworks CSS estão em constante estado de evolução e melhoria e existem muitos frameworks para você escolher, parece que a cada dia surge um novo, com novas funcionalidades e recursos.

O que são?

De forma básica, frameworks oferecem um modelo com diversas funções prontas e otimizadas para um desenvolvedor para que seja desnecessário gastar tempo desenvolvendo funções em projetos, uma vez que estão disponíveis no framework.

Imagine o framework como um recurso da caixa de ferramentas; caso seja necessário o uso de alguma ferramenta, basta abrir e utilizá-la. Nesse sentido, o uso de frameworks, no desenvolvimento de sites, está se tornando cada vez mais comum para redução de custos e aumento da produtividade.

Qual escolher?

Qual framework usar é uma dúvida que persegue os desenvolvedores de páginas WEB.

Existem diversas listas compiladas com pessoas elegendo os melhores, de acordo com alguns parâmetros, como pode ser observado a seguir por meio do link

Existem milhares de outras listas nas quais você pode escolher um framework para a sua página Web. Nesta unidade, utilizaremos o W3.CSS.

Mas por quê? O W3.CSS é um framework moderno, com capacidade de resposta integrada e nos promete a entrega de vários benefícios, listados a seguir:

● W3.CSS

Como utilizar

Crie um arquivo HTML e salve com o nome “W3CSS”. Não se esqueça de criar a estrutura básica. Existem duas formas de utilizar o framework W3CSS:

A primeira é adicionar uma tag ao link da página com o atributo href com o valor: https://www.w3schools.com/w3css/4/w3.css.

Dessa forma, não precisamos de nenhum arquivo, apenas utilizamos as referências e todas as estilizações são buscadas por meio da internet.

        <!DOCTYPE html>
        <html>
          <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>Document</title>
          </head>
          <body>
          </body>
        </html>

A segunda forma de obter o link para o framework é fazer o download do arquivo CSS, colocá-lo na mesma pasta da sua página e fazer o link.

Para realizar o download, clique nesse link: https://www.w3schools.com/w3css/4/w3.css e clique em “salvar como”. Lembre-se de salvar na mesma pasta do seu arquivo HTML.

              <!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="w3.css">
                  <title>Document</title>
                </head>
                <body>
                </body>
              </html>

VOLTAR PRÓXIMO

● Painéis e Containers

Estamos prontos para começar!

Para o primeiro exemplo utilizando o framework, vamos trabalhar com container e painéis.

Esse recurso oferece a opção de criarmos destaque em algum assunto ou produto de um determinado cliente ou de criarmos um cartão postal.

Para exemplificar, vamos utilizar níveis de classificação de atendimento hospitalar.

1. Crie um arquivo HTML e salve com o nome “exemplo1”. Não se esqueça de criar a estrutura básica e fazer o link para o framework!

Obs.: escolha a forma que mais lhe agrade para utilizar o framework: baixando o arquivo ou referenciando pela internet.

Sem utilizar o framework, vamos iniciar codificando o HTML a seguir:

              <div>
                <h1>Níveis de classificação de Atendimento hospitalar:</h1>
                <h2>4 Prioridades</h2>
                <div>
                  <h3>Emergência</h3>
                  <p>Atendimento Imediato, pois existe o risco de morte</p>
                </div>
                <div>
                  <h3>Prioridade 1</h3>
                  <p>Atendimento o mais rápido possível, porém não existe risco imediato de morte</p>
                </div>
                <div>
                  <h3>Prioridade 2</h3>
                  <p>Pacientes em condições agudas ou não agudas atendidos com prioridade sobre consulta simples</p>
                </div>
                <div>
                  <h3>Prioridade 3</h3>
                  <p>Consultas de baixa complexidade</p>
                </div>
               </div>

2. Perceba que foi criada uma div que engloba as outras 4 e, para cada div, foi colocado um conteúdo diferente. O resultado será:

3. Primeiro vamos criar o container. Sua principal função é prover uma padronização entre seus elementos, ou seja, a ideia é que todos os elementos que estejam dentro desse container sejam padronizados principalmente em:

● Margens;

● Alinhamentos verticais;

● Alinhamentos horizontais;

● Fontes comuns;

● Cores comuns.

Nosso container será a primeira div, como no código a seguir:

<div class="w3-container w3-center">

Perceba que, para utilizar os recursos do framework, basta recorrer ao conceito de classes, aprendido anteriormente. Contudo, ao invés de codificarmos as classes, o framework nos oferece classes prontas, então a classe w3-container define que essa div será um container e a classe w3-center define que tudo que estiver dentro desse container será centralizado.

4. Vamos agora para a segunda div (Emergência). Ela será definida como um painel, classe que vem com algumas configurações ideais para expor informações ou alertas.

<div class="w3-panel w3-red w3-round-xxlarge">

Nesta div, utilizaremos 3 classes, a primeira a define como painel, a segunda classe define que a div tenha a cor de fundo vermelha e, por fim, a terceira classe faz com que esse painel tenha cantos fortemente arredondados.

Repita esse código nas outras três divs (Prioridade 1, Prioridade 2 e Prioridade 3). A única alteração será na classe que define a cor, que deve ficar da seguinte maneira para cada div:

5. Com isso, o código final deve ficar da seguinte forma:

              <body>
                <div class="w3-container w3-center">
                  <h1>Níveis de classificação de Atendimento hospitalar:</h1>
                  <h2>4 Prioridades</h2>

                  <div class="w3-panel w3-red w3-round-xxlarge">
                    <h3>Emergência</h3>
                    <p>Atendimento Imediato, pois existe o risco de morte</p>
                  </div>

                  <div class="w3-panel w3-red w3-round-xxlarge">
                    <h3>Prioridade 1</h3>
                    <p>Atendimento o mais rápido possível, porém não existe risco imediato de morte</p>
                  </div>

                  <div class="w3-panel w3-red w3-round-xxlarge">
                    <h3>Prioridade 2</h3>
                    <p>Pacientes em condições agudas ou não agudas atendidos com prioridade sobre consulta simples</p>
                  </div>

                  <div class="w3-panel w3-red w3-round-xxlarge">
                    <h3>Prioridade 3</h3>
                    <p>Consultas de baixa complexidade</p>
                  </div>
                </div>

6. O resultado será como mostrado na imagem a seguir:

VOLTAR PRÓXIMO

Claro que é possível fazer tudo isso no CSS puro, porém perceba que não precisamos codificar nada em CSS, tudo foi entregue pronto pelo framework. Essa é uma das principais vantagens de utilizar frameworks. Obtemos resultados rápidos com qualidade!

● Imagens

O framework também oferece diversos recursos para serem utilizados em imagens, como cantos arredondados por meio da classe w3-round e suas variações:

● w3-round-small;

● w3-round-large;

● w3-round-xlarge;

● w3-round-xxlarge.

Observação: cada um define o quão arredondado cada canto será.

Crie um arquivo HTML e salve com o nome “exemplo Imagem”. Não esqueça de criar a estrutura básica e fazer o link para o framework. Escolha e salve uma imagem na mesma pasta do arquivo HTML e codifique:

        <div class="w3-container">
          <h2>Imagens com cantos arredondados</h2>
          <p>A classe w3-round cantos arredondados da sua imagem:</p>
          <p>w3-round-small:</p>
          <img src="corrida1.png" class="w3-round-small" style="width:30%">
          <p>w3-round:</p>
          <img src="corrida1.png" class="w3-round" style="width:30%">
          <p>w3-round-large:</p>
          <img src="corrida1.png" class="w3-round-large" style="width:30%">
          <p>w3-round-xlarge:</p>
          <img src="corrida1.png" class="w3-round-xlarge" style="width:30%">
          <p>w3-round-xxlarge:</p>
          <img src="corrida1.png" class="w3-round-xxlarge" style="width:30%">
        </div>

Observação 1: Escolha uma imagem e salve. Altere o valor do atributo src de todas as tags img para o nome e tipo de arquivo da imagem que você salvou.

Observação 2: A imagem original deste exemplo foi retirada do site: www.theenemy.com.br.

O resultado será como mostrado a seguir:

Neste exemplo, é muito simples notar o quanto é fácil utilizar os recursos do framework moldando a imagem de acordo com a nossa necessidade. Claro que o framework não para por aí. Veja o que ainda é possível:

Imagem em formato circular

Imagem com borda

Imagem em escala de cinza

Código

Resultado

Código

Resultado

Código

Resultado

Para ver e testar mais recursos com imagens do framework, acesse:

https://www.w3schools.com/w3css/w3css_images.asp

● Hover

Com o hover, é possível criar efeitos apenas com CSS. Quando o mouse passar em uma imagem ou texto, você pode aplicar qualquer configuração.

Com o framework, é muito simples utilizá-lo. Vamos para a prática!

Crie um arquivo HTML e salve com o nome “hoverImagens”. Não se esqueça de criar a estrutura básica e fazer o link para o framework. Escolha e salve uma imagem na mesma pasta do arquivo HTML e codifique:

        <body>
          <p>w3-hover-grayscale:</p>
          <img src="corrida1.png" class="w3-hover-grayscale" style="width:300px">
          <p>w3-hover-opacity:</p>
          <img src="corrida1.png" class="w3-hover-opacity" style="width:300px">
        </body>

Quando codificamos a classe w3-hover-grayscale na tag img, no navegador, podemos perceber que, ao passar com o mouse em cima da imagem, será aplicado o efeito de escala de cinza, conforme demonstrado na imagem a seguir:

O mesmo vale para w3-hover-opacity e w3-hover-sepia, conforme a seguir:

O recurso hover não é para uso exclusivo em imagens, pode ser usado em qualquer tag. Podemos testar na prática, criando outro exemplo. Vamos lá!

Criando outro exemplo

Crie um arquivo HTML e salve com o nome “hover”. Não se esqueça de criar a estrutura básica e fazer o link para o framework.

Faça a codificação, conforme exemplo:

              <body>
                <p>w3-hover-grayscale:</p>
                <img src="corrida1.png" class="w3-hover-grayscale" style="width:300px">
                <p>w3-hover-opacity:</p>
                <img src="corrida1.png" class="w3-hover-opacity" style="width:300px">
              </body>

Agora, basta passar o mouse por cima do retângulo vermelho e ver o efeito acontecer.

Outros recursos

Claro que este framework oferece muitos outros recursos que estão divididos em algumas classes, conforme pode-se ver:

Classes

Container;

Table;

Card;

Responsive;

Layout;

Navigation;

Button;

Input;

Modal;

Animation;

Font and Text;

Display;

Effect;

Background color;

Text color;

Hover;

Round;

Padding;

Margin;

Border.

Essas classes se subdividem em muitas outras. Para ver todas as referências e classes, acesse o link oficial:

https://www.w3schools.com/w3css/w3css_references.asp