En 24 ways nos vuelven a regalar un buen artÃculo sobre cómo mostrar las hCard con estilos.
Claro, el diseño que han realizado quizás no se amolde al nuestro, pero la técnica que usan está bastante bien: usar una imagen de fondo y luego cuatro imágenes para cada esquina.
Styling hCards with CSS
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
No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco más. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquà tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.
También es curiosa la utilidad para crearnos nuestro favicon, aunque supongo que la gente que llega a este nivel, quizás si sepa usar un editor gráfico.
VÃa / dzone
Muchas de las técnicas para hacer hojas de estilo que permitan imprimir correctamente nuestra web producen una salida que no se parece en nada a lo que se muestra en pantalla. Esto suele confundir al usuario y le produce la impresión de que ha imprimido una pagina distinta.
En ErraticWidsom nos enseñan a hacer hojas de estilo para impresión mantiendo la lÃnea de diseño que se ve en pantalla.
VÃa / Digg
Los sitemaps no son algo que al desarrollador le suela preocupar, no se suele pensar en la importancia de ellos, tanto para el usuario como para los motores de búsqueda.
Para aquellos que quieran incluir el sitemap con un buen diseño puede usar este truco que hemos encontrado.
Podemos darle un estilo parecido si añadimos CSS al siguiente sitemap:
<div id="sitemap">
<ul>
<li>Web Root
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>Sin estilos serÃa asÃ:
Y para que quede como la imagen anterior deberÃa tener los siguientes estilos:
#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}VÃa / Posh CSS
These are way above and beyond the level of any other “CSS3 buttons” I’ve seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states… the list goes on. Every trick in the book masterfully employed.They make my buttons …
A pesar de apuntarse centenares de sitios, por segunda edición consecutiva el CSS Reboot sólo nos ha deparado apenas una veintena de diseños destacables. Entre hoy y mañana publicaremos en CSS Manía lo más destacable. Dicho esto, siempre son bienvenidas este tipo de iniciativas.
Nuestros favoritos sin ningún orden en particular: