background-image: ese gran aliado

Un factor importante a la hora de diseñar nuestra web es el background. Yo siempre opto por un color sólido, pero es cierto que a veces queda mejor un pequeño pattern con una imagen simple. El efecto queda perfecto: imagen de poco tamaño, totalmente personalizable, acorde con el css de nuestro layout, y totalmente compatible con cualquier navegador.

¿Cómo puedo conseguir un pattern atractivo sin necesidad de volverme loco con Photoshop?, fácil, visitando AVA7 Patterns, una magnífica web que pone a nuestra disposición cientos y cientos de formas de crear nuestro patrón.

Espero que también os guste :)

Anuncios

¿Necesitas inspiración?

Es cierto que a la hora de diseñar un formulario, un layout, un header, y un larguísimo etc. para cualquiera de nuestros proyectos necesitamos inspirarnos en algo para poder encontrar ese diseño sólido que andamos buscando.

Durante muchos años, páginas como cssmania o csszendgarden han sido motivo de visita obligada para conseguir ese toque final que andamos buscando, pero existe algo más concreto en la red? es decir, y si necesito diseñar una página 404 para mi web?

Os presento PatternTap.com

Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the one stop pattern shop for your next inspiration need.

Sin duda una de mis web favoritas y de asistencia obligada en mis marcadores. Desde aquí se puede conseguir muchísima inspiración en múltiples de sets de diseños. Formularios, navegaciones, cabeceras, layouts, comentarios, listas, subnavegación, y un maravilloso etc. que nos ayudarán a conseguir ese diseño que tanto vamos buscando.

Espero que os guste :)

Rotar capas con css

Este es un ejercicio sencillo para lograr la rotación de una capa. Podéis ver un ejemplo pulsando aquí

<style>

	* {
		margin: 0;
		padding: 0;
		text-align: center;
	}

	#header {
		width: 100%;
		height: 300px;
		background-color: #000000;
		z-index: 10;
	}
	
	#main {
		width: 900px;
		height: 500px;
		margin: -178 auto;
		z-index: 100;
	}
	
	#main .block-left {
		float: left;
		margin-top: 40px;
		margin-right: 30px;
	}
	
	#main .block-right {
		float: right;
		width: 395px;
		font-size: 14px;
		margin-top: 190px;
	}
	
	#main .block-right p {
		text-align: right;
	}
	
	#main .block-left .mapa {
		-moz-transform: rotate(-10deg);
		background-color: #FFFFFF;
		border: 4px solid #FFFFFF;
		box-shadow: 0 0 5px 3px #999999;
		height: 275px;
		margin-top: 45px;
		width: 464px;
	}

</style>

Una vez declarados los estilos, tan solo nos queda diseñar el html para ver los resultados

<div id="header"></div>
<div id="main">
	<div class="block-left">
		<div class="mapa">
                      <iframe width="464" height="275" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=espa%C3%B1a,+sevilla,+plaza+de+espa%C3%B1a&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=53.477264,114.169922&amp;ie=UTF8&amp;hq=espa%C3%B1a,+sevilla,+plaza+de+espa%C3%B1a&amp;t=h&amp;ll=37.377334,-5.986267&amp;spn=0.006295,0.006295&amp;output=embed"></iframe>
		</div>
	</div>
	<div class="block-right">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue laoreet augue et consequat. Pellentesque hendrerit nulla eu turpis tincidunt fringilla. Phasellus a tempus massa. Donec sed congue dolor. Aenean eget ligula est, a luctus tellus. Nunc pharetra dui ultricies sapien suscipit at cursus arcu interdum.</p>
	</div>
</div>

El único inconveniente es que solo funciona para firefox, pero para seguir con la tónica de ejercicios nos sirve.

Colores y más colores

A la hora de diseñar un boceto web, lo más importante es dar con esa gama de colores que identifica al cliente. Muchos tenemos suerte porque el cliente tiene un buen manual de imagen corporativa y eso nos ahorra mucho trabajo y nos facilita la tarea, pero es cierto que la mayoría de los clientes no saben lo que quieren y esperan que tú como diseñador les digas exactamente qué necesitan.

Os presento 0to255.com

0to255.com


En esta web se nos presenta una magnífica utilidad gráfica para poder ver todo el desarrollo de un color que especifiquemos. Recuerdo cuando trabajaba en Cajasol que mi amigo Jose tenía siempre encima de su mesa una pantonera gigante como arma de trabajo, y eso me gustaba, porque tenía un amplio abanico de colores y siempre sabía cuál utilizar exactamente.

Para mí esto es prácticamente igual. Fácil de usar, cómodo, y muy dinámico, ya que haciendo click sobre el color que nos guste, se copia el código hexadecimal para poder pegarlo directamente en la hoja de estilos.

Para mí, una herramienta imprescindible a la hora de diseñar. Espero que os sirva de la misma ayuda como me está sirviendo a mí.

Fuente 0to255.com

CSS – Rodear una imagen con texto

La verdad es que es un efecto bastante sencillito y que da muy buenos resultados. El ejemplo claro sería un periódico, donde podemos observar como el texto rodea a la imagen.

 Si ponemos una imagen y después el texto, nos quedaría algo como esto:

Dejandomarcas.com

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

 El truco para que la imagen se quede rodeada por el texto es añadirle el estilo float y después la posición (left en este caso):

Dejandomarcas.comLorem ipsum  sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

 De esta manera, ya tenemos la posición correcta. Tan solo habría que retocar los márgenes o el padding para dejarlo totalmente justificado.

El código final de la imagen es:

<img src=http://www.dejandomarcas.com/imagenes/logo_gif.gifborder=”0″ alt=”Dejandomarcas.com” style=”float:left” />

Un saludo!

A %d blogueros les gusta esto: