Generalmente vivimos muy bien sin dar sombra a nuestros textos, a la espera de que más navegadores acepten la propiedad text-shadow de CSS 3, no obstante muchas veces nos resultaría realmente útil poder usarla con resultados uniformes en todos los navegadores.
Hasta ahora teníamos tres aproximaciones al tema, que cuando funcionaban en un navegador fallaban en otro e incluso haciendo uso de una combinación de las tres los resultados eran muy diferentes en los diversos navegadores:
text-shadow de CSS 3, de momento :before antes del texto para duplicarlo y simular una sombra, cosa que no funcionaría en MSIEScott Jehl nos ofrece un script en Javascript, no obstrusivo, que nos permite de forma sencilla conseguir este efecto de forma homogénea en todos los navegadores que tengan soporte para Javascript.
Para utilizarlo simplemente se carga el script
<link href="css/dropShadows.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/dropShadows.js"></script>
y se añade la clase highContrast (recuerda, respeta las mayúsculas y las minúsculas)
<h2 class="highContrast">Here's an example</h2>La apariencia de la sombra puede editarse en el archivo dropshadow.css
Descarga Javascript:
http://www.scottjehl.com/jsDropShadows/scripts/dropShadows.js
Descarga CSS:
http://www.scottjehl.com/jsDropShadows/css/dropShadows.css
En el blog de Scott tenéis más información sobre el funcionamiento del script.
Hace ya algo os había comentado la existencia de HTML Slidy, un sistema bastante simple para generar presentaciones tipo Power Point con XHTML, CSS y Javascript que se pueden reproducir en cualquier navegador.
S5 es un sistema similar, creado por Eric Meyer, que cuenta con bastante más documentación y ayuda que HTML Slidy, además de existir varios themes para escoger, más cómodo imposible.
El universo está lleno de preciosos tipos de letra, lamentablemente el uso de tipografías personalizadas en la web está francamente limitado. No existe un método fiable de garantizar que el usuario ve la tipografía que queremos que vea ya que estamos supeditados a las fuentes que tenga instaladas en su sistema.
Durante muchos años, los diversos navegadores han ido haciendo experimentos con tipografías descargables y artimañas similares pero su implementación es irregular y se hace desaconsejable.
Cuando lo que queremos es utilizar fuentes personalizadas para pequeños detalles en el sitio es francamente simple hacer un reemplazo con imágenes pero, ¿qué pasa cuando necesitamos reemplazar, por ejemplo, los títulos de las entradas de una bitácora? ¿Crearemos uno por uno todos los títulos como imágenes y haremos un reemplazo manual?
sIFR nos sale al rescate para esos momentos, ofreciéndonos una forma dinámica de conseguir encabezados con algo más de estilo.
(más…)
Existen unas cuantas ocasiones en las que podemos tener que cambiar el archivo php.ini pero, para todos los que alojamos nuestras páginas en servidores compartidos, suele ser imposible acceder directamente a este archivo.
De todas formas, podemos modificar el comportamiento y las funciones de PHP por medio de un archivo .htaccess en el directorio raíz del sitio. Por ejemplo, incluyendo en él
php_flag magic_quotes_gpc off
php_flag register_globals offArticulo completo en inglés en 999 Tutorials
Una de las “novedosas novedades” del Internet Explorer 7 es el soporte a la transparencia de los PNG, ¡por fin! No obstante, seguro que aún nos quedan algunos años de versiones anteriores que no tragan bien con las transparencias.
Para solucionar este “pequeño” inconveniente existen algunos trucos, unos sirven para unos casos , otros para otros.
(más…)
Los tooltips son esos mensajes emergentes que surgen para añadir más información, generalmente, a un enlace o una imagen. Los tooltips en html suelen generarse por medio del atributo “title” y, en el caso de las imágenes, erroneamente, con el atributo “alt” que, a pesar de presentarse como un tooltip en muchos navegadores, es un reemplazo de texto para las mismas. Para más información podéis ojear The Alt and Title Attributes en 456 Berea Street y la referencia al atributo alt en las faq para desarrolladores de Mozilla.
La falta de consistencia en la representación de estos mensajes por parte de los navegadores provoca usos incorrectos que, si bien pueden servirnos en algunos casos, producen un empeoramiento de la funcionalidad para usuarios no-visuales.
Además, en ocasiones puede resultarnos útil añadir este tipo de mensajes emergentes a elementos que no sean enlaces o imágenes, incluso puede que necesitemos que esta información aparezca en pantalla asociada a gestos diferentes del de pasar el ratón por encima o, incluso, con un estilo definido por nosotros mismos.
Para todos estos usos, puede solucionarnos la papeleta el uso de un poco de Javascript. He estado mirando un poco y he encontrado unos cuantos scripts.
(más…)
Supongo que todos sabemos lo difícil que puede resultar conseguir que nuestras páginas se vean bien en todos los navegadores, en múltiples ocasiones nos vemos forzados a usar fragmentos de código propietario, que rompen con la validación, para conseguir efectos sencillos en determinados navegadores (no miro para ninguno…).
Por suerte, tenemos a nuestra disposición diversos mecanismos para facilitarnos, en la medida de lo posible, la labor de obtener páginas compatibles con todos los navegadores y que validen contra los estándares web.
(más…)
El otro día hablabamos de Snipplr, en la misma línea están Koders y Code Snippets:
Enlace: http://www.koders.com
Enlace: http://www.bigbold.com/snippets/
Seguro que tienes algun papelillo o documento con las entidades (x)HTML que más utilizas, incluso puede que algunas las hayas memorizado pero seguro que le sacas partido a una referencia rápida, visualmente agradable y excelentemente organizada.
XHTML Character Entity Reference por Jim Rutherford autor de Digital Media Minute
Me encanta el efecto que se consigue usando Lightbox, ya sabéis al dar click en una imágen se oscurece toda la página y surge la imagen ampliada en primer plano…
Queda realmente bien pero el script es un poquito grande y pesa bastante.
Si a ti también te parece que pesa demasiado quizá quieras probar Litebox, se trata de una versión adelgazada de Lightbox, con el mismo resultado en mucho menos peso. ¿Y cómo se obra el milagro? Simple, en lugar de utilizar la libreria Script.aculo.us se utiliza la infinitamente más ligera moo.fx y en lugar de usar la version completa de Prototype se utiliza la versión lite.
Enlaces:
Litebox
Lightbox
Script.aculo.us
Prototype
Moo.fx
Via Download Squad
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios