CSS3 permite crear patrones de diseño sin el uso de imágenes.

Entre las técnicas que podemos hallar, se puede realizar este diseño:

background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

También es posible realizar este diseño mediante el código que le sigue a continuación.

background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
	linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:60px 60px;

Otro diseño interesante es este.

background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);

Todos estos diseños los encontraras en la página CSS3 Patterns Gallery, para que ustedes vean cual les puede ayudar en el diseño que estén realizando.

Hoy trabajo con formularios y dentro de este trabajo esta el diseño. Aquí les muestro algunos ejemplos de formularios que pueden guiarnos en nuestra tarea y que ademas forman un diseño intuitivo al usuario.

20 Ejemplos excelentes de formularios en diseño web, en este post verán formularios de paginas que han hecho un buen trabajo en cuanto a definir formularios y que ademas sean vistosos.

Sin embargo estaba buscando algo más algo que pueda servirme en mi trabajo así que pille este sitio Wufoo Form Gallery. En el pueden descargar formularios de distintas aplicaciones ademas pueden realizar personalizaciones. Salvo el hecho de que tienen una misma base en cuanto a su diseño, esto pueden ser de utilidad a la hora de presentar un formulario de contacto y otros que seguro pueden necesitar.

Sin mas por ahora, recomiendo que revisen y espero que sea de utilidad. Adios

50 Fantásticos ejemplos de CSS3, es un enlace que nos muestra una colección de experimentos hechos con CSS3, revisando un poco el contenido de este blog los trabajos realizados son muy bien logrados. Por ello, invito a que puedan revisar y sacar alguna nuevas técnicas de esta tecnología.

Enlace: 50 Fantásticos ejemplos de CSS3

En esta entrega hago referencia a unos recursos de botones realizados íntegramente con CSS3, los cuales puedes usar para tus diseños.

Como ejemplo solo doy uno de ellos que me impresiona por el hecho de que es realizado totalmente con hoja de estilo.

Sexy Buttons

Enlace: CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)

Como no deja de sorprender el poderoso CSS3, ahora les traigo un ejemplo de como hacer un simple triángulo con sólo CSS3.

(el ejemplo que pongo es una imagen)

.triangulo {
    border-color: transparent transparent #555555;
    border-style: solid;
    border-width: 0 105px 105px;
    height: 0;
    width: 0;
}

En la página del autor existen mas ejemplos increibles.

Demo y Documentación | Creating Triangles in CSS

En este POST hago mención a una aplicación que te permita generar código CSS3 bajo un editor gráfico. Te la posibilidad  de crear bordes redondeados, aplicar una sombra al contenedor, Crear gradientes y transparencia.

Con ello puedes generar el código y llevarlo a tu sitio.

A modo de comentario se la generación del código se centra solo en la aplicación de las reglas necesarias para la creación del efecto. De nosotros depende que se apliquen en su debido lugar. También es bueno recalcar que esta herramienta aplica correcciones para los distintos navegadores.

Por ahora les dejo el enlace para que prueben esta herramienta.

Enlace | CSS3 Gen

Fuente: creativosonline.org/…/un-generador-css3-fantastico.html

Hablando de los efectos que pueden realizarse con CSS3, me encontré con este control que esta muy bien logrado. La web que lo muestra habla que este control trabaja con el motor WebKit.

Por lo que leí de este demo lo que le reclaman es que se hace de la ayuda de JQuery para logra el efecto. Sin embargo, no le quita ningún merito.

Fuente: FeedProxy

Hoy mostraré una recopilación de técnicas muy bien elaboradas, que de alguna manera nos servirán para inspiración. Espero que les sea muy útiles.

Por ejemplo este

WebKit Clock

Este demo esta creado sobre cavas HTML5, CSS3, JavaScript, Web Fonts, SVG y sin archivos de imágenes. El archivo CSS es enorme pero el resultado es notable.

CSS Dock

Se trata de un experimento rápido de CSS3 tratando de replicar el Dock de OS X, con etiquetas, animaciones, reflexiones e indicadores. Utiliza CSS de transiciones para el efecto de la ampliación y la psudo-clase de :target y además una animación por CSS del efecto rebote.

Sin mas les invito a que sigan revisando el extenso listado de estas ingeniosas aplicaciones CSS.
CSS: Innovative Techniques and Practical Solutions

Hasta pronto.

Un nuevo día para impresionarse sobre las funcionalidades de CSS3. Esta vez me toco trabajar con un sistema que maneja HTML5 y CSS3.

Esta regla tal vez ya la conocias, se trata de modificar el texto seleccionado, usando cualquier otro fondo con el que dispone en navegador.

Sin mas las reglas basicas son las siguientes.

::-moz-selection {
	background:#FC0;/*#f24c15;*/
	color:#009;
	}

::selection {
	background:#FC0;/*#f24c15;*/
	color:#009;
	}

Como ven, ya he hecho algunos cambios y es impresionante.

Lo malo no funciona en Explorer.

Bueno hasta pronto.

Encontré esta página en la que inscriben sitios hechos en HTML5 y CSS3 así como otras nuevas tecnologías, nos sirve para ver ejemplos muy bueno e interesantes sobre el uso de HTML5 y CSS3, y también los podemos usar como Inspiración para nuevos proyectos, el sitio del que les hablo es  101 Best Html5 Sites en la que podemos ver sitios como estos:

http://www.pixelbender.ca/

http://www.edgarleijs.nl/

http://wantist.com/