Seguimos presentando páginas web que permiten para sacar partido a las nuevas características de CSS3. Ahora es el turno de CSS3 Generator, una aplicación que permite generar código CSS3 y probar en vivo los resultados.

Actualmente tenemos disponibles 10 efectos: bordes redondeados, sombras en cajas o textos, color RGBA, fuentes externas, columnas múltiples, cambio de tamaño y alineación de cajas, borde exterior y selectores. Cuando elijamos una de las propiedades, podremos cambiar los valores y generar el código fuente necesario. Cada cambio que hagamos se verá reflejado en el “Preview Area” sin necesidad de recargar la pantalla.

Otras utilidades relacionadas: CSS3 Please y CSS Border Radius.

Fuente | Kabytes

CSS3 Please nos permite modificar una hoja de estilo con varias instrucciones CSS3, y visualizar los cambios sin necesidad de recargar página.

En la parte derecha de la pantalla tenemos una caja con varios efectos aplicados: bordes redondeados, sombra, rotación, fondo con gradiente, tipografías no estándard… La hoja de estilo es editable, así que podemos cambiar los valores numéricos y hexadecimales, para ver los cambios reflejados en el acto. También podemos comentar bloques de código pulsando: “toggle rule off“. Cabe destacar que cada efecto es compatible con todos los navegadores, incluyendo Internet Explorer 6, 7 y 8.

Una gran página para los diseñadores de páginas web que estén interesados en las nuevas características de CSS. Además su autor comenta a pie de página, que irá añadiendo más efectos en breve.

Fuente | Paul Irish

CSS Border Radius es una sencilla aplicación web que nos permite crear cajas con esquinas redondeadas, sin necesidad de utilizar gráficos.

Podemos definir el radio de los 4 bordes de la caja de ejemplo de forma independiente, introduciendo un valor. Los bordes irán cambiando en tiempo real, para que nos hagamos una idea del resultado final. En la parte central aparece el código fuente que debemos pegar en nuestra hoja de estilo y que por defecto es compatible con CSS3, Webkit y Gecko (aunque podemos desmarcar cualquiera de las 3 casillas).

Fuente | Visual Beta

CSS Sprites es una técnica que permite ahorrar el número de peticiones HTTP y reducir el consumo del servidor, agrupando todas las imágenes de una página web en un solo gráfico, y mostrándolas en pantalla mediante código CSS.

CSS-Sprit.es nos permite realizar este proceso de forma muy sencilla. Podemos subir varias imágenes, unificarlas y generar automáticamente el código CSS y HTML necesario para mostrarlas de forma individual en pantalla. Además dispone de una opción llamada “Hover Image Processing” que nos permite crear un efecto en la imagen (desaturar, invertir, sepia…), que se mostrará al situarnos con el ratón encima.

Google también hace uso de los CSS Sprites. Si realizamos una búsqueda, nos ponemos encima del logotipo y seleccionamos “Ver imagen” aparecerá algo como esto:

Fuente | Chica Blogger

CSS Color Editor es una herramienta que permite fácilmente reemplazar los colores de una web, sin necesidad de editar a mano el archivo CSS.

Una vez hayamos enviado nuestro CSS al servidor, se mostrarán todos los colores usados y su correspondiente hexadecimal. Pulsando en la paleta podremos ir eligiendo los nuevos colores, tanto de forma visual como introduciendo los valores hexadecimales, RGB o CMYK. Cuando ya estén listos los reemplazos, pulsando el botón “Generate new CSS code” generaremos la nueva hoja de estilo con los colores cambiados.

Ya solo nos queda reemplazar el CSS y comprobar la nueva apariencia de nuestra web.

Fuente | Wwwhat’s new

Hace unos días os mostramos un generador de esquinas redondeadas llamado Rounded Cornr, este que os mostramos hoy: Rounded Corner Generator, viene con la novedad de funcionar además en Opera, gracias a la inclusión de código SVG. (aunque con Internet Explorer no funciona).

Podemos modificar el radio de todas las esquinas a la vez o hacerlo por separado, cambiar el color de fondo de la caja, y el ancho / color del borde. Sin necesidad de pulsar ningún botón, a la derecha se irán generando 3 códigos fuente, asociados a nuestras preferencias: CSS, SVG y CSS con SVG, que podremos implementar en nuestra página web.

Más información sobre esta técnica en el blog del autor.

Fuente | ixenia

RoundedCorn es un recurso que les permitirá a los diseñadores de páginas web, crear cajas con esquinas redondeadas de forma sencilla.

Hay 4 modelos disponibles:

• “Basic RoundedCornr“: caja básica con esquinas redondeadas.
• “RoundedCornr with Gradient“: caja con esquinas redondeadas y un color gradiente.
• “RoundedCornr with Border“: caja con esquinas redondeadas y bordes.
• “Single RoundedCornr Image“: caja con un sólo archivo GIF, que incluye esquinas redondeadas, bordes, color gradiente y el texto que especifiquemos (puede servir para hacer botones).

Cuando generemos una caja, se mostrará el código HTML, el CSS y los gráficos necesarios. Solamente tendremos que guardarlo en nuestro ordenador, enlazar el CSS y ejecutar el archivo HTML.

Fuente | Pixelco

En Internet hay muchas galerías destinadas a mostrar diseños de calidad maquetados con CSS: CSS Beauty, CSS Mania, CSS Elite… la que presentamos a continuación: CSS iPhone sigue en la misma línea, pero selecciona únicamente las páginas webs creadas para el teléfono iPhone (aunque en realidad son aptas para cualquier dispositivo portátil).

La web cuenta con una serie de mini capturas de las páginas, que podemos pulsar para visitar el sitio original, pulsando en el nombre de la web iremos a la ficha de CSS iPhone que tiene la captura a tamaño real y algo más de información. Si queremos colaborar enviando nuestra web, lo podemos hacer desde el menú superior, opción: “suggest your site“.

Fuente | FeedMyApp

Hay muchas páginas para averiguar nuestra IP pública, datos del navegador y sistema operativo que usamos, FindMeByIP es una más de ellas, pero contiene una novedad, y es que permite archivar los datos de otros usuarios con el fin de colaborar a solucionar problemas.

Nada más entrar en la web se mostrará la siguiente información de nuestro equipo: IP, datos del navegador, datos del sistema operativo, soporte de las últimas características de CSS / HTML 5 e información sobre nuestra localización.

Si nos registramos en el servicio nos haremos con una dirección del tipo: http://www.findmebyip.com/Jose que podremos compartir con otras personas. Cuando alguien la visite, la información de navegador, IP, etc… de ese usuario quedará grabada en nuestra cuenta y así podremos ayudarle a solucionar algún problema que pueda tener con su ordenador, además nos llegará un correo con el aviso para acceder al informe.

Para que todo quede más ordenado en el área privada, tenemos la opción de añadir un nivel más a la URL. Por ejemplo si queremos ayudar a Mario a corregir algún problema en su equipo, le pasaremos la dirección: http://www.findmebyip.com/Jose/Mario y su informe aparecerá asociado a la etiqueta del nombre.

Fuente | Punto Geek

CSS Submiter permite promocionar páginas web que estén bien diseñadas. Este tipo de webs suelen estar expuestas en las llamadas “Galerías CSS”, páginas como CSS Manía, Best Web Gallery o CSS Based. Lo que hace esta aplicación es enviar nuestra web a varios de estos sitios, en principio 20, pero se está trabajando en aumentar esta cifra hasta 150.

Para comenzar con el envío hay que rellenar unos cuantos datos: título de la web, dirección, descripción, nombre y apellidos, correo, ciudad, país, tags asociadas con la página y la dirección personal del diseñador. No es un capricho el hecho de tener tantos campos de texto, al pasar por muchos formularios de envío, nos tenemos que asegurar que todos los campos tienen su equivalencia.

Una vez esté todo completado, pulsando el botón “Submit” comenzaremos a navegar por los formularios de envio de las “galerías CSS”, estos se rellenarán sólos, con la información que introdujimos anteriormente, solo tenemos que asegurarnos que todo es correcto, y pulsar en la parte superior el botón: “Next Form” para pasar al siguiente.

Hace unas semanas os hablamos de una web bastante similar: MeeCSS, podéis probar las 2 pero evitad enviar los formularios repetidos u os podrian penalizar.

Fuente | Su programador: David. ¡Gracias!