links for 2006-12-25
-
OpenID lets you log in to different sites without having to create a new username and password for each one. This screencast demonstrates OpenID in action.
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
Opera Developer Console es una herramienta realizada en Javascript que nos ayuda a inspeccionar y analizar durante el desarrollo o el debug diversos aspectos de las páginas web.
La herramienta dispone de varias pestañas que nos muestra la informacion sobre:
Una herramienta muy interesante, que parece estar al nivel de Firebug.
Using the Opera Developer Console
VÃa / Ajaxian