“Si no lo logras a la primera, llámalo versión 0.1″
Entradas etiquetadas con HTML
CSS: Cajas con sombra para todos los navegadores usando box-shadow + Shadow Filter
32 septiembre, 2011
por GeekRMX
en Desarrollo web
Vamos a ver cómo conseguir un interesante efecto de sombra usando solamente CSS. En el ejemplo aplicaremos la sombra a un div, pero este efecto se puede usar prácticamente con cualquier elemento HTML, como imágenes, tablas, formularios, etc.
Aunque para las versiones actuales de todos los navegadores solo sería necesario usar la propiedad estándar “box-shadow“, para lograr la compatibilidad con todos los navegadores y sus versiones, vamos a utilizar 5 propiedades distintas.
Las dos primeras son necesarias para versiones anteriores de Mozilla Firefox y de navegadores basados en WebKit, como Safari y Google Chrome. La tercera propiedad es la estándar de CSS 3, válida para Opera y para todos los navegadores actuales. Las dos últimas son filtros específicos de Microsoft (Shadow Filter) y son necesarias para antiguas versiones de Internet Explorer.
Tablas de compatibilidad de navegadores con HTML5, CSS3, SVG…
922 marzo, 2010
Hace unos días hemos visto cómo usar la propiedad text-shadow y hablábamos de su compatibilidad con los navegadores actuales.
Ahora os traigo una interesante página en la que podremos consultar la compatibilidad de los principales navegadores con muchas de las características de HTML5, CSS3, SVG y otras tecnologías web que están por llegar.
El proyecto se llama “When can I use…” y podemos encontrarlo dentro de un blog llamado Fyrdility, cuyo autor es Alexis Deveria.
Esta herramienta puede resultar especialmente útil para los que nos dedicamos habitualmente a esto del diseño web. En muchas ocasiones necesitas usar una determinada propiedad o característica en el código de tu página web, pero no sabes cómo se verá en otros navegadores, y tampoco puedes estar comprobándolo siempre en cada uno de ellos.
Vía: Ceslava, Criterion & [Q]interactiva
CSS: Texto con sombra usando text-shadow + Shadow Filter
719 marzo, 2010
por GeekRMX
en Desarrollo web
Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.
La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.
Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.
Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:
.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}
Cómo procesar archivos HTML como archivos PHP
411 marzo, 2010
Hay muchas razones para querer procesar archivos HTML como archivos PHP. Algunos webmasters lo hacen porque están convirtiendo un antiguo sitio estático a un sitio web dinámico y no quieren perder pagerank. Otras webs lo hacen porque los motores de búsqueda parecen favorecer a las páginas que tienen extensión .html sobre las que tienen extensión .php. O quizás lo estás haciendo por razones de seguridad… No quieres que los visitantes sepan qué lenguaje de script usas para tu sitio web.
Por suerte, la interpretación de archivos HTML como PHP se consigue fácilmente mediante el uso de un archivo htaccess.
Crear un archivo htaccess
Si no sabes nada sobre archivos htaccess, no te preocupes. Los archivos htaccess son simples archivos de texto que se guardan con extensión .htaccess. Y se crean fácilmente con un editor de texto simple como el Bloc de notas o WordPad. Sólo habrá que escribir o pegar el código necesario, guardar el archivo como .htaccess y subirlo al servidor, en la raíz de nuestro sitio web.
