¡Muchas gracias por participar!

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Encuesta: ¿Qué nivel de CSS tienes?

• Resultados de una encuesta sobre CSS3

• Encuesta: ¿Qué opinas sobre la barra inferior de CSSBlog ES?

Si todavía, a pesar de leer las anteriores entradas para obtener mayor inspiración al crear el logotipo (puede que también te ayuden estos pasos para crear un logotipo) sigues sin encontrar tu logotipo perfecto, no te preocupes. En esta entrada te muestro los 8 mejores sitios (según mi opinión) que te ayudarán a completar este proceso tan importante de imagen en tu producto/marca.

Brandsoftheworld

Brandsoftheworld Recopila una gran cantidad de logotipos sobre empresas, clasificados mediante diversos parámetros (autor, categoría, países…). Puedes enviar el tuyo si lo deseas.

Logofaves

Logofaves es un sitio web dedicado a ofrecernos una gran cantidad de logotipos para desarrollar nuestra inspiración y de esta forma crear o modificar el nuestro. Pueden clasificarse según la valoración más alta. Puedes enviar el tuyo si lo deseas.

Logopond

Logopond recopila una amplia gama de logotipos desde su interfaz intuitiva.

Puedes enviar el tuyo si lo deseas.

Logodog

Logodog te ayudará a crear tu logotipo perfecto, tú les envías las ideas y ellos realizan el trabajo. Eso sí, es necesario pasar por caja. Podéis ver detalles sobre los precios aquí.

Mouse and Chick

Mouse and Chick es un estudio alojado en Croacia, donde, en su portafolio, nos muestran una larga lista de logotipos.

Identityarchives.com

Identityarchives.com es un buscador de logotipos. Hay tantos que seguro que encuentras el deseado.

Underconsideration.com

En Underconsideration.com analizan una gran cantidad de logotipos, destacando la fecha de su creación, su autor, entre otras cosas.

Identityworks.com

Identityworks.com es otro sitio donde podremos visualizar un montón de logotipos, ordenados por años.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• 30 ejemplos sobre bonitos diseños de logotipos

• 104 tipografías gratis para diseñar sitios y logotipos

• 30 inspiradores fondos de pantalla panorámicos

¿Necesitas una barra de navegación para tu sitio web? Este tutorial explica como diseñar una bonita barra de navegación mediante el uso de CSS, inspirada en Gettyimages. Es tan simple como otras que he descrito anteriormente, además de poder encontrar mayor inspiración en esta lista de menús horizontales.

Código HTML

El código HTML es muy simple, consta de una estructura con listas <ul> con un elemento <li> para cada enlace de la barra de navegación:

<div id="navbar">

<span class="inbar">

<ul>

<li class="navhome"><a href="home.html"><span>Home</span></a></li>

<li><a href="about.html"><span>About</span></a></li>

<li><a href="contact.html"><span>Products</span></a></li>

<li><a href="contact.html"><span>Contact Us</span></a></li>

</ul>

</span>

</div>

Cada enlace <a> contiene una etiqueta <span> dentro del mismo. Esto es usado muy a menudo para diseñar elementos líquidos con bordes redondeados.

Código CSS

A continuación se muestra el código CSS para estilizar la lista que compone la barra. Las imágenes se mostrarán después, donde podremos descargar todo el ejemplo. Podemos diferenciar varias imágenes: 2 en la parte superior (izquierda y derecha) 2 en la parte inferior (izquierda y derecha), imágenes que componen el conjunto :hover (al posicionar el ratón encima del enlace), y otras 4 imágenes para la zona en la que nos encontremos, con la misma disposición.

#navbar{

width:auto;

height:36px;

background:url(img/navbar-bg.png) left top repeat-x; }

#navbar .inbar{

display:block;

height:36px;

background:url(img/right-round.png) right top no-repeat; }

#navbar ul, #navbar ul li{

border:0px;

margin:0px;

padding:0px;

list-style:none;

height:36px;

line-height:36px; } #navbar ul{

background:url(img/left-round.png) left top no-repeat; }

#navbar ul li{

float:left;

display:block;

line-height:36px; }

#navbar ul li a{

color:#403e32;

text-decoration:none;

font-weight:bold;

display:block; }

#navbar ul li a span{

padding:0 20px 0 0;

height:36px;

line-height:36px;

display:block;

margin-left:20px; }

#navbar .navhome a, #navbar .navhome a:hover{

background:url(img/a-bg.png) left top no-repeat;

height:36px;

line-height:36px; }

#navbar .navhome a span, #navbar .navhome a:hover span{

color:#FFFFFF;

background:url(img/span-bg.png) right top no-repeat;

height:36px;

line-height:36px; }

#navbar ul li a:hover{

background:url(img/ahover-bg.png) left top no-repeat;

height:36px;

line-height:36px; }

#navbar ul li a:hover span{

background:url(img/spanhover-bg.png) right top no-repeat;

height:36px;

line-height:36px; }

Estandarización

XHTML 1.0 Transitional inválido.

CSS 2.1 válido.

Ejemplo de su funcionamiento

Descarga del ejemplo

Al descargar el ejemplo podrás ver las imágenes que componen esta barra de navegación:

Vía | Woork

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Forzar la barra de desplazamiento vertical con CSS

• Novedoso menú de navegación con CSS3

• Tab rollovers con CSS Sprites

PunyPNG es una herramienta gratuita que nos permitirá comprimir el tamaño de nuestras imágenes sin perder su calidad, reduciendo así el tiempo de carga de nuestras páginas. Soporta GIF, GIF animado, JPG, PNG. El tamaño máximo del archivo a comprimir es de 350 KB.

Vía | Kabytes

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Comprime ficheros CSS con PHP

• Conversor de tamaños de textos

• CSSDispatcher, maneja CSS más cómodamente

Existen muchas formas de crear bordes redondeados, la cuestión es dar con la idónea. Algunas veces no funcionan bien en Internet Explorer, otras enlentecen la carga del sitio… Como casi siempre, lo mejor es tener la mayor cantidad posible de información para poder comparar. En SmileyCat nos muestran una tabla con distintas técnicas para crear bordes redondeados, diferenciados entre los que requieren el uso de Javascript y los que únicamente utilizan CSS. La tabla se va actualizando, así que recomiendo mirarla cada cierto tiempo ya que al existir nuevas versiones en los navegadores web el código puede variar.

Quizás os puede interesar también otras formas expuestas en este blog para crear bordes redondeados, por ejemplo, usando CSS3 o CSS Sprites.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Bordes redondeados con CSS Sprites

• Bordes redondeados con CSS3 compatible con Internet Explorer

• Diferencia entre bordes redondeados con CSS2 y CSS3

La tecnología va evolucionando, y con ello la interfaz se hace cada vez más accesible e intuitiva de cara al usuario. Es necesario prestarle atención a la navegación de nuestro sitio si no queremos que el usuario se pierda y no encuentre la información que desea. Anteriormente os mostré una lista de sistemas de navegación para implementar en nuestro sitio u obtener mayor inspiración. En esta entrada quiero dejar claro la diferencia que existe entre la navegación antigua y la actual:

Old Navy

Old Navy: antes

Old Navy: ahora

Shopping.com

Shopping.com: antes

Shopping.com: ahora

Adobe

Adobe: antes

Adobe: ahora

Weather Channel

Weather Channel: antes

Weather Channel: ahora

REI

REI: antes

REI: ahora

Amazon

Amazon: antes

Amazon: ahora

Apple

Apple: antes

Apple: ahora

Google

Google: antes

Google: ahora

Netflix

Netflix: antes

Netflix: ahora

Expedia

Expedia: antes

Expedia: ahora

Walmart

Walmart: antes

Walmart: ahora

Pogo

Pogo: antes

Pogo: ahora

All Recipes

All Recipes: antes

All Recipes: ahora

Bank of America

Bank of America: antes

Bank of America: ahora (¡no ha cambiado nada!)

Buy.com

Buy.com: antes

Buy.com: ahora

Vía | SmileyCat

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• 15 métodos para crear menús de navegación

• 13 bonitos sitios web inspirados en iPhone y Mac

• 30 iconos de alta calidad para E-Commerce

Si está intentando obtener una estilo de tipografía creativo pero no te sale, prueba a echarle un vistazo a estos 33 diseños artísticos con la tipografía. Se muestra un variado rango de tratamientos con la tipografía que inspirarán a más de uno. Si clickáis en el enlace podéis ver cada diseño a tamaño completo:

Folk Love

PolkaCore

Belio Experiments

Typographic Illustration

Tongue Twisting Type

Crude

Waste Not. Want Not.

lyric portrait

I Love Typography

Fresh Style

Times- Type Factory

A Tribute to Yulia Brodskaya

Destructive Vintage

Beautiful Decay

Colorcubic Experimental Prints

Children of the idiom

Gold

Blackout

No Lies Just Love

tangerine

Type tips

PINK PARTY FLYER

Things Fall Apart

positive/negative

Brown Fox

“M” Typographied v.2

GMS 09 Type

Chanel 4 – 25th Anniversary Book

Typography

Desktop Battle with SELECT

Decogrunge Type Treatment

3D Type Experimentst

FATBRASS Typeface In Use

Vía | WDL

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Bonitos ejemplos sobre tipografía adornada con flores

• Bonitos ejemplos de grabado de tipografía en el diseño web

• 14 mejores herramientas de tipografía para diseñadores web

Si por alguna razón deseas ocultar alguna parte de la interfaz por defecto de Sharepoint, con Sharepoint CSS Builder puedes hacerlo. Es una la aplicación web con la que tan solo tendrás que desactivar las casillas que desees para ocultar las partes, desde una interfaz intuitiva.

Están organizadas por encabezado, cuerpo y otros. Al desactivar las casillas la aplicación web te mostrará el código CSS, con la clase de la parte que hemos desactivado unida a la propiedad y el valor display: none; para ocultarla.

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Crea menús en CSS online con CSS Builder

Border-radius es de las técnicas CSS3 que más están siendo usadas. Pero claro, esta propiedad CSS3 no está implementada aún en todos los navegadores, lo que hace que su visualización sea distinta dependiendo del navegador que estemos usando. En esta tabla que os mostraré a continuación se puede ver su compatibilidad con los navegadores Firefox 3.5.4, Safari 4.0.3, Chrome 3.0.195.24 y tu navegador, mostrando si el navegador está cumpliendo con las especificaciones estándares o no:

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Resultados de una encuesta sobre CSS3

• Test de propiedades CSS3 basadas en Webkit

• Varios trucos con CSS3

Ya os he hablado varias veces de los frameworks, en esta entrada os mostraré otro, se llama eCSStender y es un framework Javascript que nos permitirá optimizar nuestra hoja de estilo, además de simplificar el proceso pudiendo utilizar selectores CSS avanzados, como border-radius o @font-face, entre otros, pero una cosa que debo destacar es que funcionarán en Internet Explorer 6 (también puedes ver que selectores CSS avanzados puedes usar por ahora con este framework -a medida que pasa el tiempo va siendo más compatible-).

El framework pesa 16 KB y puede de ser descargado desde su página oficial:

Artículos relacionados

Puede que tengas interés por ver algunos de estos artículos muy relacionados con esta entrada:

• Baseline, Framework HTML5 + CSS3

• 11 técnicas clásicas de CSS creadas de forma fácil con CSS3

• Frameworks CSS y XHTML para desarrollar en iPhone