Crea botones geniales y fácilmente con CSS3 Button Maker
Ya que los botones de ahora hacen uso de gradientes, sombras y esquinas redondeadas que contribuyen en gran medida. En los antiguos navegadores que no soporten estas propiedades, la reserva es de color sólido de fondo, sin sombras y esquinas cuadradas. No es gran cosa.
Button Maker es una herramienta que permite crear botones utilizando las nuevas capacidades de CSS3 de una manera mas sencilla sin hacer tantas cosas que tomaría crear mucho código para casi todos los botones. Si necesitas generar muchos botones que usan mucho CSS3, esta puede ser la herramienta que necesitas.
Deja de sufrir un poco y prueba esta herramienta que podría ahorrarte mucho tiempo y trabajo css-tricks.com/6478-css3-button-maker
Como crear transiciones para animación con CSS3
Hace mucho que los desarrolladores esperamos algo como esto en la web, la posibilidad de crear animaciones fácilmente con CSS, es una de las cosas que le pone el sabor a la web cuando queremos hacer una navegación en nuestro sitio un poco mas divertida y para este problema usamos comúnmente JavaScript complementado con JQuery o algún otro Framework para facilitarnos la vida, aun que es muy fácil de implementarlo, no nos quita el problema del todo.
Esperando algo mas fácil y que venga de la propia tecnología para la web HTML5 nos trae un mar de capacidades que podemos ir implementando en nuestros sitios web fácilmente y dentro viene CSS3 con la capacidad de animaciones y transiciones.
Sintaxis básica de una animación
Estado inicial
transition: transform 0.5s linear; /*Transición de la animación*/
Estado final
transform: scale(1.3); /*Tipo de transformación del objeto*/
transition: transform 0.5s linear; /*Transición de la animación*/
La sintaxis de animaciones en CSS3 son muy básicas y muy lógicas, se necesitan 5 cosas, estado inicial, estado final, un cambio, tiempo y tipo de transición, el cambio seria el tipo de transformación, en el caso del ejemplo anterior se utilizo SCALE que seria el cambio de tamaño y el tiempo de 0.5 segundos en transición lineal.
Ejemplo real de una animación
Nota: Para todas las funciones de CSS3 utilizamos las Extensiones Propietarias ya que el estándar no esta definido aun como las que utilizamos en el tutorial de Como dividir un bloque en columnas con column-count de CSS3.
Notas importantes
Algo importante es saber que la animación es aplicable a cualquier cosa que sea un bloque, si este no es un bloque, la animación no se realizara, también es necesario saber que existen muchos tipos de transiciones y transformaciones solo es cuestión de documentarse al respecto pero con estos conocimientos básicos serán capaces de aplicarlo.
CSS Tutorial
Ahorrar un montón de trabajo con CSS!
En nuestro tutorial CSS usted aprenderá cómo utilizar CSS para controlar el estilo y el diseño de páginas web múltiples a la vez.
Ejemplo CSS
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
Compruébalo por ti mismo »
Propiedades de CSS
El "CSS" en
la columna indica que la versión de CSS la propiedad se define (CSS1, CSS2,
CSS3 o).
Propiedades de la animación
Propiedad
Descripción
CSS
Especifica la animación
3
Una propiedad abreviada para todas las
propiedades de animación de abajo, excepto la propiedad de
animación-play-Estado
3
Especifica un nombre para la animación de
fotogramas clave @
3
Especifica cuántos segundos o milisegundos una
animación tarda en completar un ciclo
3
Especifica la curva de velocidad de la animación
3
Especifica cuando la animación se iniciará
3
Especifica el número de veces que debe ser una
animación jugado
3
Especifica si la animación se reproduzca a la
inversa en ciclos alternos
3
Especifica si la animación se está ejecutando o
está en pausa
3
Propiedades de fondo
Propiedad
Descripción
CSS
Establece todas las propiedades de fondo en una
declaración
1
Establece si una imagen de fondo es fija o se
desplaza con el resto de la página
1
Establece el color de fondo de un elemento
1
Establece la imagen de fondo de un elemento
1
Establece la posición inicial de una imagen de
fondo
1
Define la forma en una imagen de fondo se
repetirá
1
Especifica la zona de pintado de los antecedentes
3
Especifica el área de posicionamiento de las
imágenes de fondo
3
Especifica el tamaño de las imágenes de fondo
3
Esquema de la frontera y Propiedades
Propiedad
Descripción
CSS
Establece todas las propiedades de borde en una
declaración
1
Establece todas las propiedades del borde
inferior de un elemento
1
Establece el color del borde inferior
1
Define el estilo del borde inferior
1
Establece el ancho del borde inferior
1
Establece el color de los cuatro bordes
1
Establece todas las propiedades del borde
izquierdo de un elemento
1
Establece el color del borde izquierdo
1
Define el estilo del borde izquierdo
1
Establece el ancho del borde izquierdo
1
Establece todas las propiedades del borde derecho
de una declaración
1
Establece el color del borde derecho
1
Define el estilo del borde derecho
1
Establece el ancho del borde derecho
1
Establece el estilo de los cuatro bordes
1
Establece todas las propiedades del borde
superior de una declaración
1
Establece el color del borde superior
1
Define el estilo del borde superior
1
Establece el ancho del borde superior
1
Establece el ancho de los cuatro bordes
1
Establece todas las propiedades de contorno en
una declaración
2
Establece el color de un esquema
2
Establece el estilo de un esquema
2
Establece el ancho de un esquema
2
Define la forma del borde de la esquina inferior
izquierda
3
Define la forma del borde de la esquina inferior
derecha
3
Una propiedad abreviada para establecer toda la
imagen de la frontera-* propiedades
3
Especifica la cantidad por la cual el área de la
imagen se extiende más allá de las fronteras del cuadro de la frontera
3
Especifica si la imagen de la frontera se debe
repetir, redondeadas o alargadas
3
Especifica los desplazamientos hacia el interior
de la imagen de la frontera
3
Especifica una imagen para ser utilizado como una
frontera
3
Especifica el ancho de la imagen de la frontera
3
Una propiedad abreviada para establecer las
cuatro propiedades de la frontera *- radio
3
Define la forma del borde de la esquina superior
izquierda
3
Define la forma del borde de la esquina superior
derecha
3
caja de decoración-break
3
Se conecta uno o más caída de las sombras a la
caja
3
Propiedades de las cajas
Propiedad
Descripción
CSS
Especifica si para recortar los bordes izquierdo
/ derecho de los contenidos, si se desborda el área del elemento de contenido
3
Especifica si para recortar los bordes superior /
inferior del contenido, si se desborda el área del elemento de contenido
3
Especifica el método de desplazamiento preferido
de los elementos que se desbordan
3
Gira un elemento alrededor de un punto dado,
definido por la propiedad de rotación de punto
3
Define un punto como un desplazamiento desde el
límite del borde superior izquierdo
3
Propiedades del color
Propiedad
Descripción
CSS
del perfil de colores
Permite la especificación de un perfil de color
de origen distinto al predeterminado
3
Ajusta el nivel de opacidad de un elemento
3
la representación-la intención
Permite la especificación de un intento de
reproducción de color perfil distinto al predeterminado
3
Contenido de paginado propiedades del soporte
Propiedad
Descripción
CSS
marcadores de etiqueta
Especifica la etiqueta del marcador
3
marcadores de nivel
Especifica el nivel del marcador
3
bookmark objetivo
Especifica el destino del vínculo al marcador
3
flotación de compensación
Empuja los elementos flotantes en la dirección
opuesta de la que se han rumoreado con flotador
3
guiones, después de
Especifica el número mínimo de caracteres en una
palabra con guión el personaje de guiones
3
guiones, antes de
Especifica el número mínimo de caracteres en una
palabra con guión antes de que el carácter de separación
3
guiones caracteres
Especifica una cadena que se muestra cuando un
guiones de rotura se produce
3
guiones-líneas
Indica el número máximo de sucesivas líneas de
guión en un elemento
3
guiones de los recursos
Especifica una lista separada por comas de los
recursos externos que pueden ayudar al explorador de determinar los puntos de
separación
3
guiones
Establece la forma de dividir las palabras para
mejorar el diseño de los párrafos
3
imagen de resolución
Especifica la resolución correcta de las imágenes
3
marcas
Añade cultivos y / o marcas de cruz para el
documento
3
cadena-set
3
Propiedades de la dimensión
Propiedad
Descripción
CSS
Establece la altura de un elemento
1
Establece la altura máxima de un elemento
2
Establece la anchura máxima de un elemento
2
Establece la altura mínima de un elemento
2
Establece el ancho mínimo de un elemento
2
Establece el ancho de un elemento
1
Propiedades flexibles Caja
Propiedad
Descripción
CSS
Especifica la forma de alinear los elementos
secundarios de una caja
3
Especifica en qué dirección los hijos de una caja
se muestran
3
Especifica si los hijos de una caja es flexible o
rígido en tamaño
3
Asigna los elementos flexibles para flexionar los
grupos
3
Especifica si las columnas se van en una nueva
línea cada vez que se queda sin espacio en la caja de los padres
3
Especifica el orden de visualización de los
elementos secundarios de una caja
3
Especifica si los hijos de una caja debe ser
establecido en forma horizontal o vertical
3
Especifica la posición horizontal en cajas
horizontales y verticales en la posición vertical de las cajas
3
Propiedades de la fuente
Propiedad
Descripción
CSS
Establece todas las propiedades de la fuente en
una declaración
1
Especifica la familia de fuentes para el texto
1
Especifica el tamaño de fuente del texto
1
Especifica el estilo de fuente para el texto
1
Especifica si el texto debe aparecer en una
fuente small-caps
1
Especifica el peso de una fuente
1
Una regla que permite a los sitios web para
descargar y utilizar otras fuentes de la "red de seguridad" fuentes
3
Preserva la legibilidad del texto en la fuente de
reserva se
3
Selecciona una cara normal, condensado o
expandido de una familia de fuentes
3
Generado propiedades de contenido
Propiedad
Descripción
CSS
Se utiliza con el: before y: after
pseudo-elementos, para insertar contenido generado por el
2
Incrementos de uno o más contadores
2
Crea o restaura uno o más contadores
2
Establece el tipo de comillas para las citas
incrustadas
2
cosecha
Permite que un elemento reemplazado a ser sólo un
área rectangular de un objeto, en lugar de la totalidad del objeto
3
se mueven a
Provoca que un elemento se elimina del flujo y
volver a introducir en un punto posterior en el documento
3
Página de la política
Determina qué página basada en presencia de un
elemento dado se aplica a un valor de contador o una cadena
3
Propiedades de la red
Propiedad
Descripción
CSS
Especifica el ancho de cada columna en una
cuadrícula
3
Especifica la altura de cada columna en una
cuadrícula
3
Propiedades de hipervínculo
Propiedad
Descripción
CSS
Una propiedad abreviada para establecer el nombre
de destino, objetivo nuevo, y las propiedades de posición de destino-
3
Especifica dónde abrir enlaces (punto de destino)
3
Especifica si los vínculos nuevo destino se
abrirá en una ventana nueva o en una nueva pestaña de una ventana existente
3
Especifica que los enlaces nuevos de destino se
debe colocar
3
Linebox Propiedades
Propiedad
Descripción
CSS
la alineación de ajuste
Permite una alineación más precisa de los
elementos
3
alineación inicial
Especifica cómo un elemento a nivel de línea se
alinea con respecto a su padre
3
línea de base del turno
Permite el reposicionamiento de la relación
dominante-de referencia a la dominante-de referencia
3
dominante de referencia
Especifica una escala de la línea base de mesa
3
caída inicial, después de ajustar
Establece el punto de alineación de la caída
inicial del punto de conexión principal
3
caída inicial, después de alinear
Establece la alineación de la línea en el cuadro
de la línea inicial se utiliza en el punto de conexión principal con la caja
de la letra inicial
3
drop-inicial-antes de ajustar
Establece el punto de alineación de la caída
inicial del punto de conexión secundaria
3
drop-inicial-antes-align
Establece la alineación de la línea en el cuadro
de la línea inicial se utiliza en el punto de conexión secundaria con la caja
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 un efecto de la gota inicial-
3
inline-box-align
Establece que la línea de un bloque en línea con
varias líneas se alinean con los elementos en línea anterior y siguiente
dentro de una línea
3
línea de apilamiento
Una propiedad abreviada para establecer la línea
de apilamiento, la estrategia, la línea de apilamiento-rubí, y propiedades de
la línea de apilamiento de desplazamiento
3
línea de apilamiento-rubí
Establece el método de la línea de apilamiento de
los elementos de bloque que contiene elementos de rubí anotación
3
línea de apilamiento de desplazamiento
Establece el método de la línea de apilamiento de
los elementos de bloque que contiene elementos con la base de cambio de
3
línea de apilamiento de estrategia
Establece la estrategia de la línea de
apilamiento de las cajas de línea apiladas dentro de un elemento en bloque
que contienen
3
texto de la altura
Establece la dimensión bloquear la progresión del
área de contenido de texto de una caja de línea
3
Propiedades de la lista
Propiedad
Descripción
CSS
Establece todas las propiedades de una lista en
una declaración
1
Especifica una imagen como marcador list-item
1
Especifica si el elemento de la lista de
marcadores, deben aparecer dentro o fuera del flujo de contenido
1
Especifica el tipo de marcador de objetos de
lista
1
Propiedades de margen
Propiedad
Descripción
CSS
Establece todas las propiedades de los márgenes
en una declaración
1
Establece el margen inferior de un elemento
1
Establece el margen izquierdo de un elemento
1
Establece el margen derecho de un elemento
1
Establece el margen superior de un elemento
1
Propiedades de marquesina
Propiedad
Descripción
CSS
recuadro de dirección
Establece la dirección del movimiento de los
contenidos
3
carpa-juego-cuenta
Establece el número de veces el mover el
contenido
3
marquesina de velocidad
Establece qué tan rápido se desplaza el contenido
3
marquesina de estilo
Define el estilo del movimiento de los contenidos
3
Varias columnas de propiedades
Propiedad
Descripción
CSS
Especifica el número de columnas de un elemento
se debe dividir en
3
Especifica la forma de llenar las columnas
3
Especifica la distancia entre las columnas
3
Una propiedad abreviada para establecer las
reglas de columna-* propiedades
3
Especifica el color de la norma entre las
columnas
3
Especifica el estilo de la norma entre las
columnas
3
Especifica el ancho de la regla entre las
columnas
3
Especifica el número de columnas de un elemento
debe extenderse a lo largo
3
Especifica el ancho de las columnas
3
Una propiedad abreviada para establecer el ancho
de columna y la columna de conteo
3
Propiedades de relleno
Propiedad
Descripción
CSS
Establece todas las propiedades de relleno en una
declaración
1
Define el relleno inferior de un elemento
1
Establece el margen izquierdo de un elemento
1
Define el relleno derecho de un elemento
1
Define el relleno superior de un elemento
1
Paginado propiedades del soporte
Propiedad
Descripción
CSS
ajuste
Da una idea de cómo escalar un elemento
reemplazado si no su anchura ni su altura es de propiedad de automóviles
3
ajuste de posición
Determina la alineación de los objetos dentro de
la caja
3
imagen de la orientación
Especifica una rotación en la dirección correcta
o en el sentido de que un agente de usuario se aplica a una imagen
3
página
Especifica un tipo de página que debe ser un
elemento muestra
3
tamaño
Especifica el tamaño y la orientación de la caja
que contiene la página de contenido
3
Propiedades de posicionamiento
Propiedad
Descripción
CSS
Especifica la posición inferior de un elemento
posicionado
2
Especifica que los lados de un elemento que otros
elementos flotantes no se les permite
1
Clips de un elemento absolutamente posicionado
2
Especifica el tipo de cursor que se mostrará
2
Especifica el tipo de caja de un elemento debe
generar
1
Especifica si una caja debe flotar
1
Especifica la posición izquierda de un elemento
posicionado
2
Especifica qué sucede si se desborda contenido de
la caja de un elemento
2
Especifica el tipo de método de posicionamiento
utilizado para un elemento (estática, relativa, absoluta o fija)
2
Especifica la posición correcta de un elemento
posicionado
2
Especifica la posición de la parte superior de un
elemento posicionado
2
Especifica si un elemento es visible
2
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 deben
quedar en la parte inferior de una página cuando se produce un salto de
página dentro de un elemento
2
Establece el comportamiento de la página sin
precedentes después de un elemento
2
Establece el comportamiento de la página sin
precedentes antes de un elemento
2
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 deben
quedar en la parte superior de una página cuando se produce un salto de
página dentro de un elemento
2
Rubí Propiedades
Propiedad
Descripción
CSS
ruby-align
Controla la alineación del texto del texto ruby ruby y el contenido de base respecto a la otra
3
rubí saliente
Determina si, y de qué lado, texto ruby se permite que cualquier parte saliente de texto adyacente, además de su propia base, cuando el texto ruby es más ancho que la base de rubí
3
ruby-position
Controla la posición del texto ruby con respecto a su base
3
Propiedad
Descripción
CSS
Especifica la animación
3
Una propiedad abreviada para todas las
propiedades de animación de abajo, excepto la propiedad de
animación-play-Estado
3
Especifica un nombre para la animación de
fotogramas clave @
3
Especifica cuántos segundos o milisegundos una
animación tarda en completar un ciclo
3
Especifica la curva de velocidad de la animación
3
Especifica cuando la animación se iniciará
3
Especifica el número de veces que debe ser una
animación jugado
3
Especifica si la animación se reproduzca a la
inversa en ciclos alternos
3
Especifica si la animación se está ejecutando o
está en pausa
3
Propiedad
Descripción
CSS
Establece todas las propiedades de fondo en una
declaración
1
Establece si una imagen de fondo es fija o se
desplaza con el resto de la página
1
Establece el color de fondo de un elemento
1
Establece la imagen de fondo de un elemento
1
Establece la posición inicial de una imagen de
fondo
1
Define la forma en una imagen de fondo se
repetirá
1
Especifica la zona de pintado de los antecedentes
3
Especifica el área de posicionamiento de las
imágenes de fondo
3
Especifica el tamaño de las imágenes de fondo
3
Propiedad
Descripción
CSS
Establece todas las propiedades de borde en una
declaración
1
Establece todas las propiedades del borde
inferior de un elemento
1
Establece el color del borde inferior
1
Define el estilo del borde inferior
1
Establece el ancho del borde inferior
1
Establece el color de los cuatro bordes
1
Establece todas las propiedades del borde
izquierdo de un elemento
1
Establece el color del borde izquierdo
1
Define el estilo del borde izquierdo
1
Establece el ancho del borde izquierdo
1
Establece todas las propiedades del borde derecho
de una declaración
1
Establece el color del borde derecho
1
Define el estilo del borde derecho
1
Establece el ancho del borde derecho
1
Establece el estilo de los cuatro bordes
1
Establece todas las propiedades del borde
superior de una declaración
1
Establece el color del borde superior
1
Define el estilo del borde superior
1
Establece el ancho del borde superior
1
Establece el ancho de los cuatro bordes
1
Establece todas las propiedades de contorno en
una declaración
2
Establece el color de un esquema
2
Establece el estilo de un esquema
2
Establece el ancho de un esquema
2
Define la forma del borde de la esquina inferior
izquierda
3
Define la forma del borde de la esquina inferior
derecha
3
Una propiedad abreviada para establecer toda la
imagen de la frontera-* propiedades
3
Especifica la cantidad por la cual el área de la
imagen se extiende más allá de las fronteras del cuadro de la frontera
3
Especifica si la imagen de la frontera se debe
repetir, redondeadas o alargadas
3
Especifica los desplazamientos hacia el interior
de la imagen de la frontera
3
Especifica una imagen para ser utilizado como una
frontera
3
Especifica el ancho de la imagen de la frontera
3
Una propiedad abreviada para establecer las
cuatro propiedades de la frontera *- radio
3
Define la forma del borde de la esquina superior
izquierda
3
Define la forma del borde de la esquina superior
derecha
3
caja de decoración-break
3
Se conecta uno o más caída de las sombras a la
caja
3
Propiedad
Descripción
CSS
Especifica si para recortar los bordes izquierdo
/ derecho de los contenidos, si se desborda el área del elemento de contenido
3
Especifica si para recortar los bordes superior /
inferior del contenido, si se desborda el área del elemento de contenido
3
Especifica el método de desplazamiento preferido
de los elementos que se desbordan
3
Gira un elemento alrededor de un punto dado,
definido por la propiedad de rotación de punto
3
Define un punto como un desplazamiento desde el
límite del borde superior izquierdo
3
Propiedad
Descripción
CSS
del perfil de colores
Permite la especificación de un perfil de color
de origen distinto al predeterminado
3
Ajusta el nivel de opacidad de un elemento
3
la representación-la intención
Permite la especificación de un intento de
reproducción de color perfil distinto al predeterminado
3
Propiedad
Descripción
CSS
marcadores de etiqueta
Especifica la etiqueta del marcador
3
marcadores de nivel
Especifica el nivel del marcador
3
bookmark objetivo
Especifica el destino del vínculo al marcador
3
flotación de compensación
Empuja los elementos flotantes en la dirección
opuesta de la que se han rumoreado con flotador
3
guiones, después de
Especifica el número mínimo de caracteres en una
palabra con guión el personaje de guiones
3
guiones, antes de
Especifica el número mínimo de caracteres en una
palabra con guión antes de que el carácter de separación
3
guiones caracteres
Especifica una cadena que se muestra cuando un
guiones de rotura se produce
3
guiones-líneas
Indica el número máximo de sucesivas líneas de
guión en un elemento
3
guiones de los recursos
Especifica una lista separada por comas de los
recursos externos que pueden ayudar al explorador de determinar los puntos de
separación
3
guiones
Establece la forma de dividir las palabras para
mejorar el diseño de los párrafos
3
imagen de resolución
Especifica la resolución correcta de las imágenes
3
marcas
Añade cultivos y / o marcas de cruz para el
documento
3
cadena-set
3
Propiedad
Descripción
CSS
Establece la altura de un elemento
1
Establece la altura máxima de un elemento
2
Establece la anchura máxima de un elemento
2
Establece la altura mínima de un elemento
2
Establece el ancho mínimo de un elemento
2
Establece el ancho de un elemento
1
Propiedad
Descripción
CSS
Especifica la forma de alinear los elementos
secundarios de una caja
3
Especifica en qué dirección los hijos de una caja
se muestran
3
Especifica si los hijos de una caja es flexible o
rígido en tamaño
3
Asigna los elementos flexibles para flexionar los
grupos
3
Especifica si las columnas se van en una nueva
línea cada vez que se queda sin espacio en la caja de los padres
3
Especifica el orden de visualización de los
elementos secundarios de una caja
3
Especifica si los hijos de una caja debe ser
establecido en forma horizontal o vertical
3
Especifica la posición horizontal en cajas
horizontales y verticales en la posición vertical de las cajas
3
Propiedad
Descripción
CSS
Establece todas las propiedades de la fuente en
una declaración
1
Especifica la familia de fuentes para el texto
1
Especifica el tamaño de fuente del texto
1
Especifica el estilo de fuente para el texto
1
Especifica si el texto debe aparecer en una
fuente small-caps
1
Especifica el peso de una fuente
1
Una regla que permite a los sitios web para
descargar y utilizar otras fuentes de la "red de seguridad" fuentes
3
Preserva la legibilidad del texto en la fuente de
reserva se
3
Selecciona una cara normal, condensado o
expandido de una familia de fuentes
3
Propiedad
Descripción
CSS
Se utiliza con el: before y: after
pseudo-elementos, para insertar contenido generado por el
2
Incrementos de uno o más contadores
2
Crea o restaura uno o más contadores
2
Establece el tipo de comillas para las citas
incrustadas
2
cosecha
Permite que un elemento reemplazado a ser sólo un
área rectangular de un objeto, en lugar de la totalidad del objeto
3
se mueven a
Provoca que un elemento se elimina del flujo y
volver a introducir en un punto posterior en el documento
3
Página de la política
Determina qué página basada en presencia de un
elemento dado se aplica a un valor de contador o una cadena
3
Propiedad
Descripción
CSS
Especifica el ancho de cada columna en una
cuadrícula
3
Especifica la altura de cada columna en una
cuadrícula
3
Propiedad
Descripción
CSS
Una propiedad abreviada para establecer el nombre
de destino, objetivo nuevo, y las propiedades de posición de destino-
3
Especifica dónde abrir enlaces (punto de destino)
3
Especifica si los vínculos nuevo destino se
abrirá en una ventana nueva o en una nueva pestaña de una ventana existente
3
Especifica que los enlaces nuevos de destino se
debe colocar
3
Propiedad
Descripción
CSS
la alineación de ajuste
Permite una alineación más precisa de los
elementos
3
alineación inicial
Especifica cómo un elemento a nivel de línea se
alinea con respecto a su padre
3
línea de base del turno
Permite el reposicionamiento de la relación
dominante-de referencia a la dominante-de referencia
3
dominante de referencia
Especifica una escala de la línea base de mesa
3
caída inicial, después de ajustar
Establece el punto de alineación de la caída
inicial del punto de conexión principal
3
caída inicial, después de alinear
Establece la alineación de la línea en el cuadro
de la línea inicial se utiliza en el punto de conexión principal con la caja
de la letra inicial
3
drop-inicial-antes de ajustar
Establece el punto de alineación de la caída
inicial del punto de conexión secundaria
3
drop-inicial-antes-align
Establece la alineación de la línea en el cuadro
de la línea inicial se utiliza en el punto de conexión secundaria con la caja
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 un efecto de la gota inicial-
3
inline-box-align
Establece que la línea de un bloque en línea con
varias líneas se alinean con los elementos en línea anterior y siguiente
dentro de una línea
3
línea de apilamiento
Una propiedad abreviada para establecer la línea
de apilamiento, la estrategia, la línea de apilamiento-rubí, y propiedades de
la línea de apilamiento de desplazamiento
3
línea de apilamiento-rubí
Establece el método de la línea de apilamiento de
los elementos de bloque que contiene elementos de rubí anotación
3
línea de apilamiento de desplazamiento
Establece el método de la línea de apilamiento de
los elementos de bloque que contiene elementos con la base de cambio de
3
línea de apilamiento de estrategia
Establece la estrategia de la línea de
apilamiento de las cajas de línea apiladas dentro de un elemento en bloque
que contienen
3
texto de la altura
Establece la dimensión bloquear la progresión del
área de contenido de texto de una caja de línea
3
Propiedad
Descripción
CSS
Establece todas las propiedades de una lista en
una declaración
1
Especifica una imagen como marcador list-item
1
Especifica si el elemento de la lista de
marcadores, deben aparecer dentro o fuera del flujo de contenido
1
Especifica el tipo de marcador de objetos de
lista
1
Propiedad
Descripción
CSS
Establece todas las propiedades de los márgenes
en una declaración
1
Establece el margen inferior de un elemento
1
Establece el margen izquierdo de un elemento
1
Establece el margen derecho de un elemento
1
Establece el margen superior de un elemento
1
Propiedad
Descripción
CSS
recuadro de dirección
Establece la dirección del movimiento de los
contenidos
3
carpa-juego-cuenta
Establece el número de veces el mover el
contenido
3
marquesina de velocidad
Establece qué tan rápido se desplaza el contenido
3
marquesina de estilo
Define el estilo del movimiento de los contenidos
3
Propiedad
Descripción
CSS
Especifica el número de columnas de un elemento
se debe dividir en
3
Especifica la forma de llenar las columnas
3
Especifica la distancia entre las columnas
3
Una propiedad abreviada para establecer las
reglas de columna-* propiedades
3
Especifica el color de la norma entre las
columnas
3
Especifica el estilo de la norma entre las
columnas
3
Especifica el ancho de la regla entre las
columnas
3
Especifica el número de columnas de un elemento
debe extenderse a lo largo
3
Especifica el ancho de las columnas
3
Una propiedad abreviada para establecer el ancho
de columna y la columna de conteo
3
Propiedad
Descripción
CSS
Establece todas las propiedades de relleno en una
declaración
1
Define el relleno inferior de un elemento
1
Establece el margen izquierdo de un elemento
1
Define el relleno derecho de un elemento
1
Define el relleno superior de un elemento
1
Propiedad
Descripción
CSS
ajuste
Da una idea de cómo escalar un elemento
reemplazado si no su anchura ni su altura es de propiedad de automóviles
3
ajuste de posición
Determina la alineación de los objetos dentro de
la caja
3
imagen de la orientación
Especifica una rotación en la dirección correcta
o en el sentido de que un agente de usuario se aplica a una imagen
3
página
Especifica un tipo de página que debe ser un
elemento muestra
3
tamaño
Especifica el tamaño y la orientación de la caja
que contiene la página de contenido
3
Propiedad
Descripción
CSS
Especifica la posición inferior de un elemento
posicionado
2
Especifica que los lados de un elemento que otros
elementos flotantes no se les permite
1
Clips de un elemento absolutamente posicionado
2
Especifica el tipo de cursor que se mostrará
2
Especifica el tipo de caja de un elemento debe
generar
1
Especifica si una caja debe flotar
1
Especifica la posición izquierda de un elemento
posicionado
2
Especifica qué sucede si se desborda contenido de
la caja de un elemento
2
Especifica el tipo de método de posicionamiento
utilizado para un elemento (estática, relativa, absoluta o fija)
2
Especifica la posición correcta de un elemento
posicionado
2
Especifica la posición de la parte superior de un
elemento posicionado
2
Especifica si un elemento es visible
2
Establece el orden de apilamiento de un elemento
posicionado
2
Propiedad
Descripción
CSS
los huérfanos
Establece el número mínimo de líneas que deben
quedar en la parte inferior de una página cuando se produce un salto de
página dentro de un elemento
2
Establece el comportamiento de la página sin
precedentes después de un elemento
2
Establece el comportamiento de la página sin
precedentes antes de un elemento
2
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 deben
quedar en la parte superior de una página cuando se produce un salto de
página dentro de un elemento
2
Propiedad
Descripción
CSS
ruby-align
Controla la alineación del texto del texto ruby ruby y el contenido de base respecto a la otra
3
rubí saliente
Determina si, y de qué lado, texto ruby se permite que cualquier parte saliente de texto adyacente, además de su propia base, cuando el texto ruby es más ancho que la base de rubí
3
ruby-position
Controla la posición del texto ruby con respecto a su base
3
CSS 3 qué ¿hay de nuevo?
La especificaciónde CSS3 viene con interesantes novedades que permitirán hacer webs más elaboradas y más dinámicas, con mayor separación entre estilos y contenidos. Dará soporte a muchas necesidades de las webs actuales, sin tener que recurrir a trucos de diseñadores o lenguajes de programación.
CSS 3 trae grandes novedades para el diseño de webs y algunos navegadores comienzan a implementar CSS 3.
Qué es CSS
Con CSS 3, más control sobre la forma
CSS 1 ya significó un avance considerable a la hora de diseñar páginas web, aportando mucho mayor control de los elementos de la página. Pero como todavía quedaron muchas otras cosas que los diseñadores deseaban hacer, pero que CSS no permitía especificar, éstos debían hacer uso de trucos para el diseño. Lo peor de esos trucos es que muchas veces implica alterar el contenido de la página para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera más elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseño y hacer cosas que CSS no permitía, se estaba dando al traste con alguno de los objetivos para los que CSS fue creado, que era el separar por completo el contenido de la forma.
CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los elementos de la página.
Así pues, la novedad más importante que aporta CSS 3, de cara a los desarrolladores de webs, consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las web.
Propiedades nuevas en CSS 3
Fondos
- background-origin
- background-clip
- background-size
- hacer capas con múltiples imágenes de fondo
- colores HSL
- colores HSLA
- colores RGBA
- Opacidad
- text-shadow
- text-overflow
- Rotura de palabras largas
- box-sizing
- resize
- outline
- nav-top, nav-right, nav-bottom, nav-left
- Selectores por atributos
- overflow-x, overflow-y
- media queries
- creación de múltiples columnas de texto
- propiedades orientadas a discurso o lectura automática de páginas web
- Web Fonts
En futuros artículos ofreceremos algunas claves y explicaciones sobre varias de estas propiedades, al menos las más interesantes, así como ejemplos que sirvan para ir conociendo esta nueva especificación de CSS. Todo ello lo iremos colocando en el Manual de CSS 3.
https://www.welookups.com/cssref/pr_pos_z-index.html
ResponderEliminar