links for 2006-12-06

ByLuis

Similar Posts

Librería Javascript para Facebook Connect

ByLuis

Mμ Connect es una librería Javascript muy ligera que permite utilizar Facebook Connect desde tu web y pudiendo usar tus frameworks favoritos: Dojo, jQuery, MooTools, Prototype o YUI.

Entre otras acciones nos permite loguearnos, desloguearnos, leer y escribir y añadir amigos.

Mμ Connect

Vía / WebAppers

|

CSS grid: filas con misma altura

ByLuis

Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.

Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:

.grid {
  margin: 0 auto;
  width: 60vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  grid-auto-rows: auto;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid--same-height .cell {
  position: relative;
}
.grid--same-height .cell::before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.grid--same-height .content {
  height: 100%;
  position: absolute;
  margin-top: -100%;
}

Teniendo en cuenta que el HTML sería:

<div id="grid" class="grid">
  <div class="cell">
    <div class="content">
      <img src="https://picsum.photos/500/500"/>
    </div>
  </div>
  ...
</div>

Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.

Podéis ver un ejemplo en este pen

links for 2006-12-12

ByLuis
  • Deshabilitar el toolbar que pone IE 6 sobre las imágenes
    Si no sabes/sabías -como yo- como desactivar el toolbar que aparece -al poner el mouse- sobre las imágenes en Internet Explorer, continúa con la lectura de esta entrada
    (tags: ie)
  • Infected-FX » Colour lovers
    Una idea similar a la de Color Schemer puedes encontrar una buena cantidad de gamas de colores, puedes votarlas, comentarlas, además de encontrar noticias relacionadas y entrevistas como a Eric Jordan de 2advanced.
    (tags: colores)
  • CSSType | MM
    Perfeccionistas de las fuentes, CSSType os ayuda. Es una herramienta sencilla pero bastante curiosa donde introduciendo el texto que quieras podras cambiarle todas las propiedades que se le pueden añadir a las fuentes mediante CSS y a la vez ir viendo el
    (tags: css typography csstype free)
  • Clicky, estadísticas para blogs | Online
    Serían unas estadísticas normales y corrientes si no fuera por la opción de utilizar filtros para buscar datos concretos, además, también dispone de un exit tracking, para saber por donde se van tus usuarios…
    (tags: stats internet web2.0 blogs)
  • Carta a los reyes magos: Google | Com
    ¿Qué mejoras pediríamos a Google?… Que actualice mas seguido sus indices, que la busqueda ahi sea como buscar en technorati, Una herramienta de palabras clave, similar a la de Overture…
    (tags: google internet search)
  • Tipología de sitios web | TISCAR
    La revista Mosaic de la UOC publica un interesante artículo de Gemma Ferreres donde aborda la tipología de los sitios webs. La clasificación va desde las páginas corporativas y los catálogos de producto hasta los wikis o la última tendencia en aplic
    (tags: usabilidad internet estudios AI)

links for 2007-01-19

ByLuis