El propósito de la mayor parte de los sitios web no es únicamente atraer nuevos visitantes, sino que estos permanezcan allí la mayor cantidad de tiempo posible. Pero, ¿qué ocurre cuando un visitante llega a una página que no existe en ese sitio web? Pues sencillamente, que verá una página de error. Este error es conocido como error 404. Al darse este problema, se muestra una página web que se puede personalizar al 100% y que algunos diseñadores de sitios web suelen olvidar por completo.

En el artículo de Artatm titulado 30 Creative And Funny 404 Error Pages For your Inspiration, se recogen 30 páginas de error 404 divertidas y diferentes para que te inspiren. Porque de los errores también se aprende, ¿no es así?

Las texturas y patrones son siempre un recurso muy útil para diseñadores gráficos y web. Se pueden crear atractivos fondos y una gran variedad de diseños con la ayuda de estos patrones. Aquí vamos a compartir contigo una colección de varios mosaicos y patrones gratuitos en formato Photoshop publicada en Lava360. Los podrás descargar sin gastarte un solo euro y utilizarlos según tus necesidades creativas. Echa un vistazo a todas las opciones disponibles y comienza a hacer más grande tu biblioteca personal de texturas.

Vía:
Lava360 - Collection Of Free Photoshop Tileable Textures & Patterns

El 16 de abril, durante la celebración del NAB Show, Blackmagic presentó DaVinci Resolve 9. Se trata de una importante actualización con respecto a la anterior versión que estrena una interfaz renovada apostando, como han hecho otras empresas como Autodesk con Smoke, por una apariencia elegante y moderna. Además ha optimizado el flujo de trabajo para ganar velocidad. Optimización que se ha llevado a cabo incorporando las últimas tecnologías y descubrimientos por parte de los ingenieros de Blackmagic Design.

Para los que no conozcan Resolve, es una herramienta utilizada principalmente en largometrajes para la corrección de color. Aplicación que ha ganado muchos usuarios y que enamora a todo aquel que la prueba. Además existe una versión Lite que sirve tanto de toma de contacto como para que los usuarios cuyas pretensiones no sean tan altas dispongan de una solución mejor que las opciones de corrección incluida en los editores de vídeo.

La nueva versión de DaVinci Resolve estará disponible en julio de 2012. La versión Lite podremos descargarla gratuitamente y Resolve 9 a un precio de 995 dólares. Eso sí, los usuarios actuales de Resolve podrán descargar la actualización de forma gratuita.

Más información:
Blackmagic Design Announces DaVinci Resolve 9
Applesfera –  DaVinci Resolve 9, nueva versión de la herramienta para la corrección…

Autodesk le ha dado un buen lavado de cara a su herramienta de edición de vídeo y efectos visuales para usuarios de Mac. Smoke 2013 ha cambiado radicalmente su interfaz de usuario, mezclando en ella los elementos tradicionales en este tipo de herramientas con los suyos propios y únicos. Una herramienta de composición basada en nodos, ConnectFX, permite a los editores insertar efectos avanzados sin tener que cambiar de interfaz.

Nuevas herramientas específicas se unen al grupo, incluyendo algunas específicas para el ajuste profesional del color, un método más eficiente para trabajar con pantallas verdes (chromakey) y edición de imágenes esteroscópicas 3D, y un método de trabajo con efectos 3D que permite trabajar con logotipos y títulos sin tener conocimientos en esta área.

Los requisitos de hardware se han rebajado considerablemente para esta versión y los usuarios podrán sacar partida a las ventajas de unidades externas y dispositivos de vídeo Thunderbolt, pudiendo trabajar de manera profesional sin necesidad de un equipo Mac Pro.  Los formatos de vídeo permitidos son variados, incluyendo ProRes 4:2:2 de Apple, ARRIRAW de cámaras Arri, DNxHD y RED’s Redcode.

Por si fuera poco, la bajada de precios, de los 15.000 dólares que costaba a 3.495 dólares es más que considerable, y más teniendo en cuenta para qué tipo de usuarios está diseñado este software.

Vídeos demostrativos

Autodesk ha publicado un conjunto de vídeos para explicar varias de las novedades de la nueva versión de su programa de edición de vídeo, Smoke 2013.

Pinche aquí para ver el vídeo

Pinche aquí para ver el vídeo

Pinche aquí para ver el vídeo

Pinche aquí para ver el vídeo

Pinche aquí para ver el vídeo

Pinche aquí para ver el vídeo

Enlaces:
Descarga prueba gratuita de Autodesk Smoke 2013
Smoke 2013 en el sitio de Autodesk (inglés) 

Vector UI Bundle

Simple UI Kit

Pixel UI Icon Set

Creamy UI Kit

Y muchos más…

Y si quieres echar un vistazo a unos cuantos más, no dudes en pasarte por Downgraf - Web UI kit’s For Free Download.

Por fin se ha publicado oficialmente la versión 1.0 de darktable, un potente software de catalogación (mesa de luz) y revelado (cuarto oscuro) de fotografía que por sus características e interfaz se plantea como un duro competidor de Lightroom.

Dotado de una interfaz muy amigable y cómoda, tiene soporte para extensiones y no parece faltarle nada de lo que tienen otras aplicaciones comerciales. Otro software más que por su coste de licencia cero (GPL3) y su alta calidad merece ser instalado tan sólo para darle una oportunidad.

Actualmente se han publicado únicamente versiones para Mac y GNU/Linux, algo que será un gran inconveniente para llamar la atención de los fotógrafos que no vengan de esos mundos. En ambas plataformas su funcionamiento es rápido y su interfaz algo diferente a Lightroom pero no necesariamente más compleja.

Para comenzar a utilizarlo, disponéis de un completo manual.

Vía:
Xatakafoto –  Darktable. Liberada la versión 1.0

Una de las mayores novedades que trajo Android 4, conocido como Ice Cream Sandwich, a la que no se le dio mucha importancia en su presentación en Shangai, es la de la nueva tipografía que llevaba de serie. Se trata de Roboto, y su mayor particularidad es la de estar pensada para ser usada en pantallas de mucha resolución y poco tamaño sin perder visibilidad y, por ende, ahorrar mucho espacio visual en pantallas adecuadas.

Tras su lanzamiento se consiguió extraer la tipografía de formas poco convencionales y ha surcado los confines de Internet con una versión muy similar y exitosa, pero nunca está de más tener una fuente que proviene del creador oficial. Por ello Google ha lanzado oficialmente para todo el mundo y de manera completamente gratuita esta tipografía, que puede dar mucho juego incluso en los ordenadores de sobremesa.

Esta tipografía puede servir a aquellos que le quieran dar un toque más Androide a su ordenador, al igual que a los desarrolladores para comprobar que se puede ver bien la tipografía y no romper con el tema de Android, y para los diseñadores gráficos que quieran realizar carteles en relación con Android para darle un toque más singular.

Vía:
Xataka Android - Google pone a disposición de todo el mundo la tipografía Roboto, tipografía de Ice Cream Sandwich

Información y descarga:
Descargar tipografía

Después de algo menos de un mes en beta pública, Adobe ha lanzado la versión oficial de Lightroom 4, su software de gestión de fotografías. Una de las principales novedades de esta versión es la integración de vídeo, que ahora se puede gestionar igual que las fotos. Además del vídeo, Lightroom 4 incluye integración con Flickr, soporte GPS para clasificar las fotos más fácilmente, y otras novedades en la biblioteca y en la gestión de fotografías. Con esta nueva versión también es posible crear nuestros propios libros de fotos, de hasta 240 páginas.

Es un software rápido, útil y no demasiado difícil de usar. Además, la integración con Facebook y Flickr lo hacen muy atractivo si eres usuario activo de estas redes, y los retoques predefinidos están realmente bien. Por si fuera poco, y como es habitual, se encuentra totalmente localizado al español.

Lightroom 4 está disponible tanto para Mac como para Windows. La licencia cuesta 149 dólares (bastante menos que los casi 400 que costaba la anterior), aunque si queréis probarlo tenéis una versión de prueba de 30 días totalmente funcional y gratuita.

Vía:
Genbeta - Adobe lanza Lightroom 4 para Mac y Windows

Compra y descarga:
 Adobe Photoshop Lightroom 4

Es obvio que obtener visitantes regulares en tu bitácora tienes que tener contenidos de alta calidad, pero al mismo tiempo, el diseño del sitio debería ser atractivo para los lectores. De otro modo, los lectores podrían no mostrar un interés inicial a la hora de leerlos. Una vez comiencen a desarrollar gusto por tu el diseño de tu bitácora, sentirán la urgencia de leer el contenido y si eres capaz de producir para ellos contenidos informativos, únicos e interesantes entonces el éxito de tu bitácora será más evidente. Por lo tanto, la combinación perfecta entre un diseño increíble y buen contenido puede convertir a tu bitácora en un sitio popular. Hay algunos diseños muy comunes que normalmente se ven en toda clase de bitácoras modernas. Pero precisamente por este motivo, se convierten en ordinarios. De hecho, deberían ser retocados con suficiente creatividad y singularidad para atraer a los visitantes.

Antes de crear un diseño fantástico para tu bitácora, asegúrate de que tienes una idea clara acerca de cual será el tema exacto de tus bitácora. Las bitácoras pueden ser de cualquier cosa: películas, deportes, recetas de cocina, o profesionales, Es fácil comprender que un diseño no encajará en cualquier temática. En ese caso tienes que tener clara la idea de la temática de tu bitácora antes de lanzarla, para así crear el diseño perfecto para ella.

Que hagan juego el diseño y el contenido es esencial, ya que de otro modo, los visitantes no podrán ver la conexión entre estos dos puntos, haciendo que puedan irritarse y forzándolos a abandonar la página. La bitácora puede ser personal o corporativa. En ambos casos, la cuestión más importante a la hora del diseño del sitio será el mismo. Al ser las bitácoras uno de los mejores medios de concienciar a la gente acerca de sus pensamientos individuales o sobre los esfuerzos de una compañía hay que trabajar el mejor de los diseños.

Talkability

Blog Design Ninja

The Astonishing Adventures of Lord Likely

Y un enlace con diecisiete diseños más

Esta entrada está basada parcialmente en la entrada 20 Excellent Examples of Blog Designs donde podrás visitar 20 bitácoras de diseños innovadores e inspiradores.

En este artículo vamos a crear un visor de imágenes en únicamente con CSS3 inspirado en el trabajo de Vladimir Kudinov en Futurico User Interface. Las características de CSS que utilizaremos en este artículo han sido probadas en los navegadores más recientes por que el visor no funcionará en todos los navegadores (prueba con Chrome y Safari). No es recomendable utilizarlo en proyectos profesionales porque no funcionará para todos los usuarios. Utiliza el contenido de este artículo para practicar con las características de CSS3 que podrás utilizar cuando esté realmente disponible en un futuro próximo.

Paso 1 – HTML

Vamos a crear dos listas sin ordenar: una con las miniaturas, y otra con las imágenes. Para unir una imagen con su miniatura respectiva utilizaremos un id por cada una de ellas.

<div class="slider-wrapper">
<ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
</ul>
<ul class="s-slides">
	<li id="slide-1"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>

Paso 2 – Estilos CSS básicos

En este momento, crearemos el diseño básico de nuestro visor. Para hacerlo, reiniciaremos el margen y relleno de todos los elementos del visor, les daremos un ancho y alto fijos y los posicionaremos.

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	list-style: none;
}

.slider-wrapper {
	width: 508px;
	overflow: hidden;
}

ul.s-thumbs li {
	float: left;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
	width: 500px;
	height: 350px;
	position: relative;
}

ul.s-slides {
	overflow: hidden;
	clear: both;
}

ul.s-slides li {
	position: absolute;
	z-index: 50;
}

Paso 3 – Estilos CSS3

Ahora añadiremos los estilos CSS3 para hacerlo más atractivo. Aquí utilizaremos algunas propiedades CSS3 como sombras, bordes redondeados, etc. Te darás cuenta de que utilizaremos varios prefijos para cada navegador. Esto es necesario porque algunas propiedades están en pruebas en algunos navegadores y necesitamos añadir los prefijos para poder adaptar los estilos a ellos.

ul.s-thumbs li {
	float: left;
	margin-bottom: 10px;
	margin-right: 11px;
}

ul.s-thumbs li:last-child {
	margin-left: 1px;
	margin-right: 0;
}

ul.s-thumbs a {
	display: block;
	position: relative;
	width: 55px;
	height: 55px;
	border: 4px solid transparent;

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	font: bold 12px/25px Arial, sans-serif;
	color: #515151;
	text-decoration: none;
	text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}

ul.s-thumbs img {
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

ul.s-thumbs a:hover,
ul.s-slides {
	border: 4px solid #141517;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}

Paso 4 – Descripción de las imágenes

En este paso vamos a añadir una caja con la descripción de la imagen que aparecerá cuando el puntero paso por encima de la misma. Crearemos esta descripción utilizando algunos estilos CSS3 y el selector :before para añadir la flecha a la caja

HTML

Para crear la caja añadiremos una etiqueta span con algo de texto a una etiqueta anchor.

<ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

CSS

Para crear la caja añadiremos una anchura fija para poder centrar la caja en la imagen y añadiremos algunas sombras y gradientes para mejorar su aspecto. Para crear la flecha utilizando únicamente CSS utilizaremos un truco con el borde.

ul.s-thumbs li a:hover span {
	position: absolute;
	z-index: 101;
	bottom: -30px;
	left: -22px;
	display: block;
	width: 100px;
	height: 25px;
	text-align: center;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	box-shadow: 0px 1px 0px rgba(0,0,0,.4);

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
}

ul.s-thumbs li a:hover span:before {
	width: 0;
	height: 0;
	border-bottom: 5px solid #ffffff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	content: '';
	position: absolute;
	top: -5px;
	left: 44px;
}

ul.s-thumbs li:first-child a:hover span {
	left: -3px;
}

ul.s-thumbs li:first-child a:hover span:before {
	left: 25px;
}

ul.s-thumbs li:last-child a:hover span {
	left: auto;
	right: -3px;
}

ul.s-thumbs li:last-child a:hover span:before {
	left: auto;
	right: 26px;
}

Paso 5 – Las transiciones del visor

Ahora crearemos las transiciones del visor. Como crearemos diferentes transiciones para cada imagen, necesitamos añadir diferentes clases a cada una de las imágenes.

HTML

<ul class="s-slides">
	<li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

CSS

Para crear las transiciones utilizaremos @keyframes. La animación se crea por un cambio gradual entre un juegos de estilos CSS a otro. Para indicar cuando ha de comenzar la animación, cambiaremos y terminaremos utilizando porcentajes, donde 0% es el comienzo de la animación y 100% es el final de la misma.

Deslizamiento desde la izquierda

/* Slide Left */

@-webkit-keyframes 'slideLeft' {
	0% { left: -500px; }
	100% { left: 0; }
}

ul.s-slides li.slideLeft:target {
	z-index: 100;

	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Al principio de la animación la imagen se encontrará a -500 píxeles a la izquierda y cuando la animación se complete, la imagen se situará a 0 píxeles a la izquierda. Ajustando el tiempo de animación a 1 segundo, obtendremos un movimiento de izquierda a derecha.

Deslizamiento desde la derecha

/* Slide Right */

@-webkit-keyframes 'slideRight' {
	0% { left: 500px; }
	100% { left: 0; }
}

ul.s-slides li.slideRight:target {
	z-index: 100;

	-webkit-animation-name: slideRight;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Deslizamiento desde arriba

/* Slide Top */

@-webkit-keyframes 'slideTop' {
	0% { top: -350px; }
	100% { top: 0; }
}

ul.s-slides li.slideTop:target {
	z-index: 100;

	-webkit-animation-name: slideTop;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Deslizamiento desde abajo

/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
	0% { top: 350px; }
	100% { top: 0; }
}

ul.s-slides li.slideBottom:target {
	z-index: 100;

	-webkit-animation-name: slideBottom;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Acercamiento a la imagen

Para llevar a cabo este efecto utilizaremos la propiedad de transformación de CSS3. Al principio, la imagen tendrá un tamaño del 10% y al terminar la animación tendrá su tamaño real. Colocaremos la imagen a 4 píxeles desde arriba para rellenar el espacio que aparece debajo.

/* Zoom In */

@-webkit-keyframes 'zoomIn' {
	0% { -webkit-transform: scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomIn:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: zoomIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Alejamiento de la imagen

/* Zoom Out */

@-webkit-keyframes 'zoomOut' {
	0% { -webkit-transform: scale(2); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomOut:target {
	z-index: 100;

	-webkit-animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Rotar y cambiar el tamaño

/* Rotate */

@-webkit-keyframes 'rotate' {
	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.rotate:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Paso 6 - Imagen “Not Target”

Como estamos utilizando z-index para ajustar qué imagen aparece encima vemos un fallo cuando hacemos clic sobre una nueva imagen. Cuando haces clic en una miniatura, la imagen previa desaparece y muestra la última imagen durante la transición. Para solucionarlo, necesitamos añadir un estilo not-target con un z-index mayor durante la nueva transición.

/* Not Target */

@-webkit-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}

ul.s-slides li:not(:target) {
	-webkit-animation-name: notTarget;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Paso 7 – La primera imagen visible

Cuando el visor se cargue, mostrará la última imagen. Para ser capaces de elegir la primera imagen del visor, crearemos una clase con un z-index mayor y solamente necesitarás añadir esta clase la imagen que quieras que sea visible cuando se cargue el visor.

/* First Slide */

ul.s-slides li.first {
	z-index: 60;
}

Paso 8 – Cagar el visor

En este paso añadiremos un efecto la carga porque cuando se cargue con la página esperará 1 segundo para cambiar a la primera imagen. No queremos que se vea esta falsa transición, por que o ocultaremos durante ese periodo de tiempo.

/* Slider Load */

@-webkit-keyframes 'load' {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.slider-wrapper {
	-webkit-animation-name: load;
	-webkit-animation-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

Conclusión

¡Felicidades, has terminado el visor! Como hemos utilizado muchas características CSS3 que únicamente algunos navegadores pueden procesar, no es buena idea utilizarlo como visor en sitios de vital importancia. Eso sí, te servirá para practicar y comprender cómo se trabaja con CSS3 y descubrir su potencial.

Más información:
Este artículo es una traducción libre de How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]  en DesignModo. Además, allí podrás ver un ejemplo y descargar el código fuente del mismo para poder estudiarlo detenidamente.