Photoshop visto desde los ojos del cliente

Había oído hablar de esta animación pero no había tenido el gusto de verla. Es una versión de photoshop según la idea que tienen los clientes de él. Aqui les comparto el link y una imagen como preview:

El photoshop de la imaginación del cliente podría ser también el de nuestros sueños.

Esto me recordó también una imagen que anduvo por doquier hace algunos ayeres, si no me equivoco como publicidad para la versión de Adobe Photoshop CS4:

Vale la pena recordar esta imagen :)

¡Saludos!

Iconos sencillos y gratuitos para web

Encontré algunos paquetes de iconos que pueden ser usados gratuitamente, son sencillosy están muy bien hechos.

Pixelated icon set:

Iconos: 36
Formato: PSD, GIF

gcons:

Iconos: 100

Formato: PSD, PNG, GIF, JPG

The noun project

Iconos: Incontables
Formato: SVG

Iconic icon set

Iconos:136

Formato: PNG, SVG, OFT/TTF/EOT, Omnigraffle

Dale estilo a los inputs de tus formularios de contacto o de registro

Si deseas crear un Formulario de Contacto o de Registro que se vea mejor la primer opción sería darle estilo a los inputs.
En tu css sólo debes de poner los estilos que deseas para esa etiqueta, por ejemplo:
input{
border: #ccc 1px solid;
height: 25px;
width: 200px;
color: #ccc;
}

Si no quieres que se aplique a todos los inputs de tu sitio web, crea un div que encierre tu formulario y estiliza unicamente los inputs de ahi dentro de la siguiente forma:
.contacto input{
 /*estilos aqui*/ 
} 
donde .contacto es el estilo del div que encierra el form.
También puedes darle estilo al nombre del campo, poniéndolo dentro de un .

En total tendríamos este html:

<div class="contacto">
  <span class="campo">Nombre:</span><input name="" type="text" /><br />
  <span class="campo">E-mail:</span><input name="" type="text" /><br />
  <span class="campo">Asunto:</span> <input name="" type="text" />
</div>

y este css:

.contacto{
font-family:Verdana, Geneva, sans-serif;
color:#39C;
font-size:11px;
}
.contacto input {
border: #39C 1px dashed;
height: 25px;
width: 200px;
color: #777;
margin:5px;
}
.campo{
display:block;
float:left;
line-height:25px;
height:25px;
width:100px;
text-align:right;
margin:5px;
}

Y ese código nos da esto:

Nombre:
E-mail:
Asunto:

Le puedes agregar border-radius box-shadow y demás para que se vea aún mejor, ya es cuestión de cada quien. Además, de la misma forma puedes darle estilo a los text-area.

Si profundizamos un poco más y usamos un poco de jQuery podemos obtener lo siguiente para ahorrar espacio, colocando el nombre del campo dentro del input y haciéndolo desaparecer al teclear dentro de él:

Este sería el html:

<div class="contacto">
  <input name="" type="text" placeholder="Nombre:"/><br />
  <input name="" type="text" placeholder="E-mail:"/><br />
  <input name="" type="text" placeholder="Asunto:"/>
</div>


Y este es el script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
  // This adds 'placeholder' to the items listed in the jQuery .support object.
  jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>




Espero le sirva a alguien xD

(El script lo saqué de aqui: http://www.cssnewbie.com/example/placeholder-support/)

Usar tipografías personalizadas en tu sitio web

¿Estás harto de crear sitios web usando sólo arial y helvetica? ¿o de tener que usar imágenes cuando quieres utilizar otra tipografía? ... xD qué simple, ok... ya hay miles de tutoriales de cómo "embedear" tipografías pero están en inglés así que aquí va uno en español, y es muy fácil.

1. Entrar a http://www.fontsquirrel.com/fontface/generator y usar el generador de @font-face kit
2. De los archivos que se bajan necesitarás los de tipo .eot, .svg, .woff y .ttf.
3. Copia el texto de la hoja de estilos generada pero presta especial atención a la línea que tiene el archivo .svg, este debes subirlo a la  primera línea.

@font-face {
    font-family: 'ComfortaaRegular';
    src: url('comfortaa-regular-webfont.eot');
    src: /** aqui hay que poner la línea del .svg **/
         url('comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('comfortaa-regular-webfont.woff') format('woff'),
         url('comfortaa-regular-webfont.ttf') format('truetype'),
         url('comfortaa-regular-webfont.svg#ComfortaaRegular') format('svg');  /**esta línea la subes**/
    font-weight: normal;
    font-style: normal;
}

¿por qué mover la línea? ¡Porque así saldrá la tipografía con antialiasing en chrome!
4. No olvides subir a tu server las fuentes.
5. Se utiliza como cualquier tupografía, mandándola llamar en los estilos, por ejemplo:
h1 {
      font-family: ComfortaRegular;
}

¡Cualquier duda en los comments! :D