W3.CSS Introducción (fregadero de cocina)
Colores W3.CSS
Las clases de color w3 están inspiradas en los colores modernos utilizados en marketing, señales de tráfico y notas adhesivas:
Contenedores W3.CSS
La clase w3-container es la más importante de las clases W3.CSS. Proporciona igualdad como:
- Márgenes comunes
- acolchados comunes
- Alineaciones verticales comunes
- Alineaciones horizontales comunes
- fuentes comunes
- colores comunes
La clase w3-container se usa normalmente con elementos contenedores HTML, como:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> y más.
Este es un encabezado
Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón.
Este es un pie de página.
W3.CSS Paneles, notas y cotizaciones
La clase w3-panel puede mostrar todo tipo de notas y citas:
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Alertas W3.CSS
La clase w3-panel también se puede utilizar para todo tipo de alertas:
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
¡Advertencia!
El amarillo a menudo indica una advertencia que podría necesitar atención.
¡Éxito!
El verde a menudo indica algo exitoso o positivo.
¡Información!
El azul a menudo indica un cambio o acción informativo neutral.
Ejemplo
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Tarjetas W3.CSS
Las clases de tarjetas w3 son adecuadas tanto para imágenes como para notas:
Un coche
Un automóvil es un vehículo autopropulsado con ruedas que se utiliza para el transporte. La mayoría de las definiciones del término especifican que los automóviles están diseñados para funcionar principalmente en carreteras, tener asientos para una a ocho personas y, por lo general, tener cuatro ruedas.
(Wikipedia)
Increíble
Alpes franceses
Ejemplo
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
Tablas W3.CSS
Las clases de tabla w3 pueden manejar todo tipo de tablas:
| Primer nombre | Apellido | Puntos |
|---|---|---|
| Jill | Herrero | 50 |
| víspera | jackson | 94 |
| Adán | Johnson | 67 |
| Anja | Aburrir | 100 |
Ejemplo
<table class="w3-table w3-striped w3-border">
Listas W3.CSS
La clase w3-ul puede manejar todo tipo de listas:
-
mike
diseñador web -
apoyo
_ -
jane
contable -
Consejero de Jack
Ejemplo
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Botones W3.CSS
Las clases w3-button y w3-btn proporcionan botones de todos los tamaños y tipos.
Botones anchos:
Botones circulares o cuadrados:
W3.CSS Etiquetas, rótulos, distintivos y letreros
Las clases w3-tag y w3-badge son capaces de mostrar todo tipo de etiquetas, etiquetas, insignias y letreros:
2 8 A B
Nuevo Advertencia Peligro Información
RESPIRAR
BAJO EL AGUA
W3.CSS Responsivo
Las clases de Responsive Grid brindan capacidad de respuesta para todos los tipos de dispositivos: PC, computadora portátil, tableta y móvil.
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
descansar
1/4
descansar
100 píxeles
45px
descansar
W3.CSS también admite una cuadrícula fluida móvil primero de 12 columnas con clases pequeñas, medianas y grandes.
Pantalla W3.CSS
Las clases w3-display le permiten mostrar elementos HTML en posiciones específicas:
Modales W3.CSS
La clase w3-modal proporciona diálogo modal en HTML puro:
Imagen modal:
Barras de progreso W3.CSS
Lea más en Barras de progreso W3.CSS
Menús desplegables de W3.CSS
Las clases w3-dropdown proporcionan menús desplegables:
Acordeones 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.