Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Diseño al estilo de Pinterest sólo con columnas CSS

19 mayo, 2012
en CSS
1
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

Si has visto pinterest, que cuenta con una interfaz multi-columna para mostrar las imágenes muy bien, incluso si no son de la misma altura. Lo hacen mediante el uso de javascript para calcular la altura de cada columna y luego colocándolos con posición absoluta. Podemos lograr esto mismo con CSS y se puede hacer de dos maneras:

  • Utilizando Float: podemos utilizar float pero solamente si todas las columnas tiene la misma altura, de lo contraria tendremos huecos por todos las partes
  • Utilizando CSS3: este es lo que tenemos que utililzar y que explicaremos abajo.

Esta técnica es creada originalmente por pixleight y modificada un poco por cssdeck para que se vea y funcione mucho mejor. He aquí una cita de la creación original de cómo se hace.

</pre>
<div id="columns">
<div class="pin"><img src="http://placekitten.com/400/300" alt="PlaceKitten" />

Jean shorts street art flexitarian ...</div>
<div class="pin"><img src="http://placekitten.com/g/400/300" alt="PlaceKitten" />

Leggings pour-over banksy, DIY wolf tattooed ...</div>
<div class="pin"><img src="http://placekitten.com/500/450" alt="PlaceKitten" />

Put a bird on it viral wolf, 3 wolf moon ...</div>
<!-- and so on ...  --></div>
<pre>

Los estilos CSS son:

#columns {
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}

.pin {
	-moz-column-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	column-break-inside: avoid;
	display: inline-block;
	margin: 0 2px 15px;
	padding: 15px;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	background: #FEFEFE;
	background-image: linear-gradient(45deg, #FFF, #F9F9F9);
}

Como puedes ver utilizar [highlight]colum-count: 3;[/highlight] en #columns para contar las columnas que utiliza (en este ejemplo son 3). Despues añade [highlight]column-break-inside: avoid;[/highlight] a la clase «pin» para evitar que fluya de una columna a la siguiente (detalles) obligando a que el contenido esté en una sola columna. Además debe de incluir los prefijos -moz y -webkit para los navegadores, [highlight]-moz-column-break-inside: avoid;[/highlight] [highlight] -webkit-column-break-inside: avoid;[/highlight] Se pueden ajustar el número de columnas dependiendo de la anchura del navegador

@media all and (min-width: 960px) {
   #columns {
      column-count: 4;
      }
}
@media all and (min-width: 1170px) {
   #columns {
      column-count: 5;
      }
}

Ver ejemplo funcionando

Esto no funciona con Internet Explorer 9 ni versiones anteriores. Puedes estudir el código fuente del ejemplo y probar como funciona.

Etiquetas: cssPinterest
ANUNCIO
Post anterior

La importancia del contenido de una web

Próximo Post

Gradiente lineales con CSS3. Degradados con colores

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Por favor logueate para comentar

Recomendados

SEO Básico: SEO off page

Cómo conseguir un buen presupuesto para el posicionamiento SEO de tu web

20 febrero, 2020
Como acceder a la administración de WordPress

Desactivar actualizaciones de pluging y temas en WordPress

19 abril, 2017
La impresionante obra de Fredrik Ödman

La impresionante obra de Fredrik Ödman

4 abril, 2012
Construcción de enlaces

SEO Básico: Construcción de enlaces (link building)

30 enero, 2020

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .