Generador de cajas con bordes redondeados

RoundedCornr es otro generador online de código HML/CSS e imágenes que permite construir cajas con bordes curvos o redondeados, muy utilizados últimamente. Basta con insertar el grado de angulación que tendrá la esquina (Corner radius in pixels), el color de fondo donde estará ubicada la caja (Background color), el color de la misma (Box color) y hacer clic en “Create”. Nos generará un código HTML con un texto ejemplo, que deberás reemplazar por el que quieras, un código CSS que deberás introducir en tu hoja de estilos y las 4 imágenes que debes descargar y colocar en la mismo directorio de la página html.

Importante: Si colocás las imágenes en un directorio distinto de donde se encuentra la página html, deberás actualizar dichas localizaciones en el código css generado.

Si observamos un poco más abajo en la página del generador verán que también nos brinda la posibilidad de crear boxes con fondo degradado, con bordes y también de generar sólo una imagen GIF con los bordes (ya sea curvos o cuadrados), los colores de fondo, texto y otras opciones a nuestra elección, ideal para hacer pestañas, botones, imágenes de fondo sólido/degradado, etc. ¿Algo más?.

Ejemplos realizados por mí (Básico/Con degradado/Con borde/Imagen sola).

Crear bordes redondeados con css

Bordes curvos con css html

Generador de cajas y box con bordes redondeados

Generador css bordes redondeados

Vía: Digg.

Edición online de sitios web en tiempo real

editor html css online

CSSFly es una herramienta online y gratuita que te permite editar sitios fácilmente y en tiempo real desde tu navegador. Puedes editar tanto el código HTML como las hojas de estilo externas asociadas al sitio. Lo que escribes en el código es lo que se muestra en la página. Las modificaciones que realices no se pueden guardar por razones obvias, sino modificaríamos los sitios de otras personas a nuestro antojo, pero de todas formas puedes copiar y guardar el código que hayas creado o modificado.

No me parece apropiada para desarrollar sitios desde 0 pero sí para realizar pruebas y modificaciones de poca magnitud en nuestras páginas ya construidas, o para curiosear el código fuente de otros sitios reemplazando a la función “Ver código fuente” de los navagadores por una un poco más sofisticada.

Nota: Puedes usar la barra de marcadores para editar rápidamente el sitio que estas visitando. Para esto debes arrastrar el siguiente enlace a tu barra de marcadores: CssFly.

Vía: Digg.

Gran listado de tutoriales y recursos sobre CSS

La Universidad de Minnesota ha colocado en su sitio web una extensa lista con tutoriales y recursos sobre CSS que abarcan distintos temas.

A pesar de que la mayoría de los mismos se encuentran en inglés, creo que aún siguen siendo un buen aporte tanto para aquellos que están iniciandose en el uso de hojas de estilo como para los entendidos en el tema. Los tutoriales tratan tópicos como:

  • Buenas costumbres al escribir código CSS.
  • Maquetación.
  • Viñetas.
  • Botones.
  • Fuentes tipográficas.
  • Formularios y tablas.
  • Imágenes y reemplazo de imágenes.
  • Esquinas y bordes redondeados.
  • Footer (Pie de página).
  • Floats.
  • Compatibilidad con navegadores .
  • Depuración, organización y mantenimiento del código.

Además puedes consultar listas de tutoriales y recursos sobre otros temas como Herramientas para el diseño web, JavaScript, PHP, Accesibilidad, Flash, DreamWeaver, Colores, Usabilidad, XML, Tipografía, etc

Vía: anieto2k

Convertir simples listas en complejos menús con CSS

Menús en css para descargar

Para los que aún no lo conozcan Listamatic es un excelente sitio que muestra, a través de sus ejemplos, cómo crear diferentes estilos de menús con CSS partiendo de una simple lista:

Además puedes visitar este tutorial (en inglés pero muy didáctico), del mismo sitio, donde enseñan de una forma extremadamente práctica cómo crear:

  • Menús con imágenes de fondo como viñetas.
  • Efecto rollover.
  • Menús anidados.
  • Menús horizontales.

pestañas menu css

Otra opción muy buena es CSS Library con menús verticales y horizontales (tipo pestañas) con uso de imágenes con degradado.

Gran colección de plantillas web gratuitas de alta calidad

plantillas web gratis

En smashingmagazine publicaron una excelente recopilación de sitios con galerías de plantillas web (templates) de alta calidad gratuitas para descargar y usar en tu sitio. Puedes descargar plantillas basadas en css o en flash, con interfaces gráficas realizadas en fireworks o photoshop. Cada sitio posee una breve descripción del tipo de plantillas que ofrece y la lista también incluye sitios con plantillas para blogs y específicamente para sistemas de gestión de contenidos como wordpress y servicios como Blogger.

Machetes de Html, Css, JavaScript y php para tener siempre a mano

Referencias rápidas

En Cheat Sheets puedes encontrar machetes de html, css, JavaScript y php, entre otros, en formato PNG y PDF diseñados para ser impresos en una sola hoja y llevarlos contigo a modo de referencia rápida sobre el lenjuaje o tema en cuestión.

Puedes acceder directamente a los cheat sheets desde los enlaces a continuación y elegir el formato para guardarlo, imagen PNG o documento PDF:

Cheat Sheet de Html

Cheat Sheet de Css

Cheat Sheet de JavaScript

Cheet Sheet de caracteres Html y sus equivalencias

Cheet Sheet de PHP

Otros:

Cheat Sheet de Expresiones regulares
Cheat Sheet de Microformatos
Cheat Sheet de Tabla de colores Hex
Cheat Sheet de Asp
Cheet Sheet de MySQL
Cheet Shett de mod_rewrite

Vía: Menéame

Técnicas basadas en css para elevar al máximo el diseño de tu web

Técnicas y trucos basados en css

En Smashing Magazine han publicado una excelente colección denominada 53 CSS-Techniques You Couldn’t Live Without. Constituye un repositorio de técnicas basadas puramente en CSS, aunque sólo en algunas también incorpora algo de JavaScript.
A continuación voy a nombrar algunas de las técnicas citadas, pero para conocer la lista completa (53 técnicas) y los enlaces correspondientes deberán visitar la fuente original.

  • Navegación basada en css.
  • Pestañas en css.
  • Gráficos de barra en css.
  • Tablas colapsables.
  • Método de personalización de los radioboxes y checkboxes.
  • Reemplazo de imágenes.
  • Sombras en css.
  • Esquinas redondeadas con css.
  • Letras capitales.
  • Definir la opacidad de una imagen con css.
  • Diagramas con css.
  • Curvas con css.
  • Mapas de imagen.
  • Precarga de imágenes con css.
  • Técnicas css en formularios y tablas.
  • Páginas de impresión con css.
  • Trucos para personalizar las viñetas.
  • Técnica de Zoom en css.
  • Tablas al estilo zebra con JavaScript y css.
  • Formateo de pie de notas con css.

Vía: Menéame

Plantillas Css

Logo Template Css

Creo que la mejor forma de aprender a maquetar con Css es explorar hasta el último detalle el código fuente de estos diseños ya fabricados para aprender y realizar luego nuestros propios diseños.

Si conoces otro sitio con plantillas, por favor, no dudes en postearlo en los comentarios.

Menús de navegación realizados con css para descargar

Menu de navegación CSS

La gente de exploding-boy ha diseñado 3 galerías de menús de navegación CSS muy bien trabajados, y lo mejor es que están disponibles para descargar en forma gratuita para uso comercial y personal.

Las dos primeras son galerías de menús horizontales y la última de verticales. Espero les sea de utilidad.

Menús horizontales tipo Tabs (pestañas):

Galería 1

Demostración: Set Menús CSS horizontal 1
Descargar: Set Menús CSS horizontal 1

Galería 2

Demostración: Set Menús CSS horizontal 2
Descargar: Set Menús CSS horizontal 2

Menús verticales:

Galería 3

Demostración: Set Menús CSS vertical
Descargar: Set Menús CSS vertical

Vía: MateriaGris

CSS Formatter and Optimiser: Optimizar hojas de estilo

CSS Formatter and Optimiser es otra herramienta online al estilo de Online CSS Optimizer para optimizar y reducir el peso de nuestras hojas de estilo CSS.
Es más sofisticada que la primera, destacandose una importante función que nos permite seleccionar el grado de compresión de la hoja de estilo sacrificando la capacidad de lectura de la misma una vez optimizada (A mayor compresión, más ilegible el código resultante).

Cerrar
Enviar por Correo