Introdução ao W3.CSS (pia da cozinha)
Cores W3.CSS
As classes w3-color são inspiradas em cores modernas usadas em marketing, sinais de trânsito e notas adesivas:
Contêineres W3.CSS
A classe w3-container é a mais importante das classes W3.CSS. Ele fornece igualdade como:
- Margens comuns
- Preenchimentos comuns
- Alinhamentos verticais comuns
- Alinhamentos horizontais comuns
- Fontes comuns
- Cores comuns
A classe w3-container é normalmente usada com elementos de contêiner HTML, como:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> e muito mais.
Este é um cabeçalho
Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom. Este artigo é cinza claro e o texto é marrom.
Este é um rodapé.
W3. Painéis CSS, Notas e Cotações
A classe w3-panel pode exibir todos os tipos de notas e citações:
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Alertas W3.CSS
A classe w3-panel também pode ser usada para todos os tipos de alertas:
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Aviso!
Amarelo geralmente indica um aviso que pode precisar de atenção.
Sucesso!
Verde muitas vezes indica algo bem sucedido ou positivo.
Informações!
Azul geralmente indica uma mudança ou ação informativa neutra.
Exemplo
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Cartões W3.CSS
As classes w3-card são adequadas para imagens e notas:
Um carro
Um carro é um veículo motorizado com rodas e automotor usado para transporte. A maioria das definições do termo especifica que os carros são projetados para rodar principalmente em estradas, com assentos para uma a oito pessoas e, normalmente, com quatro rodas.
(Wikipédia)
Surpreendente
Alpes franceses
Exemplo
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
Tabelas W3.CSS
As classes w3-table podem lidar com todos os tipos de tabelas:
| Primeiro nome | Último nome | Pontos |
|---|---|---|
| Jill | Smith | 50 |
| véspera | Jackson | 94 |
| Adão | Johnson | 67 |
| Anja | Calibre | 100 |
Exemplo
<table class="w3-table w3-striped w3-border">
Listas W3.CSS
A classe w3-ul pode lidar com todos os tipos de listas:
-
Mike
Web Designer -
Suporte Jill
-
Jane
Contadora -
Jack
Conselheiro
Exemplo
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Botões W3.CSS
A classe w3-button e w3-btn fornece botões de todos os tamanhos e tipos.
Botões largos:
Botões circulares ou quadrados:
W3.CSS Tags, Labels, Badges e Signs
As classes w3-tag e w3-badge são capazes de exibir todos os tipos de tags, etiquetas, crachás e sinais:
2 8 UMA B
Novo Aviso Perigo Informações
RESPIRE
DEBAIXO DA ÁGUA
W3.CSS responsivo
As classes Responsive Grid fornecem capacidade de resposta para todos os tipos de dispositivos: PC, laptop, tablet e celular.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
descanso
1/4
descanso
100px
45px
descanso
O W3.CSS também suporta uma grade de fluido móvel de 12 colunas com classes pequenas, médias e grandes.
Exibição W3.CSS
As classes w3-display permitem exibir elementos HTML em posições específicas:
Modais W3.CSS
A classe w3-modal fornece diálogo modal em HTML puro:
Imagem Modal:
Barras de progresso W3.CSS
Leia mais em Barras de Progresso W3.CSS
Listas suspensas W3.CSS
As classes suspensas w3 fornecem listas suspensas:
Acordeões W3.CSS
Read more at W3.CSS Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.