Cerrar menu
Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook X (Twitter) Instagram
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Facebook X (Twitter) Instagram Pinterest Youtube
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Ver todas las categorias
    7. Post promocionado
  • Smartphone

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Tendencias en sistemas operativos en smartphone

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Cómo limpiar la unidad C de archivos innecesarios

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Los componentes fundamentales que todo PC debería tener

    Que es la tecla TAB

    Cifrado | Seguridad Local

    Maximiza tu productividad: Descubre el sistema interactivo que revolucionará la gestión de proyectos en tu empresa

    Cómo limpiar la unidad C de archivos innecesarios

    Como jugar online y resolver un sudoku

    Que es la tecla TAB

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Cifrado | Seguridad Local

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    La ciberseguridad: Vital Para Las Apuestas Online en España

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    ¿Aburrido de tu viejo televisor? Descubre las últimas tendencias en televisores

    Generador de Video IA: La Revolución en la Creación Audiovisual

    Los últimos celulares para que estés a la última

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo

    Desarrolla un cuerpo fuerte y saludable

    ¿Qué es la forma física?

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Consejos para maximizar las caminatas diarias

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Consejos para aplicar pestañas postizas

    Consejos para una piel perfecta este invierno

    La nutrición y un cabello saludable

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteinas - Una guía para principiantes

    Snacks nutritivos para cada antojo

    Inspiración de traje de otoño

    La dura verdad sobre las modelos de talla grande

    Razones por las que las marcas de moda de lujo son tan caras

    Cuales son las mejores frutas para adelgazar

    Como enseñar a leer y a escribir

    Como generar cuentas Disneyplus

    Calcular porcentajes con la Calculadora de Windows 10

    Bricolaje para la decoración del hogar

    Top 10 de posturas de yoga

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Inspiración de traje de otoño

    Consejos de belleza para lucir fresca en el verano

  • Marketing

    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Qué es un Link Dofollow?

    ¿Qué es Nofollow?

    ¿Qué es el remarketing?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

  • Juegos

    Para qué se pueden usar las Gafas VR PS4

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Sony prohíbe cuatro juegos de terceros en Xbox

    Prepárate para el futuro: Project Trinity llega a finales de 2024

  • Herramientas
Búsqueda extendida

Escriba arriba y presione Enter para buscar.

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?

Diseño Web » Efecto superposición con box-shadow en CSS3

Efecto superposición con box-shadow en CSS3


0 Marzo 09, 2019
Compartir

Compartir
Twitter Pinterest LinkedIn Tumblr WhatsApp Email

Efecto superposición con box-shadow en CSS3

Superposiciones de contenido son una parte importante del diseño web moderno. Ellos le ayudan a ocultar un elemento en una página web, y más tarde - con la aprobación del - revelarlo y muestra información ni controles adicionales, tales como botones detrás de él.

Efecto superposición con box-shadow en CSS3

Una superposición típica es semitransparente, con un color de fondo sólido (generalmente negro) y hay un poco de texto o botones en él para que los s ven o interactúan. Después de la interacción (clic o flotando) se produce, la superposición se retira y se revela el contenido debajo de ella.


En este Tutorial, vamos a echar un vistazo a cómo añadir transparencias de color a las imágenes mediante el uso de CSS puro. Puede ver el resultado final en la demostración a continuación. Asomar las imágenes que componen las superposiciones revelan el logo de pokemons. Aunque este Tutorial En Linea analiza las imágenes, la técnica se presenta se puede aplicar con seguridad a otros tipos de contenido (como bloques de texto), así.


Evitar la adición de elementos HTML extra

Las superposiciones con frecuencia creados por la posición del lado de un elemento HTML adicional con un opacity valor inferior a 1 justo encima del elemento a ser cubierto. El problema es que esta técnica implica el uso de un elemento adicional (o pseudo-elemento) para la superposición.


Si usted no es un tamaño HTML pedante, que tiene un elemento adicional para la superposición probablemente no es un gran problema, ya que lo más probable es que no va a gravar el ancho de banda de cualquier red que mucho. Sin embargo, tener distintas reglas de estilo para los elementos y sus superposiciones sigue perjudicando a la legibilidad del CSS y la mantenibilidad. 



Para mantener su código en orden y no echar a perder su contorno HTML para arriba, es una mejor opción de utilizar una solución CSS-solamente.


Crear superposición con box-shadow

Entonces, ¿cómo se puede realmente crear una superposición de sólo CSS? Con la ayuda de la propiedad de CSS box-shadow. La caja-sombra es perfecto para este trabajo ya que lo que es una superposición pero una sombra oscura sobre un elemento ?


La caja-sombra tiene un valor de propiedad llamada inset, lo que hace que aparezca una sombra hacia el interior del bastidor de la caja.


En un recuadro box-shadow con un tamaño medio de sombra o más de la mitad de la anchura y la altura del elemento, crea una sombra que cubre la totalidad de elemento

.box { width: 200px; height: 200px; box-shadow: green 0 0 0 100px inset; }

Efecto superposición con box-shadow en CSS3Otro Ejemplo

Efecto superposición con box-shadow en CSS3

CSS

html {      margin: 40px;     }     #simple p {      margin: 30px 40px;      width: 80px;      height: 30px;      border: 1px solid #999;      float: left;     }     #p1 {      -moz-box-shadow: 5px 3px black;      -webkit-box-shadow: 5px 3px black;      box-shadow: 5px 3px black;     }     #p2 {      -moz-box-shadow: 3px 3px 5px black;      -webkit-box-shadow: 3px 3px 5px black;      box-shadow: 3px 3px 5px black;     }     #p3 {      -moz-box-shadow: 0 0 5px 5px black;      -webkit-box-shadow: 0 0 5px 5px black;      box-shadow: 0 0 5px 5px black; }

HTML

<div id="simple">
         <p id="p1">
      <p id="p2">
      <p id="p3">
</div>
Desde superposiciones generalmente tienen algo de transparencia, es necesario añadirlo a la sombra de la caja también. Esto se puede hacer mediante el uso de rgba() función para color de la sombra.

La rgb porción de RGBA, representa, los valores de canal, de color verde y azul rojos, mientras que a representa el canal alfa, que es responsable de la transparencia. Para el canal alfa, un valor de 1 crea un color opaco, mientras que 0 crea un color de totalmente transparente.


Mediante la asignación de un valor entre 0 y 1 para el canal alfa del valor de color RGBA de la sombra, se puede crear una capa semitransparente.


Crear el código para la demostración

Efecto superposición con box-shadow en CSS3

Nuestra demostración mostrará las imágenes y los nombres de los diferentes pokemons. Aquí sólo a crear el código para Bulbasaur, el primer pokemon en la demo ya que los otros se hacen de la misma manera (en Codepen se puede extraer el código para ellos también).

HTML

Para el HTML, sólo tenemos que crear un cuadro al que vamos a añadir todo lo demás con CSS.

<div id="bulbasaur" class="pokemon"></div>

CSS

En el CSS a continuación, los elementos .pokemon de visualización de las imágenes de Pokémon, y loselementos de visualización de las imágenes de Pokémon, y los pseudo-elementos .pokemon::after llevan el nombre de los pokemon.


Dado que la propiedad  box-shadow puede tomar varios valores con el fin de procesar varios sombras, además de la sombra de superposición, también agregué otras sombras de gris para los elementos .pokemon y .pokemon::after para la estética.

.pokemon {
  width: 200px;
  height: 200px;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overlay */
  box-shadow: 0 0 0 100px inset, 0 0 5px grey;
  /* hover out transition */
  transition: box-shadow 1s;
  float: left;
  margin: 10px;
}

/* pokemone names */

.pokemon::after {
  width: 80%;
  height: 80%;
  display: block;
  white-space: pre;
  font: 15pt 'sigmar one';
  color: white;
  border: 2px solid;
  text-align: center;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* hover out transition */
  transition: opacity 1s .5s;
}

/* reveal pokemone picture on hover */

.pokemon:hover {
  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
  transition: box-shadow 1s;
}

/* hide pokemone name on hover */

.pokemon:hover::after {
  opacity: 0;
  transition: opacity .5s;
}

Cuando los elementos .pokemon se cierra, su box-shadow necesita cambiar para revelar la imagen detrás. Se puede ver que el selector .pokemon:hover ayuda a crear una nueva caja-sombra que elimina la superposición, y el selector .pokemon:hover::after oculta el nombre del pokemon mediante el uso de la propiedad opacity.


Es posible que también ha notado la ausencia de valores de color en la superposición de caja-sombras de los estilos .pokemon y .pokemon:hover. La superposición de color box-shadow de los pokemons individuales se tiene que especificar en sus propias reglas de estilo separadas, ya que son todos diferentes unos de otros.


Como no tiene ninguna escritura a mano la propiedad, no se puede establecer el color de sombra de forma individual, en vez - usamos la propiedad box-shadow box-shadow-color color.


Por defecto, cuando se le da un valor para la propiedad color, es que el valor aplicado a la frontera, el contorno y los colores de caja de sombra también. Por lo tanto, sólo tiene que utilizar la propiedad color para añadir color a la caja-sombra.

#bulbasaur {background-image: url(https://tutorialesenlinea.futbolgratis.org/s/posts/2019-03/1552149660_bulbasaur.webp);color: rgba(71, 121, 94, .9);}
#bulbasaur::after {content: 'Bulbasaur';}

El color de la sombra de superposición utiliza la mencionada función rgba() con 0,9 para el valor alfa para que la superposición transparente. Aparte del color de la superposición de caja de sombra, el CSS anterior también añade las reglas que son individuales para cada pokemon - la imagen como background-image y el nombre.


Y eso es todo, estamos listos con nuestro superposición de imágenes CSS solo color. Echar un vistazo a el código de todos los pokemons en la pluma a continuación. Ver resultado

Síguenos en
Google News Flipboard
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
herramientas para la generación de política de privacidad, entre otras...
Diseños Creativos De Tabla De Precios Para Su Inspiración
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: ¡Aprende los trucos de tutoriales online y cursos gratis con Tutoriales En Linea! Con manuales paso a paso para desarrollar tu conocimiento, Tutoriales En Linea te ayudará a mejorar tus habilidades y lograr tus metas.
Un tutorial está diseñado con pasos secuenciales que aumentan gradualmente el entendimiento. Por lo tanto, es importante que se sigan los pasos en su orden lógico para que el comprenda todos los elementos. Para optimizar los resultados, se recomienda seguir de forma profesional las instrucciones del tutorial.

Artículos Relacionados


Cómo deshabilitar el botón derecho Usando jQuery

Cómo deshabilitar el botón derecho Usando jQuery

herramientas para la generación de política de privacidad, entre otras...

herramientas para la generación de política de privacidad, entre otras...

10 etiquetas de plantillas de WordPress que quizás no conozcas

10 etiquetas de plantillas de WordPress que quizás no conozcas


Comentarios



Información
s que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Lista IPTV con canales para colombia

Mayo 23 43 791

Como instalar SS IPTV en una Smart Tv Samsung

Ene 22 10 380

Como podemos conseguir proxies

Jun 21 11 616

Historia de los sistemas operativos

Mayo 16 31 052

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2024

Por 17-06-24

Herramienta online de generador de datos estructurados

Por Tutoriales En Linea 17-06-24

Las 7 mejores páginas para descargar películas en .torrent en español

Por 26-09-24

Etiquetas

Hover




Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? ar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • ar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.