Cómo crear un logotipo de fuente RSS con CSS3
El logotipo de RSS feed es uno de los logotipos más utilizados en diseño web, debido a la función a la que hace referencia. Usted vio muchos tutoriales sobre cómo dibujar el logotipo de la fuente RSS utilizando software gráfico como Photoshop, pero ¿qué tal? dibujando puramente usando CSS3? Sí, me escuchaste :-)
En esta oportunidad, me gustaría mostrarle la manera fácil de crear un logotipo de fuente RSS estándar solo con CSS3, así que siga el tutorial con pasos y gráficos completos para obtener su primer logotipo de fuente CSS3!
Aquí hay una vista previa de lo que vas a crear en un minuto. También puede descargar los archivos de origen al final del tutorial..
Paso 1
Cree un archivo HTML, inserte el siguiente código en el archivo si está completamente vacío.
Mi primer CSS3 RSS Feed Logo - Inserte su HTML aquí -
Paso 2
Inserte el código siguiente en el archivo HTML para crear un cuadro de fuente.
HTML para el cuadro de alimentación
CSS para el cuadro de alimentación
span.feed-box display: block; ancho: 200px; altura: 200px; margen: 0 auto; fondo: # F9A004; 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-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: derecha; bloqueo de pantalla;
Este es el resultado que lograrás:
Paso 3
Dibujaremos otro cuadro que se encuentra dentro del primer cuadro de información, por lo tanto, coloque el siguiente código HTML en el código HTML del primer cuadro de información. También añadiremos borde como barrera aquí..
HTML para una caja de alimentación más pequeña
CSS para caja de alimentación más pequeña
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ás:
Etapa 4
En este paso vamos a hacer 1/4 gran círculo. Coloque el código HTML de 1/4 círculo grande en el código HTML de la caja 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 margin: 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ás:
Paso 5
Ahora haremos el círculo pequeño de 1/4, coloque 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 círculo pequeño
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; ancho: 176px; altura: 176px; borde: 26px sólido # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; radio del borde: 176px
Este es el resultado que lograrás:
Paso 6
En el paso 6, el círculo más pequeño se creará dentro del círculo pequeño, por lo tanto, 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ás:
Toque final
Buscar el codigo, / * desbordamiento: oculto; * / entonces reemplaza con este código, desbordamiento: oculto;, ¡entonces sí! Acabas de conseguir un logotipo de CSS3 RSS Feed!
Bono: Añadir efecto de desplazamiento
No querrás el logotipo de tu fuente RSS sin un efecto de desplazamiento mágico, ¿verdad? Solo agrega el estilo CSS abajo para lograrlo!
CSS para Hover Effect
span.feed-box: hover background: # 07C103; 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; -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: flotar .feed-box-in .feed-quarter-circle-big, span.feed-box: flotar .feed-box-in .feed-quarter-circle-big .feed-quarter-circle -small border-color: # B9FFB7; span.feed-box: flotar .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 de CSS3 en varios tamaños y un estilo diferente. Si no puede lograr cierto paso, también puede descargar los archivos de origen..
- Vista previa CSS3 RSS logo (grande)
- Vista previa CSS3 RSS logo (medio)
- Vista previa CSS3 RSS logo (pequeña)
- Vista previa CSS3 RSS logo (medio, invertido)
- Descargar archivos fuente de CSS3 RSS Logo (.cremallera)
Nota del editor: Esta publicación está escrita por Irham Kendeni para Hongkiat.com. Irham, también conocido como Indaam, es un diseñador y desarrollador web de Indonesia. También le encanta el desarrollo de temas CSS y WordPress..
