Cómo crear un logotipo de fuente RSS con CSS3

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.

El logotipo de RSS es uno de los logotipos más utilizados en diseño web, debido a la función a la que se refiere. Viste muchos tutoriales sobre cómo dibujar el logotipo de la fuente RSS con un software gráfico como Photoshop, pero ¿qué tal si lo dibujas simplemente con CSS3 ? Yeap, me escuchaste :-)

En esta oportunidad, me gustaría mostrarle la manera fácil de crear un logotipo de alimentación RSS estándar con solo CSS3, así que siga el tutorial con pasos y gráficos completos para obtener su primer logotipo de alimentación CSS3.

Aquí hay una vista previa de lo que crearás en un minuto. También puede descargar los archivos fuente al final del tutorial.

Paso 1

Cree un archivo HTML, inserte el siguiente código en el archivo si está completamente vacío.

 - Inserta tu HTML aquí - 

Paso 2

Inserta el código a continuación en el archivo HTML para crear un cuadro de feed.

HTML para el cuadro de alimentación

CSS para el cuadro de alimentación

 span.feed-box {display: bloque; ancho: 200px; altura: 200px; margen: 0 auto; fondo: # F9A004; caja-sombra: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-border-radius: 20px; -webkit-border-radius: 20px; radio del borde: 20px; } span.feed-box * {float: right; bloqueo de pantalla; } 

Este es el resultado que logrará:

Paso 3

Dibujaremos otro cuadro que se encuentra dentro del primer cuadro de feed, por lo tanto, coloque el código HTML a continuación en el código HTML del primer cuadro de feed. También agregaremos borde como barrera aquí.

HTML para una caja de alimentación más pequeña

CSS para un cuadro de feed más pequeño

 span.feed-box .feed-box-in {border: 4px solid # FFC563; ancho: 184px; altura: 184px; margen: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; radio del borde: 20px; / * desbordamiento: oculto; * /} 

Este es el resultado que logrará:

Etapa 4

En este paso vamos a hacer 1/4 gran círculo. Coloque el código HTML de 1/4 de círculo grande en el código HTML de la casilla de alimentación más pequeña, y debajo está su código:

HTML para 1/4 Big Circle

CSS para 1/4 Big Circle

 span.feed-box .feed-box-in .feed-quarter-circle-big {margen: 16px 16px 0 0; ancho: 260px; altura: 260px; borde: 30px sólido # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; radio del borde: 260px; } 

Este es el resultado que logrará:

Paso 5

Haremos el círculo pequeño de 1/4 ahora, colocamos el código HTML a continuación en el código HTML del círculo grande.

HTML para 1/4 Círculo pequeño

CSS para 1/4 Pequeño círculo

 span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small {margen: 16px 16px 0 0; ancho: 176px; altura: 176px; borde: 26px sólido # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; border-radius: 176px} 

Este es el resultado que logrará:

Paso 6

En el paso 6, se creará el círculo más pequeño dentro del círculo pequeño, así que coloque su código HTML en el código HTML del círculo pequeño.

HTML para el círculo más pequeño

CSS para el círculo más pequeño

 span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle {margen: 24px 24px 0 0; fondo: # FFDEA5; ancho: 70px; altura: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; radio del borde: 70px} 

Este es el resultado que logrará:

Toque final

Busque el código, /* overflow: hidden; */ /* overflow: hidden; */ luego reemplazar con este código, overflow: hidden;, ¡entonces sí! ¡Acabas de obtener un logotipo de CSS3 RSS Feed!

Bonificación: Agregar efecto de desplazamiento

No querrás el logotipo de tu feed RSS sin un efecto mágico, ¿verdad? ¡Solo agrega el estilo CSS a continuación para lograrlo!

CSS para Efecto Hover

 span.feed-box: hover {background: # 07C103; caja-sombra: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; } span.feed-box: hover .feed-box-in {border-color: # 58FC55; } span.feed-box: hover .feed-box-in .feed-quarter-circle-big, span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle -pequeño {border-color: # B9FFB7; } span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle {background: # B9FFB7; } 

Vistas previas y descargas

Aquí hay vistas previas del logotipo de alimentación CSS3 en diferentes tamaños y un estilo diferente. Si no puede lograr cierto paso, también puede descargar los archivos fuente.

• Vista previa del logotipo de CSS3 RSS (grande)
• Vista previa del logotipo de CSS3 RSS (medio)
• Vista previa del logotipo de CSS3 RSS (pequeño)
• Vista previa del logotipo de CSS3 RSS (medio, invertido)
• Descargue los archivos fuente de CSS3 RSS Logo (.zip)

Nota del editor: esta publicación fue escrita por Irham Kendeni para Hongkiat.com. Irham, también conocido como Indaam, es un diseñador y desarrollador web de Indonesia. También ama el desarrollo de temas de CSS y WordPress. Visite el sitio web de Indaam.

La máquina Steam de Valve: todo lo que necesita saber

Cuando se trata del duelo de juegos de PC vs juegos de consola, los juegos de PC siempre se han jugado en un escritorio con una pequeña pantalla controlada por un mouse y teclado, mientras que las consolas de juegos tienen controladores y se reproducen en la televisión de su sala de estar. Bueno, la máquina Steam de Valve está cambiando todo eso.Ste

(Consejos de tecnología y diseño)

Este ataque de phishing de Gmail se ve extremadamente real

Los phishers se están volviendo creativos en estos días ya que hay informes de ciertos ataques de phishing que funcionan a través de una página de inicio de sesión de Gmail falsa.Según el informe, el atacante primero pondría en peligro una cuenta de Gmail . Desde allí, enviarían un archivo adjunto de imagen que se disfraza como un archivo PDF a las direcciones de correo electrónico que se pueden encontrar en la cuenta comprometida.Si el des

(Consejos de tecnología y diseño)