CSS | Selector [atributo=valor]

El selector [atributo=valor] en CSS se utiliza para seleccionar aquellos elementos cuyo valor de atributo es igual a “valor”. Sintaxis:   element [attribute = «value»] { // CSS Property } Nota: <!DOCTYPE> debe declararse para IE8 y versiones anteriores. Ejemplo 1:   html <!DOCTYPE html> <html>     <head>                   <!– CSS property used here –>         <style>             h1[id = … Continue reading «CSS | Selector [atributo=valor]»

¿Cómo crear una animación de barra de progreso usando HTML y CSS?

En este mini proyecto de desarrollo web, utilizaremos animaciones CSS y crearemos una barra de progreso usándolas. La barra de progreso comenzará desde cero e irá hasta cierto punto como queramos. La barra de progreso básicamente muestra la experiencia de un programador en diferentes idiomas en forma animada.  Requisito previo: conceptos básicos de HTML como … Continue reading «¿Cómo crear una animación de barra de progreso usando HTML y CSS?»

¿Cómo configurar el contenido como un contador?

La tarea es configurar el contenido como un contador. Las » variables» de la unidad de área de contadores de CSS mantenidas por CSS cuyos valores también aumentan según las reglas de CSS (para rastrear la cantidad de veces que se usan). Los contadores le permiten administrar la apariencia del contenido según su ubicación en … Continue reading «¿Cómo configurar el contenido como un contador?»

CSS | :selector de hijo único

El selector :only-child en CSS se usa para hacer coincidir cada elemento que es el único hijo de su padre. Representa un elemento sin hermanos. Sintaxis: :only-child { // CSS property } Ejemplo 1: <!DOCTYPE html> <html>     <head>         <title>:only-child selector</title>         <style>             h1 {                 color: green;                 text-align: center;             }             h2 {                 text-align: center;             }             div:only-child { … Continue reading «CSS | :selector de hijo único»

CSS | :Selector de primer hijo

El selector :first-child se usa para seleccionar aquellos elementos que son los elementos del primer hijo. Para :first-child selector, se debe declarar <!DOCTYPE> para IE8 y versiones anteriores. Sintaxis:   :first-child { // CSS property } Ejemplo 1:   html <!DOCTYPE html> <html>     <head>         <title>first child selector</title>         <style>             h1 {                 color:green;             }             p:first-child {                 background-color: green;                 color:white; … Continue reading «CSS | :Selector de primer hijo»

CSS | Selector de [atributo^=valor]

El selector [atributo^=valor] se utiliza para seleccionar aquellos elementos cuyo valor de atributo comienza con el atributo dado. Sintaxis: [attribute^=value] { // CSS Property } Ejemplo: <!DOCTYPE html>  <html>      <head>          <title>              CSS [attribute^=»value»] Selector          </title>                     <!– CSS property –>         <style>              p[class^=»for»] {                  background: green;                  color: white;              }          </style>      </head>      <body>          <h2>[attribute^=value] Selector</h2>                     <p … Continue reading «CSS | Selector de [atributo^=valor]»

CSS | :selector de idioma

El selector :lang se utiliza para apuntar al elemento que se basa en atributos de idioma para un valor específico. Este selector funciona con la ayuda del código de idioma. Sintaxis: :lang(lang-code) { //property } Códigos de idioma: es: para inglés. hola: para hindi. fr: para francés. de: para alemán es: para italiano ca: para … Continue reading «CSS | :selector de idioma»

¿Cómo crear Image Stack Illusion usando HTML y CSS?

En este artículo, vamos a crear una ilusión de imágenes debajo de la imagen principal. Es lo mismo que el conjunto de imágenes de la galería en la versión anterior de Android. Este es un proyecto simple, podemos lograr nuestro objetivo solo usando HTML Y CSS. Resumen del proyecto: Acercarse: Cree un div principal en … Continue reading «¿Cómo crear Image Stack Illusion usando HTML y CSS?»

¿Cómo crear un efecto de reflejo usando HTML y CSS?

El efecto de reflejo es uno de los mejores efectos que uno puede usar en su sitio web. Es un tipo de efecto informal por lo que es muy recomendable no utilizarlo en ningún proyecto profesional. Puede usarlo en sus proyectos personales y tal vez en su cartera para mostrar su creatividad. En este efecto, … Continue reading «¿Cómo crear un efecto de reflejo usando HTML y CSS?»

CSS: selector flotante

La pseudoclase CSS :hover selector se utiliza para diseñar elementos cuando se pasa el mouse sobre ellos. Se puede utilizar en todos los elementos. Podemos diseñar los enlaces para las páginas no visitadas usando el :selector de enlaces , para diseñar los enlaces a las páginas visitadas, use el :selector visitado y para diseñar el … Continue reading «CSS: selector flotante»