INTRODUCCION CSS3 es completamente compatible con versiones anteriores, por lo que no tendrá que modificar los diseños existentes. Los navegadores siempre apoyará CSS2. MÓDULOS DE CSS3 CSS3 se divide en "módulos". La especificación de edad, ha sido dividida en pedazos más pequeños, y otros nuevos se añaden también. Algunos de los más importantes CSS3 módulos son: Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseño de columna múltiple Interfaz de usuario RECOMENDACIÓN CSS3 La especificación CSS3 está todavía en desarrollo por el W3C. Sin embargo, muchas de las nuevas propiedades de CSS3 se han implementado en los navegadores modernos. CSS3
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
INTRODUCCION
CSS3 es completamente compatible con versiones anteriores, por lo que no tendrá que modificar los diseños existentes. Los navegadores siempre apoyará CSS2.
MÓDULOS DE CSS3
CSS3 se divide en "módulos". La especificación de edad, ha sido dividida en pedazos más pequeños, y otros nuevos se añaden también.
Algunos de los más importantes CSS3 módulos son:
Selectores Caja Modelo Fondos y Bordes Efectos de texto Transformaciones 2D/3D Animaciones Diseño de columna múltiple Interfaz de usuario
RECOMENDACIÓN CSS3
La especificación CSS3 está todavía en desarrollo por el W3C.
Sin embargo, muchas de las nuevas propiedades de CSS3 se han implementado en los navegadores modernos.
CSS3 FRONTERAS
CSS3
CSS3 FRONTERAS
Con CSS3, se puede crear bordes redondeados, añadir sombra a las cajas, y utilizar una imagen como una frontera - sin necesidad de utilizar un programa de diseño, como Photoshop.
En este capítulo usted aprenderá acerca de las propiedades de borde siguientes:
border-radius box-shadow border-image
SOPORTE DEL NAVEGADOR
Internet Explorer 9 es compatible con dos de las propiedades de borde nuevos. Firefox requiere el prefijo-moz-border-image de. Chrome y Safari requiere el prefijo-webkit-border-image de. Opera requiere que el prefijo-o-de border-image. Opera soporta las propiedades de borde nuevos.
CSS3 ESQUINAS REDONDEADAS
Adición de esquinas redondeadas en CSS2 fue difícil. Tuvimos que usar imágenes diferentes para cada esquina.
En CSS3, crear las esquinas redondeadas es fácil.
En CSS3, la propiedad border-radius se utiliza para crear las esquinas redondeadas:
Ejemplo:
Anadir esquinas redondeadas a un elemneto div:
div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}
CSS3 SHADOW BOX
CSS3
Esta caja tiene las esquinas redondeadas!
En CSS3, la propiedad box-shadow se utiliza para añadir sombra a las cajas:
Ejemplo:
Añadir un box-shadow a un elemento div:
div{box-shadow: 10px 10px 5px #888888;}
CSS3 BORDE DE LA IMAGEN
Con el CSS3 border-image propiedad que usted puede utilizar una imagen para crear un borde:
La propiedad border-image permite especificar una imagen como una frontera!
La imagen original utilizada para crear el borde anterior:
Ejemplo:
Usar una imagen para crear un borde alrededor de un elemento div:
CSS3 contiene varias propiedades de fondo nuevos, que permiten un mayor control del elemento de fondo.
En este capítulo usted aprenderá acerca de las propiedades de fondo siguientes:
fondo de tamaño de fondo de origen
También aprenderás cómo utilizar múltiples imágenes de fondo.
SOPORTE DEL NAVEGADOR
Firefox 3.6 y versiones anteriores no es compatible con la propiedad background-origen, y requiere el prefijo-moz-para apoyar la propiedad background-size.
Safari 4 requiere el prefijo-webkit-para apoyar a las propiedades de fondo nuevos.
Internet Explorer 9, Firefox 4, Chrome, Safari 5 y Opera apoyar a las propiedades de fondo nuevos.
CSS3 LA PROPIEDAD BACKGROUND-SIZE
La propiedad de fondo de tamaño especifica el tamaño de la imagen de fondo.
Antes de CSS3, el tamaño de la imagen de fondo se determinó por el tamaño real de la imagen. En CSS3 es posible especificar el tamaño de la imagen de fondo, lo que nos permite volver a utilizar imágenes de fondo en diferentes contextos.
Usted puede especificar el tamaño en píxeles o en porcentajes. Si se especifica el tamaño como un porcentaje, el tamaño es relativo a la anchura y la altura del elemento primario.
CSS3 contiene varias características nuevas de texto.
En este capítulo usted aprenderá acerca de las propiedades de texto siguientes:
text-shadow word-wrap
SOPORTE DEL NAVEGADOR
Internet Explorer no es compatible aún con la propiedad text-shadow.
De Firefox, Chrome, Safari y Opera, compatible con la propiedad text-shadow.
Todos los principales navegadores admiten la propiedad word-wrap.
CSS3 TEXT SHADOW
En CSS3, la propiedad text-shadow se aplica sombra al texto.
Se especifica la sombra horizontal, la sombra vertical, la distancia borroso, y el color de la sombra:
Ejemplo:
Agregar una sombra a un encabezdo:
h1{text-shadow: 5px 5px 5px #FF0000;}
CSS3 AJUSTE DE PALABRAS
Si una palabra es demasiado larga para caber dentro de un área, se expande fuera:
En CSS3, la propiedad word-wrap le permite forzar el texto se ajuste - incluso si esto significa la división en el medio de una palabra:
CSS3
Este párrafo contiene una palabra muy larga:
thisisaveryveryveryveryveryverylongword
La palabra siempre se romperá y pase a la siguiente línea.
El código CSS es como sigue:
Ejemplo:
Deje que las palabras largas para poder romper y envolver en la siguiente línea:
NUEVAS PROPIEDADES DE TEXTO
Propiedad Descripción CSS
ahorcamiento-puntuacion
Especifica si un personaje puntuacion puede ser colocado fuera de la caja de línea
3
puntuacion-trim Especifica si un personaje puntuacion debe ser recortado 3
text-align-últimaDescribe cómo la última línea de un bloque o una línea justo antes de un salto de línea forzado está alineado al text-align es "justificar"
3
texto-énfasisAplica marcas de énfasis, y el color de primer plano de las marcas de énfasis, al texto del elemento
3
justificar el textoEspecifica el método utilizado cuando la justificación text-align es "justificar"
3
texto-resumen Especifica un esquema de texto 3
texto de desbordamiento
Especifica lo que debe ocurrir cuando el texto se desborda el elemento contenedor
3
text-shadow Agrega sombra al texto 3
ajuste del texto Especifica las reglas de división de líneas de texto 3
palabra-breakEspecifica las reglas de salto de línea por falta de guiones CJK
3
word-wrapPermite palabras largas e irrompibles que se rompen y pasan a la siguiente línea
Nota: Si la duración no se especifica, la transición no tendrá ningún efecto, porque el valor predeterminado es 0.
El efecto se iniciará cuando la propiedad especificada CSS cambios de valor. Un típico cambio de propiedad CSS sería cuando un usuario del ratón sobre un elemento:
Ejemplo:
Especificar: pase para los elementos clave:
div:hover{
CSS3
width:300px;}
Nota: Cuando el cursor del ratón sobre el elemento, que cambia gradualmente de nuevo a su estilo original.
MÚLTIPLES CAMBIOS
Para agregar un efecto de transición de más de un estilo, añadir más propiedades, separados por comas:
Ejemplo:
Agregar efector sobre ka anchura, altura , y la transformación:
Los dos ejemplos siguientes conjuntos de todas las propiedades de transición:
Ejemplo:
Utilice todas las propiedades de transición en un ejemplo:
div{transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:1s;-moz-transition-timing-function:linear;-moz-transition-delay:2s;/* Safari and Chrome */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;/* Opera */-o-transition-property:width;-o-transition-duration:1s;-o-transition-timing-function:linear;-o-transition-delay:2s;}
Ejemplo:
Los efectos de transición igual al anterior, utilizando la propiedad de transición abreviada:
div{transition: width 1s linear 2s;
CSS3
/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transition:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;}
CSS3 ANIMACIONES
ANIMACIONES CSS3
Con CSS3, podemos crear animaciones, que pueden sustituir a las imágenes animadas, animaciones Flash, y JavaScripts en muchas páginas web.
CSS3 Animación
CSS3
CSS3 @ FOTOGRAMAS CLAVE REGLA
Para crear animaciones en CSS3, usted tendrá que aprender acerca de la regla de los fotogramas clave @.
La regla @ fotogramas clave es que la animación se ha creado. Especifique un estilo CSS dentro de la regla @ fotogramas clave y la animación poco a poco va a cambiar el estilo actual al nuevo estilo.
SOPORTE DEL NAVEGADOR
Internet Explorer y Opera no es compatible aún con la regla de los fotogramas clave @ o la propiedad de animación.
Firefox requiere el prefijo-moz-, mientras que Chrome y Safari requieren el prefijo-webkit-.
Especifica cómo un elemento en línea de nivel está alineado con respecto a su matriz
3
línea de base del turno Permite el reposicionamiento de la relación dominante-línea de base a la dominante línea de base
3
dominante-línea de base
Especifica una escala-de referencia-tabla 3
gota-inicial-después de ajuste
Establece el punto de alineación de la caída inicial para el punto de conexión principal
3
caída inicial, después de alinear
Establece que la alineación de líneas dentro de la caja de línea inicial se utiliza en el punto de conexión principal con el cuadro de la letra inicial
3
caída inicial, antes de ajustar
Establece el punto de alineación de la caída inicial para el punto de conexión secundaria
3
gota-inicial-antes de-align
Establece que la alineación de líneas dentro de la caja de línea inicial se utiliza en el punto de conexión secundaria con el cuadro de la letra inicial
3
caída inicial de tamaño
Controla el hundimiento parcial de la letra inicial 3
caída de valor inicial Activa el efecto de la gota-inicial 3
inline-box-align Establece que la línea de un bloque en línea de varias líneas se alinean con los elementos en línea anterior y siguiente dentro de una línea
3
la línea de apilamiento Una propiedad abreviada para establecer la línea de apilamiento, la estrategia, la línea de apilamiento de rubí, y las propiedades de la línea de apilamiento de turnos
3
la línea de apilamiento-ruby
Establece el método de la línea de apilamiento de los elementos de bloque que contienen elementos de rubí de anotación
3
la línea de apilamiento Establece el método de la línea de apilamiento de los 3
CSS3
de desplazamiento elementos de bloque que contienen elementos con base de desplazamiento
la línea de la estrategia de apilamiento
Establece la estrategia de la línea de apilamiento de las cajas de línea apiladas dentro de un elemento de bloque de contención
3
el texto de la altura Establece la dimensión de bloque de la progresión del área de contenido de texto de una caja de línea
3
PROPIEDADES DE LA LISTA
Propiedad Descripción CSS
list-style Establece todas las propiedades de una lista en una declaración de
1
list-style-image Especifica una imagen como marcador de ítems de lista 1
list-style-position Especifica si los marcadores list-item debe aparecer dentro o fuera del flujo de contenido
1
list-style-type Especifica el tipo de marcador de ítems de lista 1
PROPIEDADES DE LOS MÁRGENES
Propiedad Descripción CSS
margen Establece todas las propiedades de los márgenes en una declaración
1
margin-bottom Establece el margen inferior de un elemento 1
derecho Especifica la posición correcta de un elemento posicionado
2
superior Especifica la posición de la parte superior de un elemento posicionado
2
visibilidad Especifica si un elemento es visible 2
índice z Establece el orden de apilamiento de un elemento posicionado
2
PROPIEDADES DE IMPRESIÓN
Propiedad Descripción CSS
los huérfanos Establece el número mínimo de líneas que se deben a la izquierda en la parte inferior de una página cuando se produce un salto de página dentro de un elemento
2
page-break-after Establece el comportamiento de la página sin precedentes después de un elemento
2
page-break-before Establece el comportamiento de la página sin precedentes antes de un elemento
2
page-break-inside Establece el comportamiento de la página sin precedentes dentro de un elemento
2
las viudas Establece el número mínimo de líneas que se deben a la izquierda en la parte superior de una página cuando se produce un salto de página dentro de un elemento
ruby-align Controla la alineación del texto del texto rubí y el contenido de rubí de base respecto a la otra
3
rubí saliente Determina si, y en qué lado, el texto rubí se deja parcialmente voladizo cualquier texto adyacente, además de su propia base, cuando el texto ruby es más ancha que la base de rubí
3
rubí posición Controla la posición del texto rubí con respecto a su base 3
ruby-span Controla el comportamiento de la división de los elementos de anotación
3
PROPIEDADES DE VOZ
Propiedad Descripción CSS
marcar Una propiedad abreviada para establecer las propiedades antes de la marca y la marca después de la
3
la marca, después de Permite marcadores con nombre para ser conectado a la corriente de audio
3
marca, antes de Permite marcadores con nombre para ser conectado a la corriente de audio
3
fonemas Especifica una pronunciación fonética para el texto contenido en el elemento correspondiente
3
resto Una propiedad abreviada para establecer las propiedades antes de reposo y descanso después de la
3
de descanso después de la
Especifica un descanso o límite prosódico que se observa después de hablar del contenido del elemento
3
de descanso antes de Especifica un descanso o límite prosódico a observar antes de hablar del contenido del elemento
3
la voz de balance Especifica el balance entre los canales izquierdo y derecho
3
CSS3
voz-duración Especifica el tiempo que debe tomar para hacer que el contenido del elemento seleccionado
3
la voz de tono Especifica la distancia promedio entre (a) frecuencia de la voz que habla
3
-la voz de pitch-range Especifica la variación en la distancia promedio entre 3
voz-tasa Controla la velocidad de la voz 3
de la voz Indica la fuerza de énfasis que debe aplicarse 3
voz-volumen Se refiere a la amplitud de la onda de salida por los sintetiza habla
3
PROPIEDADES DE LA TABLA
Propiedad Descripción CSS
border-collapse Especifica si o no bordes de la tabla debe ser derrumbado
2
border-spacing Especifica la distancia entre los bordes de celdas adyacentes
2
caption-side Especifica la colocación de un título de la tabla 2
vacías las células Especifica si se mostrará o no las fronteras y de fondo en las celdas vacías en una tabla
2
table-layout Establece el algoritmo de disposición para ser utilizado para una tabla
dirección Especifica la dirección del texto / escritura de la dirección
2
letter-spacing Aumenta o disminuye el espacio entre caracteres en un texto
1
line-height Establece la altura de la línea 1
text-align Especifica la alineación horizontal del texto 1
text-decoration Especifica la decoración añadida al texto 1
text-indent Especifica la sangría de la primera línea en un texto de bloque
1
text-transform Controles de la capitalización del texto 1
unicode-bidi 2
vertical-align Establece la alineación vertical de un elemento 1
espacio en blanco Especifica cómo un espacio en blanco dentro de un elemento se maneja
1
word-spacing Aumenta o disminuye el espacio entre las palabras en un texto
1
ahorcamiento-puntuacion
Especifica si un personaje puntuacion puede ser colocado fuera de la caja de línea
3
puntuacion-trim Especifica si un personaje puntuacion debe ser recortado 3
text-align-última Describe cómo la última línea de un bloque o una línea justo antes de un salto de línea forzado está alineado al text-align es "justificar"
3
justificar el texto Especifica el método utilizado cuando la justificación text-align es "justificar"
: No ( selección ) : No (p) Selecciona cada elemento que no es un elemento <p>
3
Selección :: Selección :: Selecciona la porción de un elemento que es seleccionado por un usuario
3
CSS AURAL DE REFERENCIA
HOJAS DE ESTILO AUDITIVAS
Hojas de estilo auditivas utilizar una combinación de síntesis de voz y efectos de sonido para hacer que el usuario escuche a la información, en lugar de leer la información.
por las personas ciegas para ayudar a los usuarios que aprenden a leer para ayudar a los usuarios que tienen problemas de lectura para el entretenimiento en el hogar en el coche por la impresión con deficiencias de las comunidades
La presentación auditiva convierte el documento en texto sin formato y con ello alimentan a un lector de pantalla (un programa que lee todos los caracteres en la pantalla).
señal Establece las propiedades de referencia en una declaración de
cue-before cue-after
2
cue-after Especifica un sonido que se reproducirá después de hablar del contenido del elemento
ninguna url 2
cue-before Especifica un sonido que se reproducirá antes de hablar del contenido del elemento
ninguna url 2
elevación Establece que el sonido debe provenir de
ángulo por debajo de nivel superior más alta baja
2
romper Establece las propiedades de pausa en una declaración
pausa antes- pausa-después
2
pausa-después Especifica una pausa después de hablar del contenido del elemento
tiempo %
2
pausa-antes Especifica una pausa antes de hablar del contenido del elemento
tiempo %
2
campo Especifica el tono de voz frecuencia dex-bajo bajo medio alto x alto
2
pitch-range Especifica la variación en el tono de voz. (Tono de voz o de voz animado?)
número 2
CSS3
play-during Especifica un sonido a reproducir mientras se habla del contenido del elemento
Auto ninguna url mezcla de repetición
2
riqueza Especifica la riqueza de la voz al hablar. (Voz enriquecido o hilo de voz?)
número 2
hablar Especifica si el contenido hará que fonéticamente
normal, no hechizo de salida
2
speak-header Especifica cómo manejar los encabezados de la tabla. En caso de las cabeceras se habla antes de cada célula, o sólo antes de una célula con una cabecera diferente que la celda anterior
siempre , una vez
2
speak-numeral Especifica cómo hablan los números dígitos continuos
2
hablan-puntuacion Especifica cómo hablan los caracteres de puntuación
ninguno de código
2
speech-rate Especifica la velocidad del habla número dex-lento lento a medio rápido x-rápido más rápido más lento
2
estrés Especifica el "estrés" en la voz que habla
número 2
voz-familia Especifica la familia de la voz del que habla
específica-la voz genérica de voz
2
volumen Especifica el volumen del habla número %en silencio x-soft
2
CSS3
suave a medio alto x alto
CSS WEB COMBINACIONES DE FUENTES SEGURAS
Comúnmente utilizados combinaciones de fuentes
La propiedad font-family debe mantener los nombres de varias fuentes como una "reserva" del sistema, para asegurar la máxima compatibilidad entre navegadores y sistemas operativos. Si el navegador no es compatible con la primera fuente, se trata de la siguiente fuente.
Comience con la fuente que desee, y al final con una familia genérica, para permitir que el navegador de escoger una fuente similar en la familia genérica, si no hay otras fuentes disponibles:
Ejemplo:
p{font-family:"Times New Roman", Times, serif}
CSS3
A continuación se presentan algunas combinaciones de fuentes de uso común, organizados por familia genérica.
"Times New Roman", Times, serif Esta es una partida
Este es un párrafo
SANS-SERIF
font-family Ejemplo de texto
Arial, Helvetica, sans-serif Esta es una partida
Este es un párrafo
Arial Negro, Gadget, sans-serif Esta es una partida
Este es un párrafo
"Comic Sans MS", cursiva, sans-serif Esta es una partida
Este es un párrafo
Impacto, carbón, sans-serif Esta es una partida
Este es un párrafo
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Esta es una partida
CSS3
Este es un párrafo
Tahoma, Ginebra, sans-serif Esta es una partida
Este es un párrafo
"Trebuchet MS", Helvetica, sans-serif Esta es una partida
Este es un párrafo
Verdana, Geneva, sans-serif Esta es una partida
Este es un párrafo
MONOSPACE FUENTES
font-family Ejemplo de texto
"Courier New", Courier, monospace Esta es una partida
Este es un párrafo
"Lucida Console", Mónaco, monospace Esta es una partida
Este es un párrafo
CSS UNIDADES
LOS VALORES DE MEDICIÓN
Unidad Descripción
% porcentaje
en pulgada
cm centímetro
CSS3
mm milímetro
en 1em es igual al tamaño de la fuente actual. 2em significa 2 veces el tamaño de la fuente actual. Por ejemplo, si un elemento se muestra con una fuente de 12 puntos, entonces '2 em 'es 24 puntos. El 'em' es una unidad muy útil en la CSS, ya que puede adaptarse automáticamente a la fuente que utiliza el lector
ex un ex es la altura x de la fuente (altura x es por lo general alrededor de la mitad el tamaño de fuente)
en el punto (1 punto es igual a 1/72 pulgadas)
PC pica (1 unidad es la misma que 12 puntos)
px píxeles (un punto en la pantalla del ordenador)
CSS COLORES
Los colores se muestra la combinación de rojo, verde y azul.
LOS VALORES DE COLOR
CSS colores se definen mediante un valor hexadecimal (hex) notación para la combinación de rojo, verde, y los valores de color azul (RGB). El valor más bajo que se puede dar a una de las fuentes de luz es 0 (hexadecimal 00). El valor más alto es 255 (FF hex).
Los valores hexadecimales se escriben como números de 3 dígitos dobles, comenzando con un signo #.
CSS3
Ejemplos de colores:
Color Color de HEX Color RGB
# 000000 rgb (0,0,0)
# FF0000 rgb (255,0,0)
# 00FF00 rgb (0,255,0)
# 0000FF rgb (0,0,255)
# FFFF00 rgb (255,255,0)
# 00FFFF rgb (0,255,255)
# FF00FF rgb (255,0,255)
# C0C0C0 rgb (192,192,192)
# FFFFFF rgb (255,255,255)
16 millones de colores diferentes
La combinación de valores Rojo, Verde y Azul 0-255 da un total de más de 16 millones de colores diferentes para jugar (256 x 256 x 256).
Mayoría de los monitores modernos son capaces de mostrar al menos 16.384 colores diferentes.
Si nos fijamos en la tabla de colores a continuación, podrás ver el resultado de la variación de la luz roja de 0 a 255, mientras se mantiene la luz verde y azul en cero.
Para ver una lista llena de color se mezcla cuando la luz roja varía de 0 a 255, haga clic en uno de los valores RGB o hexadecimal a continuación.
Colores grises se muestran usando una cantidad igual de energía a todas las fuentes de luz. Para hacerlo más fácil para que usted pueda seleccionar el color gris a la derecha, hemos compilado una tabla de tonos de gris para usted:
Hace algunos años, cuando las computadoras máxima admitida 256 colores diferentes, una lista de 216 "colores para la web" se propuso como un estándar Web, reservándose 40 colores del sistema fijo.
Esto no es importante ahora, ya que la mayoría de los ordenadores pueden mostrar millones de colores diferentes, pero la elección se deja a usted.
El 216 cross-browser paleta de colores fue creado para asegurar que todos los equipos se mostraban correctamente los colores cuando se ejecuta una paleta de 256 colores:
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
CSS3
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
CSS3
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CSS VALORES DE COLOR LEGALES
COLORES CSS
Los colores en CSS se puede especificar los siguientes métodos:
Colores hexadecimales Colores RGB RGBA colores Colores HSL HSLA colores Predefinidos o Cross-browser nombres de los colores
COLORES HEXADECIMALES
Los valores hexadecimales de color son compatibles con todos los principales navegadores.
CSS3
Un color hexadecimal se especifica con: # RRGGBB, donde el RR (rojo), GG (verde) y BB (azul) enteros hexadecimales especificar los componentes del color. Todos los valores deben estar entre 0 y FF.
Por ejemplo, el valor # 0000FF se representa como azul, debido a que el componente azul se establece en su valor más alto (ss) y los demás se ponen a 0.
Ejemplo
p{background-color:#ff0000;}
COLORES RGB
Valores de color RGB son compatibles con todos los principales navegadores.
Un valor de color RGB se especifica con: RGB (rojo, verde, azul). Cada parámetro (rojo, verde y azul) define la intensidad del color y puede ser un número entero entre 0 y 255 o un valor de porcentaje (de 0% a 100%).
Por ejemplo, el rgb (0,0,255) el valor se representa en color azul, debido a que el parámetro de color azul se establece en su valor más alto (255) y los demás se ponen a 0.
Además, los valores siguientes se define el mismo color: rgb (0,0,255) y RGB (0%, 0%, 100%).
Ejemplo:
p{background-color:rgb(255,0,0);}
LOS COLORES RGBA
Valores RGBA de color son compatibles con IE9 +, Firefox 3 +, Chrome, Safari, Opera y en 10 +.
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa - que especifica la opacidad del objeto.
Un valor de color RGBA se especifica con: rgb (rojo, verde, azul, alfa). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1,0 (totalmente opaco).
Ejemplo
CSS3
p{background-color:rgba(255,0,0,0.5);}
COLORES HSL
Los valores de color HSL son compatibles con IE9 +, Firefox, Chrome, Safari y Opera 10 +.
HSL significa matiz, saturación y luminosidad - y representa una representación coordenada cilíndrica de colores.
Un valor de color HSL se especifica con: HSL (matiz, saturación, luminosidad).
El tono es un grado en la rueda de color (de 0 a 360) - 0 (o 360) es de color rojo, 120 es de color verde, 240 es de color azul. La saturación es un valor porcentual, 0% significa un tono de gris y el 100% es el color. La ligereza es también un porcentaje; 0% es negro, 100% es de color blanco.
Ejemplo
p{background-color:hsl(120,65%,75%);}
HSLA COLORES
Los valores de HSLA de color son compatibles con IE9 +, Firefox 3 +, Chrome, Safari, Opera y en 10 +.
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad del objeto.
Un valor de color HSLA se especifica con: HSLA (matiz, saturación, luminosidad, alfa), donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0.0 (completamente transparente) y 1,0 (totalmente opaco).
Ejemplo
p{background-color:hsla(120,65%,75%,0.3);}
CSS3
CSS NOMBRES DE COLORES
LOS NOMBRES DE COLOR COMPATIBLES CON TODOS LOS NAVEGADORES
147 nombres de los colores se definen en el HTML y CSS de color especificación (17 colores estándar, además de más 130). La siguiente tabla muestra a todos ellos, junto con sus valores hexadecimales.
CSS3 no es todavía un estándar del W3C, pero todos los principales navegadores ya están apoyando muchas de las nuevas características. A continuación se muestra una referencia de todas las nuevas propiedades de CSS3 y su compatibilidad con navegadores: