Xyberneticos

25 nuevas fuentes para el diseño minimalista

patagoniacreative — Tue, 07 May 2013 23:27:14 +0000

25 maravillosas fuentes gratuitas para todo tipo de “diseño plano” o flat design. El Flat Design implica un diseño minimalista, sin degradados, sin elementos que no sean esenciales y que se opone frontalmente al esqueumorfismo, es decir, al diseño que imitaba a la realidad, imperante en los últimos tiempos, como es el caso de algunas aplicaciones.

Enlace 25 New Free Fonts For Flat Design

Via: webintenta

Magnific Popup: lightboxes responsive.

patagoniacreative — Tue, 07 May 2013 23:20:09 +0000

Magnific Popup una novedosa apuesta para generar lightbox con jQuery. Es totalmente libre, y se centra en el rendimiento y en proporcionar al usuario una experiencia fabulosa, aun conectado con cualquier dispositivo.

Enlace Magnific Popup

Via: webintenta

iLightBox – Revolucionario Lightbox Plugin

patagoniacreative — Fri, 22 Feb 2013 20:27:30 +0000

iLightBox es una alternativa fresca a otros plugins jQuery lightbox y hay una gran oportunidad de que, a pesar de que es un recurso mas, pueda convertice en tu favorito. Puede presentar imágenes, vídeos (YouTube, Vimeo, HTML5 video), otros HTML y existe un modo de pantalla completa maravilloso.
El modo galería puede mostrar otros elementos como las miniaturas y permite navegar a través del teclado, ratón y toque eventos (swipe).
Cuenta con una potente API de JavaScript para personalizar cuando sea necesario. El plugin es compatible con una amplia gama de navegadores a partir de IE7+ y funciona con móviles, también. Para los aficionados a WordPress, encontraran un plugin WordPress que ofrece compatibilidad con wordpress gallery shortcode.

Enlace descarga y Demos iLightBox

TinyPNG – Comprimir imágenes PNG y preservar transparencia

patagoniacreative — Fri, 22 Feb 2013 20:16:57 +0000

TinyPNG que sólo funciona con archivos PNG, es una maravillosa aplicación web que sirve para la comprimir y reducir al peso mínimo nuestros archivos .PNG.
Funciona al drag n’ drop, cargar las imágenes que se minimiza en la interfaz web y genera automáticamente los formatos comprimidos. Utilizando TinyPNG, es muy simple comprimir a más de un 50% menos las imágenes, generando un archivo 8 bits PNG (en lugar de 24bits) mediante técnicas inteligentes. El resultado es fabuloso.

Simple Icons – 100 PNG icons

patagoniacreative — Fri, 22 Feb 2013 20:06:20 +0000

A pesar de que hay tantos de ellos, siempre es bueno tener más opciones para los iconos sociales en diferentes estilos que puedan ajustarse mejor a los diferentes sitios web.
Simple Icons, es un conjunto de 96 iconos sociales gratuitos que cubren casi la totalidad de los conocidos servicios sociales (Twitter, Facebook, Instagram, Google+ y mucho más).
Vienen en diferentes tamaños, desde 16px en adelante y en formato .PNG. Son uso gratuito en proyectos comerciales.

Enlace Simple Icons – Descarga 7.7MB

Fullscreen Pageflip Layout – Contenido como páginas de libros

patagoniacreative — Fri, 21 Dec 2012 00:01:35 +0000

Fullscreen Pageflip Layout, un tutorial sobre cómo crear pageflip utilizando el plugin de BookBlock. La idea es cambiar el contenido como páginas de libros y acceder a las páginas a través de un menú lateral que se deslizan desde la izquierda. El menú de la barra lateral contendrá enlaces a diferentes páginas, es decir, a la tabla de contenido. Al hacer clic en una tabla de contenido, vamos a saltar a la página correspondiente.

Ver Demo - Descarga Codigo - Mas info Codrops

PLAIN TEXT

HTML:

Self-destruction

...

Table of Contents

StackSlider – 3D image slider

patagoniacreative — Thu, 20 Dec 2012 22:04:45 +0000

StackSlider es un script (plugin jQuery) experimental para generar Slider con un concepto de visión diferente y divertida. Utilizando CSS nos permite lograr perspectivas y transformaciones 3D fabulosas. La idea es navegar sobre dos filas de imágenes en las que las transiciones se asemejan a un elemento que se despegó de la parte superior de la fila y es movido o girado hacia el centro de la pantalla para ser visualizado.

Ver Demo - Descarga StackSlider - Mas info y Codigo Codrops

Tenga en cuenta que esto es altamente experimental y no se ha probado completamente. Y, obviamente, el efecto 3D sólo trabaja en el apoyo de los navegadores modernos. El proceso es simplemente mostrar y ocultar las imágenes durante la navegación. El efecto más suave, se ve en los navegadores WebKit.

PLAIN TEXT

HTML:

Graverobber

by Isaac Montemayor

Typespiration – treating typography with respect (CSS para fuentes)

patagoniacreative — Wed, 19 Dec 2012 00:54:08 +0000

Typespiration.com es un interesante sitio donde podremos encontrar combinaciones de fuentes como inspiración para nuestras web (Similar a Typechart publicado en 2008). Cada ejemplo, se encuentra listo para ser usado, ya que es acompañado de su correspondiente código CSS. La idea es simple compartir ideas de diseño e inspirar a los demás.

Si eres diseñador también puedes enviar tus ideas, siguiendo este enlace join us today →

Enlace Typespiration.com

Un ejemplo de ideas en css para nuestra fuentes

PLAIN TEXT

CSS:

h1 {
color: #111;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
font-weight: 700;
line-height: 64px;
margin: 0 0 0;
padding: 20px 30px;
text-align: center;
text-transform: uppercase;
}

h2 {
color: #111;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 48px;
margin: 0 0 24px;
padding: 0 30px;
text-align: center;
text-transform: uppercase;
}

p {
color: #111;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0 0 48px;
}

a {
color: #990000;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.date {
color: #111;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
position: relative;
text-align: center;
z-index: 1;
}

.date:before {
border-top: 1px solid #111;
content:"";
position: absolute;
top: 12px;
left: 0;
width: 100%;
z-index: -1;
}

.author {
color: #111;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 38px;
position: relative;
text-align: center;
z-index: 1;
}

.author:before {
border-top: 1px solid #111;
content:"";
position: absolute;
top: 12px;
left: 0;
width: 100%;
z-index: -1;
}

.date span,
.author span {
background: #fdfdfd;
padding: 0 10px;
text-transform: uppercase;
}

.line {
border-top: 1px solid #111;
display: block;
margin-top: 60px;
padding-top: 50px;
position: relative;
}

.read-more {
-moz-border-radius: 50%;
-moz-transition: all 0.2s ease-in-out;
-webkit-border-radius: 50%;
-webkit-transition: all 0.2s ease-in-out;
background: #111;
border-radius: 50%;
border: 10px solid #fdfdfd;
color: #fff;
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 80px;
line-height: 80px;
margin: -40px 0 0 -40px;
position: absolute;
bottom: 0px;
left: 50%;
text-align: center;
text-transform: uppercase;
width: 80px;
}

.read-more:hover {
background: #990000;
text-decoration: none;
}

Tips: border-radius

patagoniacreative — Tue, 18 Dec 2012 23:44:34 +0000

En Joshua Hibbert, acabo de encontrar un interesante tips que ayudara a más de uno de ustedes a obtener radios perfectos para cada navegador en bordes utilizando css. (Idea qe Joshua Hibbert continuo desde este artículo de Chris Coyier.)

La fórmula que usó Joshua Hibbert para asegurarse detener un radio en bordes preciso es: x = z - y, donde x es el radio del borde interior, z es el radio del borde exterior, e y es el espacio entre el dos elementos (como se muestra arriba). Tenga en cuenta que para esta fórmula de trabajo, tanto en los círculos pseudo-formadas por los radios de bordes deben tener el mismo punto central.
Ahora bien, a diferencia de la mayoría de las fórmulas matemáticas, esta idea no siempre tiene la razón. Usted puede encontrar la extraña situación en que el resultado no se ve muy bien, así que ten en cuenta que esto es sólo una guía, es posible que necesites encontrar algo mas para hacerlo perfecto.
Ademas nos brinda una herramienta Online para ver resultados o bajar su codigo para hacer modificaciones

PLAIN TEXT

JavaScript:

"utf-8" />
name="author" content="Joshua Hibbert" />
name="viewport" content="width=device-width,initial-scale=1" />
Get Your Nested Border Radii Right!

Get Your Nested Border Radii Right!

"content">

class="mark">x = class="mark">z – class="mark">y</span>h2>

"outer">

"inner">class="mark">x = class="value">25px</span>div>

Please keep in mind that this is only a guide; you may encounter situations where an adjustment is required to get the best result. It's okay to eyeball a value!

Original article by Joshua Hibbert

SimpleCorp – Theme WordPress Free

patagoniacreative — Tue, 18 Dec 2012 22:59:46 +0000

SimpleCorp es un bonito theme wordpress destinado a sitios web corporativos, muy bien trabajado y totalmente gratuito (lo que da un valor agregado a su hermoso diseño). Permite variar entre múltiples estilos de color y trae incorporado un formulario de contacto basado en AJAX.

Ver Demo - Info y Descarga (Cuando marquen descargar, deberán registrarse de forma gratuita, para activar la descarga)

· Diseño Sensible

El theme está optimizado para una correcta visualización en iPhone y iPad.

· HTML5 y CSS3

Implementado con HTML5 y tecnologías CSS3

· Múltiples estilos de color

Usted puede elegir el estilo del tema y las múltiples opciones de color.

· Paginación incorporada

Paginación numérica incorporada, como la paginación por defecto. No hay necesidad de instalar ningún plugin.

· Formulario de contacto

Página de contacto, con formulario basado en Ajax con validación email y configuración sencillas en sección opciones.

· Opciones del tema del panel

Usted puede editar las opciones, a través del simple panel incorporado al instalarlo en wordpress