Crear azulejos estilo metro con Pure HTML/CSS-metroStyles. CSS

Vista prévia

Descripción

metroStyles. CSS es una pequeña biblioteca de CSS para crear un menú de mosaico de estilo metro de Windows 10 con HTML y CSS sin formato.

Funcionamiento

Importe la hoja de estilos necesaria ' metroStyles. css ' en el documento HTML.

<link rel="stylesheet" href="assets/metroStyles.css">

La estructura HTML para el menú en mosaico.

<div class="container">

<div class="grid">


<a href="#" class="btn1"><img src="assets/icons/contact.svg" alt="mail"></a>


<a href="#" class="btn2"><img src="assets/icons/gallery.svg" alt="gallery"></a>


<a href="#" class="btn3"><img src="assets/icons/calendar.svg" alt="calender"></a>


<a href="#" class="btn4"><img src="assets/icons/list.svg" alt="list"></a>


<a href="#" class="btn5"><img src="assets/icons/multiple-users-silhouette.svg" alt="contacts"></a>


<a href="#" class="btn6"><img src="assets/icons/play-button.svg" alt="play"></a>


<a href="#" class="btn7"><img src="assets/icons/picture-gallery.svg" alt="gallery"></a>


<a href="#" class="btn8"><img src="assets/icons/video-player.svg" alt="videoplay"></a>


<a href="#" class="btn9"><img src="assets/icons/users.svg" alt="users"></a>


<a href="#" class="btn10"><img src="assets/icons/settings.svg" alt="settings"></a>


<a href="#" class="btn11"><img src="assets/icons/twitter.svg" alt="twitter"></a>


<a href="#" class="btn12"><img src="assets/icons/vimeo.svg" alt="viemo"></a>


<a href="#" class="btn13"><img src="assets/icons/youtube.svg" alt="youtube"></a>


<a href="#" class="btn14"><img src="assets/icons/facebook.svg" alt="facebook"></a>


<a href="#" class="btn15"><img src="assets/icons/instagram.svg" alt="instagram"></a>


<a href="#" class="btn16"><img src="assets/icons/linkedin.svg" alt="linkedin"></a>

</div>
</div>