Contador CSS con incremento automático para cualquier elemento de página HTML. Fondos en diferentes capas.

Reg.ru: dominios y hosting

El mayor registrador y proveedor de alojamiento de Rusia.

Más de 2 millones de nombres de dominio en servicio.

Promoción, correo de dominio, soluciones empresariales.

Más de 700.000 clientes en todo el mundo ya han elegido.

*Pase el mouse sobre para pausar el desplazamiento.

De vuelta atras

12 increíbles funciones CSS

Si eres como yo, cuando veas una demostración impresionante de un nuevo efecto CSS3, no podrás evitar empezar a usarlo en tu trabajo.

Por supuesto, luego descubres que puedes usar este efecto en 2 o 3 navegadores principales (por supuesto, IE, como siempre, fuma nerviosamente al margen y no está incluido en esta lista) y generalmente decides esperar.

Esperar hasta este efecto será compatible con todos los navegadores. ¡Pero tengo buenas noticias para ti! Con la última actualización del navegador, hay algunas funciones CSS3 excelentes que son compatibles con todos los navegadores, ¡y puedes comenzar a usarlas ahora mismo!

Digresión lírica: La mayoría de estos efectos no funcionan en versiones anteriores de IE (desde la versión 9 e inferiores). Si sucede que en su país estos navegadores se utilizan en todas partes, me temo que tendré que molestarlo, esta lección no es para usted. Pero para los que se quedan, esto es lo que nos pueden ofrecer. navegadores modernos:

1. Animación CSS y transiciones.

La animación CSS finalmente está disponible para todos los principales navegadores, ¡incluso IE! (a partir de la versión 10). Hay 2 maneras de creación de css animaciones. El primero es muy simple y funciona a través de la propiedad. transición.

Usando esta propiedad, puedes crear efectos al pasar el mouse o, por el contrario, alejándolo. Area específica, o puede activar una animación utilizando JavaScript para cambiar las propiedades de un objeto en particular.

Como demostración de tales transiciones basadas en la propiedad. transición, arriba hay un ejemplo efecto de desplazamiento con planeta y cohete. Cuando pasas el cursor sobre un planeta, el cohete gira más cerca de él.

El segundo método de animación es un poco más complicado: consiste en describir la animación mediante una regla. @fotograma clave, que le permite crear una animación repetida o en bucle que es independiente de la acción del usuario o de un activador de JavaScript.

El código del efecto se muestra a continuación:

Contenedor( ancho: 300px; alto:300px; margen: 0 automático; posición:relativa; desbordamiento:oculto; ) .planet( posición:absoluta; arriba:0; izquierda:0; ancho:100%; alto:100%; fondo :url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) centro sin repetición) .rocket( posición:absoluta; arriba:0; ancho:100%; fondo:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) sin repetición centro de 50 píxeles /* Chrome todavía requiere el prefijo -webkit- */ -webkit-animation:orbit 2s linear infinito; animación:orbit 2s lineal infinito; transición: fondo-posición 0.8s; position:80px center; ) /* Establece fotogramas clave para la animación */ @-webkit-keyframes orbit ( de ( -webkit-transform:rotate(0deg);) a ( -webkit-transform :rotate(360deg); ) ) @keyframes orbit ( from ( transform:rotate(0deg); /* Incluí la propiedad -webkit-transform porque Google Chrome puede comenzar a admitir fotogramas clave sin prefijos en el futuro */ -webkit-transform :rotate(0deg);) to ( transform: girar (360 grados); -webkit-transform: rotar (360 grados); ) )

Hay mucho aquí Animaciones CSS, y supongo que comenzarás con este artículo. Si tiene curiosidad por saber si su navegador admite este efecto o no, ame y favorezca esta tabla.

2. Contar valores usando una propiedad calcular()

Otro nuevo y interesante artilugio CSS es la función calcular(). Le permite realizar cálculos aritméticos simples en CSS. Puede usar esto en cualquier lugar donde necesite lidiar con el largo o el ancho.

Pero lo que es aún mejor es que puedes mezclar fácilmente diferentes dimensiones, ya sean píxeles o porcentajes.

Esto te permite crear una gran cantidad de trucos y técnicas diferentes (por ejemplo con capas y posicionamiento), eliminando todos los trucos a los que podrías haber tenido que recurrir para obtener un resultado similar. ¿Que podría ser mejor? Pero aquí está la cuestión: funciona con IE versión 9 (¡sí!) y superiores y sin prefijos adicionales.

/* Calcular el ancho */ .container( width: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; )

3. Selectores avanzados

Hoy en día, si adjunta ID a elementos solo para aplicarles propiedades de estilo, está haciendo algo completamente incorrecto. Desde CSS2.1 y CSS3 habilitados un gran número de Potentes selectores para hacer tus diseños más limpios y tus hojas de estilo más geniales.

Esto es compatible con todos los navegadores principales, incluidos IE9 y superiores.

Ejemplo:

Un párrafo de texto que es inseparable de otras etiquetas e ID, con una cierta cantidad de estilos CSS interesantes.

/* estilos CSS- nada interesante aquí */ p( tamaño de fuente: 16px; ancho: 420px; margen: 20px auto 0; text-align:center; ) .container( ancho: 420px; margen:50px auto 0; desbordamiento: oculto; relleno: 5px; ) .elem( ancho:30px; alto:30px; margen:4px; color de fondo:#A0DFAC; float:izquierda; ) .elem span( posición:absoluta; arriba:5px; izquierda:5px; derecha:5px; bottom:5px; border:2px solid #fff; ) /* Selector que aplica propiedades a la primera letra y a la primera línea de nuestro párrafo */ p::first-letter( background-color: #666; color: #FFF ; tamaño de fuente: 24px; estilo de fuente: normal; relleno: 0 5px; decoración de texto: subrayado) /* Hacer el primero y el último elemento es morado */ .elem:first-child, .elem:last-child( background-color: #948bd8; ) /* Haz que todos los demás elementos sean redondos */ .elem:nth-child(odd)( border-radius :50%; ) /* Hacer que cada sexto elemento sea rojo */ .elem:nth-child(6 )( background-color:#cb6364; ) /* Aplicar estilo al elemento que contiene la etiqueta span */ .elem:not(:empty)( background-color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); ) /* Elementos de destino por atributo */ .elem( background-color:#aaa; ) .elem( background-color:#d7cb89; ) /* El valor del atributo debe comenzar con "bar". porque esto corresponde a los dos elementos descritos anteriormente*/ .elem( ancho: 16px; alto: 16px; margen: 11px; ) /* El elemento que sigue al que tiene data-foo="bar2"*/ .elem + .elem ( fondo -color:#78ccd2;)

4. Contenido generado y contadores

El contenido generado es herramienta poderosa en manos del desarrollador, que queda disponible después de aplicar pseudoelementos ::antes Y ::después.

Esta característica le permitirá utilizar menos HTML del que podría utilizar de otro modo. Esto es especialmente beneficioso en los casos en los que necesita aplicar sombras en bloque u otros efectos visuales que requieren etiquetas durar o div. Como resultado, obtendrá un código HTML más minimalista y semánticamente correcto.

CSS3 También proporciona a los pseudoelementos acceso a contadores que pueden incrementarse mediante reglas CSS. También pueden recibir valores de atributos de los elementos principales que los contienen. Ejemplo a continuación:

Container( /* Establece el contador llamado cnt en cero */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; ) /* Puede diseñar pseudoelementos y darles contenido como si fueran elementos reales de la página */ .container::before( display: block; content:"Pase el cursor sobre estos elementos:"; font-size:18px; font- peso: negrita; alineación de texto: centro; relleno: 15px; .container span (pantalla: bloque en línea; relleno: 2px 6px; color de fondo: #78CCD2; color: #186C72; radio de borde: 4px; margen: 3px ; cursor:default; ) /*Crear un contador con un pseudoelemento*/ .container span::after( /* Cada vez que se aplica esta regla, el contador se incrementará en 1 */ counter-increment: cnt; / * Agregar al valor del contador parte del contenido */ content:" #" counter(cnt); display:inline-block /* Los pseudoelementos pueden acceder a los atributos de sus padres */ .container span::before( position:absolute ; abajo: 0; izquierda: 0; ancho: 100%; contenido:attr(título-datos); color:#666; opacidad: 0; /* Animar transiciones */ -webkit-transition:opacity 0.4s; transición:opacidad 0,4s; ) .container span:hover::before( opacidad:1; )

El contenido generado es compatible en todas partes, incluido IE9 y superiores.

Los degradados brindan a los diseñadores web la capacidad de crear transiciones suaves entre colores sin utilizar imágenes. Los degradados CSS también se ven muy bien en las pantallas retina porque se generan sobre la marcha.

Pueden ser lineales o radiales y pueden configurarse para que se repitan. Durante algún tiempo estuvieron inaccesibles para todos, pero después de unos meses y Una cierta cantidad de cambios en la sintaxis, estuvieron disponibles para casi todos, sin prefijos adicionales.

CS.container( text-align:center; padding:20px 0; width:450px; margin: 0 auto; ) .container div( width:100px; height:100px; display:inline-block; margin:2px; box-shadow : 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD; color:#666; alineación vertical: 230px; #58c0c7); ) #el2( fondo:gradiente-radial(#77d19e,#46c17b); ) #el3( fondo:gradiente-lineal-repetitivo( -45deg, #de9dd4, #de9dd4 5px, blanco 5px, blanco 10px); #el4(fondo:gradiente-radial-repetitivo(#b8e7bf, #b8e7bf 5px, blanco 5px, blanco 10px); )

¿Te imaginas una época en la que estuviéramos limitados a unas pocas fuentes hechas a mano que se ajustaran exactamente a todos los navegadores? Es difícil de creer, pero hoy, gracias a servicios como Fuentes de Google y typekit, que le permiten utilizar excelentes fuentes simplemente conectándolas a los estilos de su página.

Incluso hay fuentes de íconos, como fontawesome, que presentan lindos íconos vectoriales en lugar de letras o números. Todo esto fue posible con la ayuda de la regla. @Perfil delantero, que permite especificar el nombre, las características y la fuente de la fuente, a la que luego se puede hacer referencia a través de una propiedad fuente/familia de fuentes.

¡Aquí está mi hermosa fuente!)

H1( /* Conectamos el uso de la fuente seleccionada a HTML */ font-family: Satisfy, cursive; font-weight: normal; font-size: 24px; padding-top: 60px; )

Con algunas soluciones, las fuentes funcionan en navegadores a partir de IE 6. Sin embargo, hay dos servicios que se describieron anteriormente, por lo que no necesita estas soluciones ahora.

7. Tamaño del bloque. Propiedad tamaño de caja

La principal causa de dolor de cabeza para los novatos en CSS es el modelo de caja.

Hubo algunas buenas razones para estandarizar este modelo, pero siguió siendo poco intuitivo, por ejemplo en los casos en los que estableces la altura y el ancho de un bloque, pero cambian según el valor. relleno o borde.

Esta pequeña omisión lo rompe todo, pero finalmente tenemos una manera de restaurar la cordura y deshacernos del dolor de cabeza. Cumple la regla tamaño de caja! Ahora puedes preguntar cuadro de borde, gracias al cual los elementos quedan exactamente como te gustaría que fueran. Ver por ti mismo:

Container( text-align:center; ) .container div( /*Configuración del método de tamaño de caja */ box-sizing:border-box; /*Tenemos un Firefox especial, por lo que aún requiere prefijos*/ -moz-box -sizing :border-box; width:120px; height:120px; display:inline-block; vertical-align:top /* Gracias a la regla de tamaño del cuadro, podemos establecer los valores de relleno y borde como deseemos. desea, y los elementos seguirán siendo del mismo tamaño que antes*/ #el1( color:#524480; background-color:#B2A4E0; ) #el2( padding:8px; border:10px solid #9ec551; background-color. :#fff; ) #el3( relleno:32px ; color de fondo:#ccc )

8. Imágenes como fronteras o propiedad imagen-borde

Propiedad imagen-borde le permite mostrar imágenes que ha diseñado especialmente alrededor de elementos, como un esquema. Ciertos límites contenidos en una imagen o sprite corresponden o coinciden con ciertos límites de los elementos del bloque. Vea un ejemplo para entender esto más claramente:

¡Saluda a los lindos contornos de bloques de imágenes!

P( text-align:center; padding:20px; width:340px; margin: 0 auto; /*Establecer propiedades para el borde y para la imagen utilizada como borde*/ border:30px solid transparent; border-image:url( http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 ronda)

Para una mirada más profunda, consulte esta página y este párrafo. Compatible con todos los principales navegadores e IE 11.

Las consultas de medios son imprescindibles si quieres profundizar en el diseño web. Han existido por un tiempo, pero vale la pena mencionarlos porque... Cambiaron la forma en que construimos sitios web.

Esto se utiliza cuando necesita que el sitio web se vea igualmente correcto en diferentes dispositivos (por ejemplo, dispositivos móviles: tabletas, teléfonos inteligentes, computadoras portátiles, etc.) con diferentes anchos de pantalla. Hoy creamos sitios web que deben poder adaptarse al tipo de dispositivo, su orientación y la resolución de su monitor.

Las consultas de medios son increíblemente fáciles de usar: todo lo que necesitas hacer es envolver tus estilos CSS en un bloque de reglas @medios de comunicación. Cada @medios de comunicación un bloque se activa cuando se cumplen una o más condiciones.

/* Estilo para el contenido principal y la barra lateral */ .container( width:900px; margin: 0 auto; overflow:hidden; ) .main-section( background-color:#CDEBC4; color:#6D8B64; width:520px; float: izquierda; altura: 500 px; ) .sidebar ( color de fondo: #ccc; ancho: 350 px; flotador: derecha; altura: 400 px; ) .container p ( padding-top: 100 px; alineación de texto: centro; ) .note ( text-align:center; padding-top:60px; font-style:italic) /* Estas simples consultas de medios permiten que los bloques se adapten al ancho de su pantalla */ @media (max-width:900px)( .container( width :100 %; ) .sección principal, .barra lateral( ancho:automático; margen inferior:20px; flotante:ninguno; ) )

Las consultas de medios pueden incluir comprobaciones de la resolución de la pantalla del dispositivo, la orientación, la profundidad del color y más. Puedes leer sobre todo esto y mirar la tabla de compatibilidad.

10. Fondos en diferentes capas.

Con esta función, los diseñadores crean efectos increíblemente interesantes. Pueden componer una imagen completa a partir de sus diferentes partes ubicadas en diferentes capas.

Cada una de estas capas (imagen) puede moverse y animarse a su manera, por ejemplo, como en la demostración a continuación (pase el mouse sobre la imagen y vea qué sucede). Todas las propiedades de fondo en CSS ahora pueden aceptar una lista de propiedades separadas por comas para cada capa individual:

Espacio( /* Establecer una lista de fondos separados por comas */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big .png" ) centro sin repetición 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") no- repetir centro inferior; ancho:200px; alto:200px; margen: 0 auto; border-radius:3px; /* Posición animada para ambos fondos */ transición:fondo-posición 1s) .space:hover( /* ¿Lo mismo para las propiedades? como background-position y repetir */ background-position:35% 20px, arriba a la derecha)

Para más información mira aquí. Muy buen apoyo navegadores: todos los navegadores modernos son compatibles Esta regla. .

Los diseños basados ​​en columnas han sido un problema importante para la gente de CSS. Por lo general, en esto interviene un servidor o JavaScript para dividir el texto en partes/columnas iguales. Esto hizo que la tarea fuera increíblemente complicada y también acabó con una gran cantidad de tiempo valioso del desarrollador. Finalmente, ahora es fácil hacerlo usando una regla CSS. columnas.

Container( ancho: 500px; margen: 0 auto; ) /* Así es como simplemente creamos columnas */ .container p( -moz-columns:3; -webkit-columns:3; columns:3; )

Existe un buen soporte para esta regla, sin embargo, todavía requiere prefijos. Pero existen ciertas diferencias y matices entre los navegadores que es importante conocer.

12. Transformaciones CSS 3D

No hay nada más atractivo y maravilloso en la web que una impresionante demostración de CSS en 3D. Si bien la utilidad de esto fuera de la demostración y fuera del portafolio es algo cuestionable, 3D CSS ofrece varias características más potentes para diseñadores y desarrolladores que pueden ganarse el corazón de los usuarios si se utilizan correctamente.

Mire el código de ejemplo a continuación:

Container( /* Cómo se deben expresar los efectos 3D */ perspectiva: 800px; -webkit-perspective: 800px; fondo: radial-gradient(#e0e0e0, #aaa); ancho:480px; alto:480px; margen:0 auto; borde -radius:6px; position:relative; ) .iphone-front, .iphone-back( /* Conectando transformación 3D */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /*Usamos 2 divs diferentes para la parte frontal y posterior del teléfono. Esta propiedad oculta el div cuando se gira, por lo que se mostrará el lado opuesto */ backface-visibility: oculto -webkit-backface-visibility: oculto altura:333px; :absoluto; arriba:50%; izquierda:50%; margen:-166px 0 0 -100px; fondo:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally- use/assets/img/iphone.png) centro izquierdo sin repetición; /* Animación de transición */ transición:0.8s; ) .iphone-back( /*La parte posterior gira 180 grados de forma predeterminada*/ transform:rotateY(180deg) ) ; -webkit-transformar: rotar Y (180 grados); posición de fondo: centro derecha; ) .container:hover .iphone-front( /*Cuando se desplaza el contenedor con el mouse y se activa el desplazamiento, gire la parte frontal y ocultela */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg) ; ) .container :hover .iphone-back( /*... al mismo tiempo rotar atrás y hacer visible*/ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); )

Este código se modeló a partir de este tutorial, que recomiendo consultar.

Si desea obtener más información sobre CSS 3D, consulte la introducción detallada. Si no está apuntando a navegadores IE más antiguos, la compatibilidad del navegador con CSS 3D también es bastante buena.

Otros beneficios dignos de mencionar

Si también usa prefijos para radio-frontera Y sombra de la caja, entonces ahora puedes olvidarte de ello con seguridad.

Además ahora puedes empezar a usar datos-uri para imágenes de fondo, para todos los navegadores.

Propiedad opacidad ahora está disponible y es compatible en todas partes, también será muy útil conocer la propiedad tamaño de fondo.

Todavía pasará algún tiempo antes de que haya soporte en varios navegadores para caja flexible, @apoya, filtros y máscaras CSS, ¡pero estoy seguro de que vale la pena esperar!

La especificación CSS2.1 contiene una técnica que permite al desarrollador combinar tres Propiedades CSS y un pseudoelemento para crear un contador autoincremental, similar al utilizado en una lista ordenada.

A diferencia de un contador de listas, que sólo se utiliza para elementos

o
y con solo un simple incremento, el nuevo método de contador introducido en CSS2.1 se puede usar con cualquier conjunto de elementos y tiene más amplias oportunidades organización de cuentas.

Este método puede resultar confuso porque utiliza múltiples propiedades y es diferente del código CSS normal. En este tutorial intentaremos aclarar el uso de dicho contador e indicar sus ventajas y desventajas.

Sintaxis

El código CSS del contador se ve así:

Div.section ( contador-reinicio: títulos 0; ) h2:antes ( contador-incremento: títulos 1; contenido: "Capítulo " contador (títulos, decimal) ": "; )

Como se mencionó, se utilizan tres propiedades CSS: contador-reinicio, contador-incremento y contenido. Si falta alguna de las propiedades especificadas, el método no funcionará.

Analizando la sintaxis

Entonces, comprendamos la sintaxis y para qué sirven los pares propiedad/valor:

Indicador de contexto

El primer bloque de declaraciones (el selector div.section) especifica qué sección del marcado contiene un conjunto de elementos que tendrán un valor entero que se incrementa automáticamente. Es importante entender la diferencia entre la declaración de este bloque y el siguiente. Este elemento en particular (

) no tendrá un valor de contador entero anterior. Se trata simplemente de un “contenedor” o “contexto” en el que se ubican los elementos que utilizan el contador.
Pero por contexto, es necesario definir el nombre del contador que se utilizará para los elementos declarados en el siguiente bloque.
Reinicio del contador
La propiedad de reinicio del contador debe usarse junto con un selector que especifique el contexto, como se describe anteriormente. La primera parte del valor es el nombre personalizado que le da al contador. Esta es una parte requerida. El nombre puede ser cualquier cosa excepto palabras reservadas para CSS (por ejemplo, no puedes darle un nombre al contador). “ninguno”, “heredar”, o "inicial").
La segunda parte del valor de la propiedad de reinicio del contador es opcional. El valor predeterminado es "0". Este número indica el punto de partida del contador. Es importante recordar que el conteo comienza desde el siguiente valor entero después del valor de reinicio. Por lo tanto, si establece el valor en “0”, el contador comenzará desde “1”. Y si se configuró "-5", el contador comenzará desde "-4", y así sucesivamente.
Elementos numerados
El segundo bloque de anuncios (selector h2) utiliza el pseudoelemento:before para indicar dónde se debe colocar el contenido específico (usando la propiedad content) antes de todo. elementos objetivo(en nuestro caso estos son los elementos
).
Aumento del contador
La propiedad de incremento del contador indica a qué contexto está realmente asociado el contador. Entonces, el primer valor (obligatorio) es el nombre del contador personalizado correspondiente de la propiedad de reinicio del contador en el ID de contexto del primer bloque de declaración.
El segundo valor de la propiedad de contraincremento es opcional. Representa la cantidad en la que se debe aumentar el contador (o disminuir si especificó un valor negativo). El valor predeterminado es "1".
Contenido del inserto
Con la propiedad de contenido, especificamos exactamente qué se debe insertar antes de cada elemento en un conjunto determinado (elementos
).
El único valor requerido para la propiedad de contenido es la función contador(), pero generalmente se agrega algo más (como espacios) antes o después (vea el ejemplo anterior) para que el contador se vea bien.
función contador()
La función contador() puede tomar dos argumentos, separados por una coma. El primer argumento apunta al valor actual del contador nombrado. El segundo argumento es opcional y especifica el formato de salida del valor del contador. El valor predeterminado es " decimal”, pero puedes especificar “ romano superior”, “alfa superior”, y así sucesivamente (igual que para la propiedad tipo-estilo-lista de una lista ordenada).
También puedes usar la función contadores() y organizar contadores anidados, pero no los cubriremos en este tutorial.
Resumen gráfico
Si todo lo anterior parece complicado, el siguiente infograma describe los elementos básicos de un control giratorio CSS:
Soporte del navegador y desventajas.
Se deben declarar juntos varios contadores que se utilizan para el mismo contexto (para construir una cascada de numeración). El siguiente ejemplo no funcionará:
Div.numerada ( contador-reinicio: encabezados 0 ) div.numerada ( contador-reinicio: subtítulos 0 )
Sólo el segundo contador tendrá efecto porque anula el anterior. Por tanto, ambos contadores deben declararse en la misma línea:
Div.numerada ( contador-reset: encabezados 0 subtítulos 0 )
Una posible desventaja del uso de contadores es mezclar contenido y presentación. Especialmente, esta declaración se refiere a la propiedad del contenido. La línea divisoria entre contenido y presentación es borrosa.
Las tres propiedades enumeradas y el pseudoelemento que describen la funcionalidad del contador CSS no son compatibles con las versiones 7 y posteriores de IE, y pueden tener problemas en IE8, Opera y Safari. Firefox y Chrome admiten todas las propiedades descritas sin problemas.
Beneficios y uso práctico.
Los contadores CSS tienen la ventaja obvia de no tener que preocuparse por numerar los distintos puntos del contenido. Al igual que las listas ordenadas, el contenido no tiene números reales. Puede insertar elementos, eliminar elementos, intercambiar elementos y los signos numéricos se corregirán automáticamente.
Algunos ejemplos de uso práctico:
• Denominación y numeración de capítulos (como en nuestro ejemplo)
• Numeración de filas o celdas de una tabla
• Numeración de encabezados HTML
• Mejorar/cambiar la apariencia o incrementar el valor de las listas ordenadas regulares
¿Se pueden utilizar contadores CSS?
Dado que no son compatibles con IE6 e IE7, no debe utilizar contadores CSS para los sitios de los clientes o deberá buscar un reemplazo adecuado para ellos. Pero para los sitios web y aplicaciones dirigidos a una audiencia más técnica (por ejemplo, un sitio para uso en dispositivos móviles cuyos navegadores admiten CSS3), dichos contadores pueden ser una forma efectiva de crear un sistema para numerar puntos de contenido sin el uso de codificación.
Consulte la página de demostración para ver un ejemplo del uso de contadores CSS para encabezados.
Los contadores se identifican mediante identificadores (para más información al respecto, consulte las secciones de contadores, que contienen información sobre las propiedades de incremento y reinicio del contador). El valor del contador es un identificador; el valor predeterminado es un número.
Una secuencia de contadores anidados se denota de la siguiente manera: "contadores( , )" o "contadores( , , )".
En CSS2, el valor de los contadores se puede establecer mediante la propiedad "contenido". Es aceptable utilizar none como valor de la propiedad "contenido", que equivale a una lista vacía.
El siguiente ejemplo crea un estilo en el que hay elementos "P" numerados para cada elemento "H1", con cada párrafo numerado en números romanos seguido de un punto y un espacio.
1.
2.	H1 (reinicio del contador: par-num)
3.	P:antes (contenido: contador(par-num, romano superior) ".")
4.
Un contador que supera los límites establecidos por el parámetro "counter-reset" se pone a cero y toma el valor 0
Los contadores se crean utilizando las siguientes funciones adicionales contador(nombre) o contador(nombre, estilo). Nombre – significa el nombre del contador, estilo – el tipo de numeración (todos los tipos se configuran según la propiedad list-style-type)
1.
2.
3.
4.
5.
10.
11.
12.
13.	primer capitulo
14.	Capitulo dos
15.	Capítulo tres
16.	Capítulo cuatro
17.
18.
19.
20.
La numeración automática en CSS2 se crea utilizando contenido automático (la propiedad de contenido) además de las propiedades de restablecimiento de contador y incremento de contador.
Inicialmente, se debe especificar el nombre del contador con un segundo parámetro opcional que define el estilo de numeración automática, por ejemplo
La numeración automática en CSS2 está controlada por dos propiedades: contador-reinicio y contador-incremento. El reinicio del contador crea subsecciones cuando se utiliza la numeración automática. Esta propiedad, al igual que la propiedad de incremento del contador, puede contener el nombre del contador y un incremento opcional como valor.
1.
2.
3.
4.
5.
19.
20.
21.	Capítulo
22.	Subsección
23.	Nuestro carácter es el resultado de nuestro comportamiento.
24.	Capítulo
25.	Subsección
26.	No hay nada más patético
27.	y más magnífico que el hombre.
28.	Subsección
29.	Entre toda clase de criaturas que respiran y caminan,
30.	Aquí, en nuestra tierra, el hombre es muy lamentable.
31.	Subsección
32.	Dondequiera que haya una persona
33.	hay lugar para las buenas obras.
34.
35.
36.
Del autor: En este breve artículo nos familiarizaremos con los contadores CSS, una propiedad útil, pero aún no muy conocida. Después de nuestra demostración, veremos ejemplos reales de sitios que utilizan contadores CSS.
Tarea principal: diseñar una lista numerada
Primero, veamos lo que deberíamos obtener:

Nada complicado, ¿verdad? Pero hay un pequeño "pero": al crear marcadores, usaremos marcado semántico y, si es posible, evitaremos divs y spans innecesarios tanto como sea posible. ¡Veamos un método flexible y comprensible!
contadores CSS
Para crear esta plantilla, sólo necesitas crear una lista numerada. Aquí se podría decir "¿es posible tomar otro elemento o ni siquiera una lista?". La respuesta es sí, pero debemos recordar que sólo una lista numerada describe con precisión la estructura de nuestra página.
La segunda pregunta probablemente será "¿Es posible rehacer completamente apariencia enumerar números? Diseñar una lista numerada es una tarea bastante difícil, pero afortunadamente existe otra forma para varios navegadores. Así que ocultemos los números de la lista y usemos contadores CSS.
Sintaxis
Usando contadores CSS puedes generar números basados ​​en elementos repetidos y diseñarlos. Piense en los contadores como variables cuyos valores se pueden incrementar. Veamos la sintaxis básica:

Creando un nuevo contador. La figura anterior muestra cómo crear un contador para una lista numerada y establecer su alcance. Usamos la propiedad de reinicio del contador.
El primer valor es el nombre del contador.
Luego viene un parámetro opcional que especifica el punto de inicio del contador (predeterminado 0). Tenga en cuenta que el contador siempre cuenta hacia arriba, es decir. nuestro primer valor será 1.

Estilización elementos secundarios. En la segunda imagen puede ver que estamos agregando estilos para la pseudoclase ::before en el elemento de la lista li.
La propiedad de contenido se ha establecido en un valor. Usando contadores CSS con la propiedad content, podemos concatenar los números generados con cadenas.
Se indica el nombre del mostrador.
Y el tipo se establece en decimal ( sistema decimal estimación). Los valores positivos son los mismos que los de propiedades de tipo de estilo de lista.
En la propiedad de incremento del contador volvemos a especificar el nombre del contador.
Luego, opcionalmente, puede especificar un paso de incremento. El valor predeterminado es 1.
Calificación
Según lo anterior, el marcado quedará así:
1. Elemento de lista

   Algún texto aquí.

2. Elemento de lista

   Algún texto aquí.

<-- еще элементы списка -->
< ol > < li > < h4 >Elemento de lista< / h4 > < / li > < li > < h4 >Elemento de lista< / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol ( restablecimiento de contador: sección; ) li ( tipo de estilo de lista: ninguno; tamaño de fuente: 1.5rem; relleno: 30px; margen inferior: 15px; fondo: #0e0fee; color: #fff; ) li:: antes ( contenido: contador (sección); contraincremento: sección; visualización: bloque en línea; posición: absoluta; izquierda: -75px; arriba: 50%; transformación: traducirY(-50%); relleno: 12px; fuente- tamaño: 2rem; altura: 25px; color: #000; borde: 3px sólido #000;
viejo ( contador-reset: sección; li ( tipo-estilo-lista: ninguno; tamaño de fuente: 1,5rem; relleno: 30px; margen inferior: 15px; antecedentes: #0e0fee; color: #fff; li::antes( contenido: contador(sección); contraincremento: sección; mostrar: en línea - bloque; posición: absoluta; izquierda: - 75px; arriba: 50%; transformar: traducirY(-50%); relleno: 12px; tamaño de fuente: 2rem; ancho: 25 píxeles; altura: 25 píxeles; Restricciones Es importante señalar que las pseudoclases no están 100% disponibles en este momento. Para averiguarlo, realicé examen rápido: Instalé NVDA y abrí la demostración de Chrome 50, Firefox 45 y explorador de Internet 11. Descubrí que al usar Internet Explorer, el Narrador no hablaba el contenido generado. Por el momento la mayoría lectores de pantalla reconocer dicho contenido normalmente. Sin embargo, para comprender qué se puede generar utilizando pseudoelementos y qué no, simplemente necesita conocer estas restricciones. Ejemplos de contadores CSS Hemos cubierto los conceptos básicos del trabajo con contadores CSS y ahora podemos mostrar un par de ejemplos de sus usos potenciales. En primer lugar, los contadores CSS se utilizan a menudo en las versiones online de los periódicos. A menudo estarán ubicados en barras laterales: Los contadores CSS también se pueden utilizar en secciones donde se describen ciertos pasos o se indica la dirección de la acción. Ejemplos: Ejemplos con código HTML adicional Arriba dimos dos ejemplos de versiones en línea de publicaciones que utilizan contadores CSS. Ahora veamos dos ejemplos más, pero ahora en lugar de contadores usamos código HTML redundante (aunque el contenido esté disponible): Conclusión En este breve artículo, aprendimos cómo diseñar listas numeradas usando contadores CSS. Resumir: Los contadores CSS son perfectos para cualquier proyecto con listas numeradas dinámicas y estilos personalizados. Sin embargo este método no 100% disponible. es necesario entenderlo lados débiles y utilizar sólo en los casos apropiados. Para crear un contador, necesita configurar dos propiedades (reinicio del contador, incremento del contador) y una función (contador() o contadores())). El contador se muestra mediante un pseudoelemento. La operación del contador involucra la propiedad de contenido y solo es accesible desde debajo del pseudoelemento. ¿Alguna vez has usado contadores CSS en tus proyectos? Si es así, ¡no dudes en compartir tu trabajo!
contadores CSS le permite ajustar la apariencia del contenido según su ubicación en un documento. Por ejemplo, puede utilizar contadores para numerar automáticamente los títulos de una página web. Los contadores son, en esencia, variables mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS para realizar un seguimiento de cuántas veces se utilizan.
Usando contadores
Manipular el valor de un contador
Para utilizar un contador CSS, primero se debe inicializar a un valor con la propiedad de reinicio del contador (0 de forma predeterminada). La misma propiedad también se puede utilizar para cambiar su valor a cualquier número específico. Una vez inicializado, el valor de un contador se puede aumentar o disminuir con el incremento del contador. El nombre del contador no debe ser "ninguno", "heredado" o "inicial"; de lo contrario, se ignora la declaración.
Mostrando un contador
El valor de un contador se puede mostrar utilizando la función contador() o contadores() en una propiedad de contenido.
La función contador() tiene dos formas: "contador(nombre)" o "contador(nombre, estilo)". El texto generado es el valor del contador más interno del nombre de pila dentro del alcance del pseudoelemento dado. Tiene el formato especificado (decimal por defecto).
La función contadores() también tiene dos formas: "contadores(nombre, cadena)" o "contadores(nombre, cadena, estilo)". El texto generado es el valor de todos los contadores con el nombre de pila dentro del alcance del pseudoelemento dado, desde el más externo al más interno, separados por la cadena especificada. Los contadores se representan en el estilo indicado (decimal por defecto).
Ejemplo básico
Este ejemplo agrega "Sección:" al principio de cada encabezado.
CSS
body ( counter-reset: sección; /* Establece un contador llamado "sección", y su valor inicial es 0. */ ) h3::before ( counter-increment: sección; /* Incrementa el valor del contador de sección en 1 * / contenido: contador(sección); /* Muestra el valor del contador de sección */ )
HTML
Introducción
Cuerpo
Conclusión
Resultado
Contadores nido
Un contador CSS puede ser especialmente útil para crear listas delineadas, porque se crea automáticamente una nueva instancia del contador en los elementos secundarios. Usando la función contadores(), se puede insertar texto separador entre diferentes niveles de contadores anidados.
Ejemplo de contador anidado
CSS
ol ( counter-reset: sección; /* Crea una nueva instancia del contador de sección con cada elemento ol */ list-style-type: none; ) li::before ( counter-increment: sección; /* Incrementa solo esta instancia del contador de sección */ contenido: contadores(sección, ".") " " /* Combina los valores de todas las instancias del contador de sección, separados por un punto */ )
HTML
1. artículo
2. artículo
   1. artículo
   2. artículo
   3. artículo
      1. artículo
      2. artículo
      1. artículo
      2. artículo
      3. artículo
   4. artículo
3. artículo
4. artículo
1. artículo
2. artículo



Popular en la categoría:

Cómo fusionar capas en Photoshop en una o combinarlas en un grupo...
leer

Transferir contactos a un nuevo teléfono Android
leer

Samsung Galaxy se reinicia solo - Soluciones Galaxy Note...
leer

Características clave de Kaspersky Rescue Disk
leer