Referencia W3.CSS
Clases W3.CSS
Clases de contenedores
| Clase | define | |
|---|---|---|
| contenedor w3 | Contenedor HTML con relleno izquierdo y derecho de 16px | |
| Usado como encabezado | ||
| Usado como pie de página | ||
| panel w3 | Contenedor HTML con relleno izquierdo y derecho de 16 px y margen superior e inferior de 16 px | |
| Se utiliza para mostrar una nota. | ||
| Se utiliza para mostrar una cotización | ||
| w3-insignia | Insignia circular | |
| día w3 | Etiqueta rectangular | |
| w3-ul | Lista desordenada | |
| w3-display-container | Contenedor para w3-display- classes (permite posicionar elementos dentro del contenedor) | |
| bloque w3 | Clase que se puede usar para definir un ancho completo para cualquier elemento | |
| código w3 | Contenedor de código | |
| w3-codespan | Contenedor de código en línea (para fragmentos de código) | |
| contenido w3 | Contenedor para contenido centrado de tamaño fijo | |
| coche w3 | Contenedor para contenido centrado en el tamaño receptivo | |
| w3-estiramiento | Clase que elimina los márgenes derecho e izquierdo (especialmente útil para estirar filas acolchadas (w3-row-padding)) |
Clases de tabla
| Clase | define | |
|---|---|---|
| tabla w3 | Contenedor para una tabla HTML | |
| w3-rayado | mesa rayas | |
| borde w3 | tabla bordeada | |
| w3 bordeado | Líneas bordeadas | |
| centrado en w3 | mesa centrada | |
| w3-flotable | Mesa flotante | |
| w3-tabla-todo | Todas las propiedades establecidas | |
| Con rayas w3, borde w3 y borde w3 | ||
| con cabeza de color | ||
| Con respuesta w3 | ||
| con w3-pequeño | ||
| con w3-pequeño | ||
| con w3-grande | ||
| Con w3-xgrande | ||
| Con w3-xxlarge | ||
| Con w3-xxxgrande | ||
| con color | ||
| con w3 jumbo | ||
| w3-responsivo | Crea una tabla receptiva |
Clases de tarjetas
| Clase | define | |
|---|---|---|
| tarjeta w3 | Igual que w3-card-2 | |
| w3-tarjeta-2 | Contenedor para cualquier contenido HTML (sombra bordeada de 2px) | |
| w3-tarjeta-4 | Contenedor para cualquier contenido HTML (sombra bordeada de 4px) |
Clases receptivas
| Clase | define | |
|---|---|---|
| fila w3 | Contenedor para una fila de contenido adaptable fluido | |
| w3-fila-relleno | Fila donde todas las columnas tienen un relleno predeterminado | |
| coche w3 | Contenedor para contenido centrado en el tamaño receptivo | |
| w3-estiramiento | Clase que elimina los márgenes derecho e izquierdo | |
| w3-mitad | Contenedor de columna de media (1/2) pantalla | |
| w3-tercero | Tercer (1/3) contenedor de columna de pantalla | |
| w3-dos tercios | Contenedor de columna de pantalla de dos tercios (2/3) | |
| w3 cuartos | Contenedor de columna de pantalla de un cuarto (1/4) | |
| w3-tres cuartos | Contenedor de columna de pantalla de tres cuartos (3/4) | |
| w3-col | Contenedor de columnas para cualquier contenido HTML | |
| w3-descanso | Ocupa el resto del ancho de la columna. | |
| l1 - l12 | Tamaños receptivos para pantallas grandes | |
| m1 - m12 | Tamaños receptivos para pantallas medianas | |
| s1 - s12 | Tamaños adaptables para pantallas pequeñas | |
| w3-ocultar-pequeño | Ocultar contenido en pantallas pequeñas (menos de 601 px) | |
| w3-ocultar-medio | Ocultar contenido en pantallas medianas | |
| w3-ocultar-grande | Ocultar contenido en pantallas grandes (más de 992 px) | |
| imagen w3 | imagen receptiva | |
| w3-móvil | Agrega capacidad de respuesta móvil primero a cualquier elemento. Muestra elementos como elementos de bloque en dispositivos móviles. |
Clases de diseño
| Clase | define | |
|---|---|---|
| w3-fila de celdas | Contenedor para columnas de diseño (celdas). | |
| celda w3 | Columna de diseño (celda). | |
| w3-cell-top | Alinea el contenido en la parte superior de una columna (celda). | |
| w3-celda-medio | Alinea el contenido en el medio vertical de una columna (celda). | |
| fondo de celda w3 | Alinea el contenido en la parte inferior de una columna (celda). |
Clases de barra - Navegación
| Clase | define | |
|---|---|---|
| barra w3 | Barra horizontal | |
| w3-bar-bloque | Barra vertical | |
| w3-bar-elemento | Proporciona un estilo común para los elementos de la barra. | |
| w3-barra lateral | barra lateral | |
| Una barra lateral puede contener todo tipo de contenido | ||
| Una barra lateral superpuesta al contenido principal | ||
| Una barra lateral superpuesta a todo el contenido principal | ||
| Una barra lateral que desplaza el contenido principal hacia la derecha | ||
| Una barra lateral con un fondo superpuesto | ||
| Una barra lateral en el lado derecho | ||
| w3-colapso | Se usa junto con w3-sidebar para crear una navegación lateral receptiva completamente automática. Para que esta clase funcione, el contenido de la página debe estar dentro de una clase "w3-main" | |
| w3-principal | Contenedor para el contenido de la página cuando se usa la clase w3-collapse para navegaciones laterales receptivas | |
| Navegación lateral receptiva del lado derecho completamente automática |
Clases desplegables
| w3-desplegable-clic | Elemento desplegable en el que se puede hacer clic | |
| w3-desplegable-hover | Elemento desplegable flotante | |
| Elemento desplegable desplazable (usado en w3-bar) | ||
| Elemento desplegable flotante (usado en w3-bar-block) | ||
| Elemento desplegable desplazable (usado en w3-sidebar) |
Clases de botones
| Clase | define | |
|---|---|---|
| botón w3 | Botón rectangular con color de fondo gris al pasar el mouse | |
| w3-btn | Botón rectangular con sombras al pasar el mouse | |
| círculo w3 | Se puede utilizar para crear un botón circular. | |
| ondulación w3 | Botón rectangular con efecto dominó | |
| Botón flotante circular con efecto dominó | ||
| barra w3 | Se puede usar para agrupar elementos (como botones) en una barra horizontal | |
| bloque w3 | Clase que se puede usar para definir un botón w3 de ancho completo | |
| Ancho completo w3-btn | ||
| Botón circular de ancho completo |
Clases de entrada
| Clase | define | |
|---|---|---|
| entrada w3 | Elementos de entrada | |
| Formulario de entrada como una tarjeta | ||
| Elementos de entrada (etiquetas superiores) | ||
| Elementos de entrada (etiquetas inferiores) | ||
| w3-cheque | Tipo de entrada de casilla de verificación | |
| radio w3 | Tipo de entrada de radio | |
| w3-seleccionar | Elemento de selección de entrada | |
| w3-animate-entrada | Anima el ancho de una entrada al 100% |
Clases Modales
| Clase | define | |
|---|---|---|
| w3-modal | contenedor modal | |
| w3-modal-contenido | Elemento emergente modal | |
| w3-información sobre herramientas | Elemento de información sobre herramientas | |
| w3-texto | Texto de información sobre herramientas |
Clases de Animación
| Clase | define | |
|---|---|---|
| w3-animate-superior | Anima un elemento desde la parte superior -300px a 0px | |
| w3-animar-izquierda | Anima un elemento desde la izquierda -300px a 0px | |
| w3-animar-fondo | Anima un elemento desde la parte inferior -300px a 0px | |
| w3-animar-derecha | Anima un elemento desde la derecha -300px a 0px | |
| w3-animate-opacidad | Anima la opacidad de un elemento de 0 a 1 | |
| w3-animar-zoom | Anima un elemento de 0 a 100% de tamaño | |
| w3-animate-fading | Anima la opacidad de un elemento de 0 a 1 y de 1 a 0 (se desvanece y se desvanece) | |
| giro w3 | Girar un icono 360 grados | |
| Gira cualquier elemento 360 grados | ||
| w3-animate-entrada | Anima el ancho de un campo de entrada al 100% |
Clases de fuentes y texto
| Clase | define | |
|---|---|---|
| w3-pequeño | Especifica un tamaño de fuente de 10 píxeles | |
| w3-pequeño | Especifica un tamaño de fuente de 12 píxeles | |
| w3-grande | Especifica un tamaño de fuente de 18 píxeles | |
| w3-xgrande | Especifica un tamaño de fuente de 24 píxeles | |
| w3-xxgrande | Especifica un tamaño de fuente de 32 píxeles | |
| w3-xxxgrande | Especifica un tamaño de fuente de 48 píxeles | |
| w3-jumbo | Especifica un tamaño de fuente de 64 píxeles | |
| ancho w3 | Especifica un texto más ancho | |
| w3-serif | Cambia la fuente a serif | |
| w3-sans-serif | Cambia la fuente a sans-serif | |
| w3-cursiva | Cambia la fuente a cursiva. | |
| w3-monoespaciado | Cambia la fuente a monoespaciada |
Mostrar clases
| Clase | define | |
|---|---|---|
| w3-centro | contenido centrado | |
| w3-izquierda | Flota un elemento a la izquierda (flotante: izquierda) | |
| w3-derecha | Flota un elemento a la derecha (flotante: derecha) | |
| w3-alinear a la izquierda | Texto alineado a la izquierda | |
| w3-alinear a la derecha | Texto alineado a la derecha | |
| w3-justificar | Texto alineado a la derecha y a la izquierda | |
| bloque w3 | Clase que se puede usar para definir un ancho completo para cualquier elemento | |
| círculo w3 | Contenido en un círculo | |
| w3-ocultar | Contenido oculto (pantalla: ninguno) | |
| w3-muestra | Mostrar contenido (pantalla: bloque) | |
| w3-mostrar-bloque | Alias de w3-show (pantalla: bloque) | |
| w3-show-inline-block | Mostrar contenido como bloque en línea (display:inline-block) | |
| w3-superior | Contenido fijo en la parte superior de una página. | |
| w3-fondo | Contenido fijo en la parte inferior de una página. | |
| w3-display-container | Contenedor para w3-display- classes (posición: relativa) | |
| w3-display-superior izquierda | Muestra el contenido en la esquina superior izquierda del contenedor de pantalla w3 | |
| w3-display-topright | Muestra contenido en la esquina superior derecha del contenedor de pantalla w3 | |
| w3-display-bottomleft | Muestra el contenido en la esquina inferior izquierda del contenedor de pantalla w3 | |
| w3-pantalla-abajo-derecha | Muestra contenido en la esquina inferior derecha del contenedor de pantalla w3 | |
| w3-pantalla-izquierda | Muestra el contenido a la izquierda (centro a la izquierda) del contenedor de pantalla w3 | |
| w3-pantalla-derecha | Muestra el contenido a la derecha (centro a la derecha) del contenedor de visualización w3 | |
| w3-pantalla-medio | Muestra el contenido en el medio (centro) del contenedor de pantalla w3 | |
| w3-display-top-middle | Muestra el contenido en la parte superior central del contenedor de pantalla w3 | |
| w3-pantalla-inferior-mediana | Muestra el contenido en la parte inferior central del contenedor de pantalla w3 | |
| posición de visualización w3 | Muestra contenido en una posición específica en el contenedor de visualización w3 | |
| w3-display-hover | Muestra contenido al pasar el mouse dentro del contenedor de pantalla w3 |
Clases de efectos
| Clase | define | |
|---|---|---|
| w3-opacidad | Añade opacidad/transparencia a un elemento (opacidad: 0,6) | |
| Agregar opacidad/transparencia al texto | ||
| w3-opacidad-off | Desactiva la opacidad/transparencia (opacidad: 1) | |
| w3-opacidad-min | Añade opacidad/transparencia a un elemento (opacidad: 0,75) | |
| w3-opacidad-máx | Añade opacidad/transparencia a un elemento (opacidad: 0,25) | |
| w3-escala de grises-min | Añade un efecto de escala de grises a un elemento (escala de grises: 50 %) | |
| w3-escala de grises | Añade un efecto de escala de grises a un elemento (escala de grises: 75 %) | |
| w3-escala de grises-max | Añade un efecto de escala de grises a un elemento (escala de grises: 100 %) | |
| w3-sepia-min | Agrega un efecto sepia a un elemento (sepia: 50%) | |
| w3-sepia | Agrega un efecto sepia a un elemento (sepia: 75%) | |
| w3-sepia-max | Agrega un efecto sepia a un elemento (sepia: 100%) | |
| w3-superposición | Crea un efecto de superposición |
Clases de color de fondo
| Clase | define | |
|---|---|---|
| w3-rojo | color de fondo rojo | |
| w3-rosa | color de fondo rosa | |
| w3-morado | color de fondo morado | |
| w3-deep-purple | Color de fondo morado oscuro | |
| w3-índigo | Color de fondo índigo | |
| w3-azul | color de fondo azul | |
| w3-azul claro | color de fondo azul claro | |
| w3-cian | Color de fondo cian | |
| w3-agua | Color de fondo aguamarina | |
| w3-verde azulado | Color de fondo verde azulado | |
| w3-verde | color de fondo verde | |
| w3-verde claro | color de fondo verde claro | |
| w3-lima | Color de fondo lima | |
| w3-arena | Arena de color de fondo | |
| w3-caqui | Color de fondo caqui | |
| w3-amarillo | color de fondo amarillo | |
| w3-ámbar | color de fondo ámbar | |
| w3-naranja | color de fondo naranja | |
| w3-naranja intenso | Color de fondo naranja intenso | |
| w3-azul-gris | Color de fondo azul gris | |
| w3-marrón | Color de fondo marrón | |
| w3-gris claro | color de fondo gris claro | |
| w3-gris | color de fondo gris | |
| w3-gris oscuro | color de fondo gris oscuro | |
| w3-negro | color de fondo negro | |
| w3-rojo-pálido | Color de fondo rojo pálido | |
| w3-amarillo pálido | Color de fondo amarillo pálido | |
| w3-verde pálido | Color de fondo verde pálido | |
| w3-azul pálido | Color de fondo azul pálido | |
| w3-transparente | Color de fondo transparente |
Clases de color flotante
Los colores anteriores también se pueden usar como clases flotantes:
| Clase | define | |
|---|---|---|
| w3-hover-blanco | Hover color blanco | |
| w3-hover-negro | Hover color negro | |
| w3-hover-rojo | Hover el color rojo | |
| w3-hover-azul | Hover el color azul | |
| w3-hover-verde | Hover el color verde | |
| w3-hover-aqua | Hover color aqua | |
| w3-hover-naranja | Hover color naranja | |
| w3-hover-grey | Hover color gris | |
| w3-hover-verde pálido | Hover color verde pálido |
Clases de color de texto
| Clase | define | |
|---|---|---|
| w3-texto-rojo | color de texto rojo | |
| w3-texto-verde | color de texto verde | |
| w3-texto-azul | color de texto azul | |
| w3-texto-amarillo | color de texto amarillo | |
| w3-texto-gris claro | Text color light-grey | |
| w3-text-grey | Text color grey | |
| w3-text-dark-grey | Text color dark grey | |
| w3-text-black | Text color black | |
| w3-text-white | Text color white | |
| w3-text-pink | Text color pink | |
| w3-text-purple | Text color purple | |
| w3-text-teal | Text color teal | |
| w3-text-light-green | Text color light green | |
| w3-text-lime | Text color lime | |
| w3-text-deep-purple | Text color deep purple | |
| w3-text-indigo | Text color indigo | |
| w3-text-light-blue | Text color light blue | |
| w3-text-blue-grey | Text color blue grey | |
| w3-text-cyan | Text color cyan | |
| w3-text-aqua | Text color aqua | |
| w3-text-amber | Text color amber | |
| w3-text-orange | Text color orange | |
| w3-text-deep-orange | Text color deep orange | |
| w3-text-sand | Text color sand | |
| w3-text-khaki | Text color khaki | |
| w3-text-brown | Text color brown |
Hover Text Classes
The text classes above can also be used as hover classes:
| Class | Defines | |
|---|---|---|
| w3-hover-text-red | Hover text color red | |
| w3-hover-text-green | Hover text color green | |
| w3-hover-text-blue | Hover text color blue | |
| w3-hover-text-yellow | Hover text color yellow |
Other Hover Classes
| Class | Defines | |
|---|---|---|
| w3-hover-border-color | Hover border color | |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) | |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) | |
| w3-hover-shadow | Adds shadow to an element on hover | |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element | |
| w3-hover-sepia | Adds a sepia effect to an element on hover | |
| w3-hover-none | Removes hover effects from an element |
Round Classes
| Class | Defines | |
|---|---|---|
| w3-round | Element rounded (border-radius) 4px | |
| w3-round-small | Element rounded (border-radius) 2px | |
| w3-round-medium | Element rounded (border-radius) 4px | |
| w3-round-large | Element rounded (border-radius) 8px | |
| w3-round-xlarge | Element rounded (border-radius) 16px | |
| w3-round-xxlarge | Element rounded (border-radius) 32px |
Padding Classes
| Class | Defines | |
|---|---|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. | |
| w3-padding | Padding 8px top and bottom, and 16px left and right. | |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. | |
| w3-padding-16 | Padding 16px top and bottom | |
| w3-padding-24 | Padding 24px top and bottom | |
| w3-padding-32 | Padding 32px top and bottom | |
| w3-padding-48 | Padding 48px top and bottom | |
| w3-padding-64 | Padding 64px top and bottom | |
| w3-padding-top-64 | Padding 64px on top | |
| w3-padding-top-48 | Padding 48px on top | |
| w3-padding-top-32 | Padding 32px on top | |
| w3-padding-top-24 | Padding 24px on top |
Margin Classes
| Class | Defines | |
|---|---|---|
| w3-margin | Adds an 16px margin to an element | |
| w3-margin-top | Adds an 16px top margin to an element | |
| w3-margin-right | Adds an 16px right margin to an element | |
| w3-margin-bottom | Adds an 16px bottom margin to an element | |
| w3-margin-left | Adds an 16px left margin to an element | |
| w3-section | Adds an 16px top and bottom margin to an element |
Border Classes
| Class | Defines | |
|---|---|---|
| w3-border | Borders (top, right, bottom, left) | |
| w3-border-top | Border top | |
| w3-border-right | Border right | |
| w3-border-bottom | Border bottom | |
| w3-border-left | Border left | |
| w3-border-0 | Removes all borders | |
| w3-border-color | Displays any defined borders in a specified color (like red, etc) | |
| w3-bottombar | Adds a thick bottom border (bar) to an element | |
| w3-leftbar | Adds a thick left border (bar) to an element | |
| w3-rightbar | Adds a thick right border (bar) to an element | |
| w3-topbar | Adds a thick top border (bar) to an element | |
| w3-hover-border-color | Hoverable border color |