elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como simular opacacidad de inspección con CSS3?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como simular opacacidad de inspección con CSS3?  (Leído 3,483 veces)
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Como simular opacacidad de inspección con CSS3?
« en: 28 Febrero 2012, 14:19 pm »

Hola, estaba creando un sitio WEB y me gustaría crear algo muy similar a lo que hace firefox 10 al momento de inspeccionar un código, o sea que se oscuresca toda la web menos ciertas divisiones.

Quise hacerlo con css y opacacity:
Código
  1. html{ opacacity: 0.5; }
  2. .marked{ opacacity: 1 !important; border: 1px dashed red; }
Pero no resulta ya que en ves de aclararse la división se pone de color blanco simplemente.

También intenté crear el efecto atraves de imágenes png semi transparentes pero fue lo mismo, no puedo clarar algo que está por debajo de png.

Igual podría usar 4 divisiones que bordeen la división clara con transparencias, pero que sucedería si tengo 100 divisiones que aclarar?

Alguien tiene alguna idea de como poder hacer esto?


Quiero hacer esto mismo pero con css. Será posible?


En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: Como simular opacacidad de inspección con CSS3?
« Respuesta #1 en: 28 Febrero 2012, 14:53 pm »

Hasta ahora lo solucioné en parte pero no de la mejor forma.

Puse una división con estilo position: fixed width y height al 100%, top y left a 0px y background-color: black con opacity: 0.7;
Lo extraño fue que toda la web se puso oscura menos las divisiones con position relative, aunque de todas formas comenzé a jugar con los z-index, le puse 1 a la división oscura y 2 a las que quiero mostrar, pero igual la tube que poner antes de todas las divisiones que quiero mostrar, el problema es que no se aplicarán para las divisiones que están antes y si la pongo antes la oculta las texturas.

En pocas palabras funciona pero si quiero modificar algo o hacer aparecer otra división en otro lado estoy jodido.

Habrá otra opción mejor?


En línea

raul338


Desconectado Desconectado

Mensajes: 2.633


La sonrisa es la mejor forma de afrontar las cosas


Ver Perfil WWW
Re: Como simular opacacidad de inspección con CSS3?
« Respuesta #2 en: 28 Febrero 2012, 22:42 pm »

Vos queres hacer algo al mas estilo Turn Off The Lights?

Se me ocurre con un div que ocupe toda la ventana, y a lo que quieras resaltar, duplicarlo o sacarlo y hacerlo hijo del div con posicion absoluta/relativa, aunque claro, ni idea de como hacerlo :P
En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Como simular opacacidad de inspección con CSS3?
« Respuesta #3 en: 28 Febrero 2012, 22:51 pm »

A puro css ni idea, es de usarse jquery( por ejemplo )
En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: Como simular opacacidad de inspección con CSS3?
« Respuesta #4 en: 29 Febrero 2012, 12:52 pm »

Gracias, lo de raul es una extensión para exploradores, no es algo que puedas hacer a puro css/html/javascript

Lo de EFEX es lo mismo que hize yo, poner una división del porte de la página y lo que se ve claro es un div con position relative con un z-index elevado, de hecho no es necesario poner el z-index y en ves de absolute deberia tener un fixed en caso de que html{} tenga margenes o padding.

El problema de eso es que tengo otras divisiones que ya tienen position relative con z-index modificado y si quiero hacerlos aparecer tendría que modificar el z-index de esa división y se jodería.

Bueno ahi veo que hago, gracias de todas formas.
En línea

raul338


Desconectado Desconectado

Mensajes: 2.633


La sonrisa es la mejor forma de afrontar las cosas


Ver Perfil WWW
Re: Como simular opacacidad de inspección con CSS3?
« Respuesta #5 en: 29 Febrero 2012, 17:22 pm »

Asi es WHK, pero lo que hace esa extension usar parte de javascript/html/css para actuar, deberias ver eso (aunque no se ni donde :xD)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como Simular la Pulsacion de las teclas « 1 2 »
Programación Visual Basic
HALC12 11 6,124 Último mensaje 2 Diciembre 2007, 17:39 pm
por HALC12
como simular el efecto de espejo en vb
Programación Visual Basic
CICOLO_111234 3 4,819 Último mensaje 29 Enero 2009, 09:06 am
por BlackZeroX
Inspección Profunda de Paquetes, el futuro de la publicidad
Noticias
Silici0 2 2,038 Último mensaje 28 Noviembre 2010, 22:14 pm
por Draklit
Inspeccion de paquetes/limitacion de tráfico del ISP
Redes
chillinfart 3 3,612 Último mensaje 23 Octubre 2011, 16:13 pm
por lobo79
Prevenir el uso de las consolas de inspección
Desarrollo Web
WHK 0 1,511 Último mensaje 19 Julio 2013, 15:44 pm
por WHK
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines