Hace unos días vimos cómo generar utilizando solamente CSS, el icono del sobre, representativo del correo o e-mail.
Ahora veamos cómo hacerlo con el ícono RSS.
Con el siguiente código podrás conseguir el icono, y podrás utilizarlo como botón o para decorar solamente. Lo malo de generar el icono es que no es fácil cambiar de tamaño, si necesitas hacerlo habrá muchos valores con los cuales tener que cambiar.
Para no quedarme con todo el crédito, el icono lo encontré en Oloblogger. Al principio, cuando ví en la barra lateral los botones sociales, creí que se trataban de imágenes, pero en un post de Oloman declaró que eran puro CSS. Para no quedarme con la duda, inspeccioné un poco los estilos de su plantilla y encontré la ingeniosa manera de crear el icono RSS.
Para usar el icono como botón a tu feed, encierra el código HTML entre las etiquetas:
Nos vemos la próxima. :)
Ahora veamos cómo hacerlo con el ícono RSS.
Con el siguiente código podrás conseguir el icono, y podrás utilizarlo como botón o para decorar solamente. Lo malo de generar el icono es que no es fácil cambiar de tamaño, si necesitas hacerlo habrá muchos valores con los cuales tener que cambiar.
HTML
<div class="icono-rss"></div>
CSS
.icono-rss { width: 40px; /* Ancho del icono */ height: 40px; /* Alto del icono */ box-sizing: border-box; background: #FD7527; /* Fondo del icono */ border: 1px solid #FF5D00; /* Borde del icono */ border-radius: 5px; /* Bordes redondos */ position: relative; box-shadow: inset 0 15px 10px -8px #FF9356, 0 2px 3px -1px rgba(0,0,0,.2); /* Sombras */ } .icono-rss:before, .icono-rss:after { display: block; content: ""; position: absolute; bottom: 5px; left: 5px; } .icono-rss:before { /* El círculo blanco */ width: 8px; /* Alto */ height: 8px; /* Ancho */ background: white; /* Color */ border-radius: 100%; } .icono-rss:after { /* Los dos arcos blancos */ width: 12px; /* Ancho, debe ser mayor al ancho de circulo */ height: 12px; /* Alto, debe ser mayor a alto del circulo */ border-style: double; border-width: 16px 16px 0 0; /* Ancho de los arcos */ border-color: white; /* Color de los arcos */ border-radius: 0 25px 0 0; /* */ }
Para no quedarme con todo el crédito, el icono lo encontré en Oloblogger. Al principio, cuando ví en la barra lateral los botones sociales, creí que se trataban de imágenes, pero en un post de Oloman declaró que eran puro CSS. Para no quedarme con la duda, inspeccioné un poco los estilos de su plantilla y encontré la ingeniosa manera de crear el icono RSS.
Para usar el icono como botón a tu feed, encierra el código HTML entre las etiquetas:
<a href='URL-DE-FEED'>Código</a>
Nos vemos la próxima. :)
Comentarios
Publicar un comentario