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

Prestashop Google Tag Manager tutorialmonsters.com

Cómo Integrar Google Tag Manager en Prestashop

9 marzo, 2019
Guía práctica: Construcción de enlaces en 6 sencillos pasos

Guía práctica: Construcción de enlaces en 6 sencillos pasos

18 agosto, 2021
www

¿Cómo influye el nombre de un dominio en el SEO?

23 octubre, 2021
Cómo limpiar tu biblioteca de Medios en WordPress

Cómo limpiar tu biblioteca de Medios en WordPress

9 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 .