Siempre que tenemos que desarrollar un newsletter para enviar por correo, se nos presenta el problema de compatibilidad entre los diferentes clientes de email.
Por esta razón me puse a investigar un poco acerca de este tema y me tope con esta pagina que armo una tabla de muy interesante que nos destaca que propiedades CSS soporta cada uno de los clientes de correo.
Lo mejor de todo esto es que la tabla tiene razón, ya que probé algunas de las propiedades en gmail, yahoo y Hotmail y pasa exactamente lo que indica esta. Si queremos tener estos datos en nuestra pc el sitio nos ofrece la oportunidad de descargar el contenido en formato .pdf (Adobe Reader) o .xls (Excel).
Otra vez la gente de Smashing Magazine nos sorprende, esta vez con una recopilación de 50 herramientas para todos los desarrolladores CSS.
En esta recopilación vamos a ver herramientas para el trabajo online de CSS, el uso de tipografÃas diferentes a las del sistema, extensiones para los navegadores para facilitar el desarrollo de nuestras aplicaciones.
——
——
Lightbox es un script desarrollado con javascript que nos permite abrir ventanas emergentes con más estilo que las habituales popup. Como esta librerÃa existen muchÃsimas mas, como por ejemplo la lightview.
Bueno pero este no es el punto principal, vÃa unijimpe me encuentro con la posibilidad de nosotros poder "desarrollar" nuestra propia lightbox. Porque por medio de css más un simple mostrar y ocultar divs podemos hacer el efecto para que se abra una ventana emergente. Obviamente este código no cuenta con algunos efectos que tienen la ya nombrar lightbox, pero nos puede servir para nosotros darle el estilo que queramos a la popup que se abra.
-----------
Ahora vamos a ver el código para generar nuestra lightbox:
-----------
1 - Creamos un nuevo documento html, e insertamos estas divs.
-----------
2 - Esta paso es uno si no el mas importante de todos, vamos aplicar el estilo css a las divs que creamos en el paso anterior.
-
.fadebox {
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%;
-
height: 100%;
-
background-color: black;
-
z-index:1001;
-
-moz-opacity: 0.8;
-
opacity:.80;
-
filter: alpha(opacity=80);
-
}
-
.overbox {
-
display: none;
-
position: absolute;
-
top: 25%;
-
left: 25%;
-
width: 50%;
-
height: 50%;
-
z-index:1002;
-
overflow: auto;
-
}
Solucija es un sitio que nos ofrece un interesante coleccion de templates css gratuitos. Tambien nos permite poder visualizar una preview del template que nos gusto, para poder navegarlo y recien depues aceptar si lo queremos descargar.
Enlace \ Solucija - Temapltes Css Gratuitos
Css Brower Selector es un archivo javascript que lo podemos utilizar como una especie de Hack que podemos utilizar cuando tenemos que maquetar un sitio con divs y queremos que el mismo se pueda ver en todos los navegadores igual. Como es esto?, muy simple solamente tenemos que incluir el archivo js en nuestro header y en nuestro archivo .css antes de definir un estilo tenemos que color para que navegador va a ser ese estilo de la siguiente manera:
-
.ie7 .example {
-
background-color: orange
-
}
-
.gecko .example {
-
background-color: gray
-
}
Bueno en el sitio del creador podemos ver un ejemplo online. De como con poco CSS varia el color de una caja según el navegador que estemos utilizando.
Esto les va a servir mucho cuando tengan que resaltar algo en sus sitios, como por ejemplo que te tienes que registrar para ver una seccion, o tambien cuando estas programando y haces un formulario de cargar de archivos, para que esto sirva como caja de texto para indicar que el archivo a sido cargado.
Pero la verdad sirve para mucho tener a mano estos pequeños estilos en css, ya que son muy utiles y tienen un muy buen aspecto visual. Bueno aqui les voy a dejar 2 ejemplos para utilizar pero se pueden crear muchisimos mas con diferentes colores e iconos, depende para que los necesites.
1º Ejemplo:
-
.nuevo {
-
background:#c7eca8 url('nuevo.gif') no-repeat;
-
background-position:10px;
-
padding:2px 0px 2px 40px;
-
border-top:1px solid #7cc042;
-
border-bottom:1px solid #7cc042;
-
width:400px;
-
}
-
.nuevo a{
-
font-family:Trebuchet MS;
-
font-size:12px;
-
}
2º Ejemplo:
-
.error {
-
background:#f2bdbd url('error.gif') no-repeat;
-
background-position:10px;
-
padding:2px 0px 2px 40px;
-
border-top:1px solid #ea3d3d;
-
border-bottom:1px solid #ea3d3d;
-
width:400px;
-
}
-
.error a{
-
font-family:Trebuchet MS;
-
font-size:12px;
-
}
Espero que les guste y obviamente les sirva. Pueden descargar los archivos desde aca. Saludos!
css import, es una galeria que nos ofrece una recopilacion de sitios obviamente hechos con css. La idea del sitios es brindar ideas a la hora de desarrollar nuestros propios sitios, hechos bajo css y xhtml.
enlace \ CSSImport
Si estas con pocas ideas, o no tienes muchas ganas de pensar, date una vuelta por Submit Css que es un recopilacion de sitios diseñados con css para que te puedas inspirar y en una de esas te pones a desarrollar algun proyecto nuevo.
enlace \ SubmitCss
CSS Basics.com nos ofrece un listado de hasta ahora 19 capitulos con los mejores contenidos para poder aprender a utilizar css de una manera sencilla y muy util. El unico problema es que el sitio se encuentra en ingles, pero utilizando algun traductor, no es muy dificil de entender ya que cada capitulo tiene ejemplos muy simples.
Enlace \ CSSBasics.com
Traductor \ Google Traductor
Navegando por Stumble, me tope con free-css-templates que es un sitio como su nombre lo dice templates css gratis. la verdad q la mayoria estan muy buenos seguramente hay algunos q no, pero la mayori si :D...
enlace a Free Css Templates
- Ajax (6)
- Aplicaciones web (2)
- Color (3)
- Comunicacion (1)
- Css (10)
- Firefox (3)
- Geek (1)
- Google (1)
- Herramientas2.0 (14)
- Hosting (1)
- Humor Geek (9)
- Iconos (22)
- iPhone (1)
- JavaScript (5)
- Libros (1)
- Linux (2)
- Musica (1)
- Navegadores (3)
- Noticias (2)
- Open Source (1)
- Photoshop (17)
- PHP (1)
- Programacion (3)
- Recursos web (15)
- SEO (1)
- Series TV (2)
- Sin categorÃa (2)
- Software (2)
- Tecnologia (1)
- Wallpapers (1)
- Web 2.0 (10)
- wGeek (4)
- Wordpress (5)
- Youtube (1)