CSS al servicio de la comunidad

26 07 2005

Arruinarle a alguien el final de una pelí­cula o libro es un acto de crueldad pura. Para evitar actos involuntarios de maldad, he intentado en lo posible evitar mencionar puntos claves de las tramas en lo que escribo. Sin embargo, en ocasiones son precisamente estos puntos claves los que han dejado huella en mi. Por este motivo, me he puesto a investigar alternativas para poder escribir sin preocuparme por echarle a perder la historia a nadie. Los spoilers, secciones reveladoras con detalles de la trama que podrí­an arruinar la experiencia a alguien que no ha visto la pelí­cula o leí­do el libro, serán denotados en este espacio mediante un recuadro con lí­neas punteadas, así­:

Spoiler:

“Luke, ¡soy tu padre!”

Pasen el mouse por encima del recuadro, y observen a CSS operar su magia. Si utilizan Internet Explorer, tendrán que seleccionar el texto dentro del recuadro para poder verlo. Para los interesados en los detalles técnicos, el código que utilicé está basado en: Get Your Geek On No soy experta en diseño Web (de hecho soy más bien inútil) sin embargo, descubrí­ los siguientes detallitos al intentar utilizar CSS para lograr efectos al pasar el mouse por encima de un elemento, utilizando la pseudo-clase hover: 1) Internet Explorer sólo permite usar el hover en links (a:hover). Hay alternativas para lograr este efecto con Internet Explorer, pero involucra el uso de javascript, o el uso de un archivo htc en el servidor, al cual no tengo acceso. Por esto el método tan artesanal para revelar el texto oculto. 2) Firefox maneja un poco mejor la pseudo-clase hover, sin embargo, no la puede utilizar dentro de clases. La puede utilizar dentro de divs, así­ que modifiqué el código de .spoiler a div.spoiler y asunto arreglado. 3) Opera maneja los hovers en cualquier elemento sin problemas.

Actualización: Mi nuevo host no soporta modificaciones en el CSS, o mejor dicho, requiere de una módica cantidad de por medio. Intenté utilizar estilos dentro del texto, dentro de etiquetas “div” y “p” pero son ignorados olí­mpicamente (incluso, el contenido de las mismas es borrado cuando guardo lo que acabo de escribir), así­ que por el momento mi único recurso es señalar con gran alharaca que estoy añadiendo contenido demasiado revelador. Blah.


Acciones

Information

3 responses

8 08 2005
dvorak

Jajajajaja, ese ejemplo esta cool, muy buena idea has tenido para solucionar esto, y claro es interesantes lass diferencias que mencionas entre los navegadores; realmente creo no me hubiera dado cuenta de eso
Salu2
( ^o^)_V

15 08 2005
irian

En si la idea no fue mia, aunque si tuve que adaptar el código que encontré para que se ajustara a lo que yo quería y que funcionara con más navegadores. Me sacó canas verdes solucionar esto, especialmente porque no fue hasta probarlo con todos los browsers que identifiqué el problema.

16 08 2005
dvorak

🙂
De todas formas es una buena observación la que haces.

see you & read you

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: