Recientemente estaba rediseñando mi propio sitio de blog y decidí usar un icono de estilo calendario para mostrar la hora. La solución anterior generalmente era usar imágenes de fondo. Gracias a CSS3, ahora podemos implementar tales funciones utilizando CSS3. Usaré algunas propiedades, como gradientes lineales, radio de borde y sombra de caja para reemplazar el diseño anterior de Photoshop.
Diagrama de concepto de PhotoshopMuchos diseñadores usan el método de diseño directamente en el navegador, pero aún prefiero el método para hacer primero los diagramas conceptuales de Photoshop. Aunque ahora se pueden implementar directamente muchos efectos con CSS, la forma de diseñar efectos con Photoshop es mucho más simple que la forma de tratar constantemente de modificar CSS para finalmente lograr el efecto que desea.
Primero cree un rectángulo redondeado y coloque el radio de esquina redondeado en 10 px. Después de eso, utilizaremos la propiedad Border-Radius de CSS.
Agregue un gradiente vertical al rectángulo, el color de gradiente es de #DAD8D8 a #FCFCFC.
Establezca una carrera de 1 píxel, el color es #E3E3E3
Finalmente, agregue un efecto de sombra hacia abajo con una transparencia del 20%, una distancia de 0 píxeles y un tamaño de 15 píxeles. Estos efectos se implementarán en CSS utilizando la propiedad de Shadow de caja.
Copie el rectángulo ahora y retire la parte superior. Modifique el gradiente, el color de #790909 a #D40000, llene el rectángulo recién creado, que colocará la información del mes.
Establezca una sombra interna para representar el borde superior, el color es #A13838, 100% de transparencia, distancia de 3 px y tamaño 0px.
Use la herramienta de fuente de Photoshop para establecer el efecto de fuente de la primera mitad del icono del calendario. La fuente es Helvetica y el color es #9E9E9E.
Ingrese la información de mes en la sección roja a continuación, configure la fuente en ancho y el color en blanco.
Se completa el modelo de Photoshop. En el pasado, sacamos la imagen como el fondo y escribíamos los números HTML en él, pero ahora todo esto se puede lograr con CSS.
Estructura html<Div class = date>
<p> 25 <span> may </span> </p>
</div>
Esta vez, el HTML de icono de demostración es muy simple. Usaremos un DIV con la clase 'Fecha' como el contenedor, y luego usaremos una etiqueta P para representar el número de fecha. Los días y los meses están representados por diferentes tamaños en nuestro diseño, por lo que usaremos etiquetas <span> para tratar diferentes elementos de manera diferente.
estilo CSS.fecha {
Ancho: 130px; Altura: 160px;
Antecedentes: #fcfcfc;
Antecedentes: gradiente lineal (superior, #FCFCFC 0%, #DAD8D8 100%);
Antecedentes: -Moz-Lineal-Dinter (arriba, #FCFCFC 0%, #DAD8D8 100%);
Antecedentes: -webkit-lineal-gradiente (arriba, #FCFCFC 0%, #DAD8D8 100%);
}
El estilo CSS primero establece la altura y el ancho de todo el contenedor, y el efecto de gradiente se puede lograr fácilmente a través del gradiente CSS.
.fecha {
Ancho: 130px; Altura: 160px;
Antecedentes: #fcfcfc;
Antecedentes: gradiente lineal (superior, #FCFCFC 0%, #DAD8D8 100%);
Antecedentes: -Moz-Lineal-Dinter (arriba, #FCFCFC 0%, #DAD8D8 100%);
Antecedentes: -webkit-lineal-gradiente (arriba, #FCFCFC 0%, #DAD8D8 100%);
borde: 1px sólido #d2d2d2;
Border-Radius: 10px;
-Moz-Border-Radius: 10px;
-WebKit-Border-Radius: 10px;
}
Use el atributo de borde para lograr el efecto de borde de 1px en Photoshop, y luego use el radio fronterizo para lograr el efecto de esquina redondeado. No olvide agregar prefijos -webkit -webkit para habilitar la compatibilidad con los navegadores más antiguos.
.fecha {
Ancho: 130px; Altura: 160px;
Antecedentes: #fcfcfc;
Antecedentes: gradiente lineal (superior, #FCFCFC 0%, #DAD8D8 100%);
Antecedentes: -Moz-Lineal-Dinter (arriba, #FCFCFC 0%, #DAD8D8 100%);
Antecedentes: -webkit-lineal-gradiente (arriba, #FCFCFC 0%, #DAD8D8 100%);
borde: 1px sólido #d2d2d2;
Border-Radius: 10px;
-Moz-Border-Radius: 10px;
-WebKit-Border-Radius: 10px;
Shadow de caja: 0px 0px 15px RGBA (0,0,0,0.1);
-Moz-box-shadow: 0px 0px 15px RGBA (0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba (0,0,0,0.1);
}
La última parte del código es lograr el efecto de sombra más bajo en el diseño de Photoshop a través de la sombra de caja. Agregue 0PX compensaciones horizontales y verticales para aumentar la ambigüedad de 15px. Use RGBA para controlar la transparencia. En el diseño de Photoshop, 105 se reemplaza por 0.1 aquí.
.Date P {
Font-Family: Helvetica, Sans-Serif;
tamaño de fuente: 100px; Text-Align: Center; Color: #9e9e9e;
}
Usamos la etiqueta P para definir estilos para definir estilos de texto para fechas. La fuente, el tamaño del texto y el color de texto se copian de Photoshop, y el alineado de texto se establece en el centro. Pero el estilo también afecta el texto del mes, y definiremos el estilo de la etiqueta del tramo para él por separado.
.date p span {
Antecedentes: #D10000;
Antecedentes: gradiente lineal (arriba, #D10000 0%, #7A0909 100%);
Antecedentes: -Moz-Lineal-Gradient (arriba, #D10000 0%, #7A0909 100%);
Antecedentes: -webkit-lineal-gradiente (arriba, #D10000 0%, #7A0909 100%);
}
La implementación de la parte roja se logra estableciendo el atributo de gradiente lineal para el fondo del tramo, y el valor rojo también proviene de Photoshop.
.date p span {
Antecedentes: #D10000;
Antecedentes: gradiente lineal (arriba, #D10000 0%, #7A0909 100%);
Antecedentes: -Moz-Lineal-Gradient (arriba, #D10000 0%, #7A0909 100%);
Antecedentes: -webkit-lineal-gradiente (arriba, #D10000 0%, #7A0909 100%);
tamaño de fuente: 45px; Font-Weight: Bold; Color: #ffff; Texto-transformación: upcase;
Pantalla: bloque;
}
Modifique el estilo de texto para que coincida con el diseño, establezca el tamaño en 45px, configúrelo en negrita, configure el color en blanco y use la transformación de texto para implementar la conversión de capital. Establezca la etiqueta SPAN en el elemento de bloque para que coincida con el tamaño del contenedor y establezca un fondo rojo.
.date p span {
Antecedentes: #D10000;
Antecedentes: gradiente lineal (arriba, #D10000 0%, #7A0909 100%);
Antecedentes: -Moz-Lineal-Gradient (arriba, #D10000 0%, #7A0909 100%);
Antecedentes: -webkit-lineal-gradiente (arriba, #D10000 0%, #7A0909 100%);
tamaño de fuente: 45px; Font-Weight: Bold; Color: #ffff; Texto-transformación: upcase;
Pantalla: bloque;
Border-Top: 3px Solid #A13838;
Border-Radius: 0 0 10px 10px;
-Moz-Border-Radius: 0 0 10px 10px;
-WebKit-Border-Radius: 0 0 10px 10px;
relleno: 6px 0 6px 0;
}
El resto es agregar el borde de la cabeza, usar el estilo de la cima del borde para implementarlo y usar el atributo de radio fronterizo para implementar las dos esquinas redondeadas en la parte inferior. Un pequeño atributo de relleno puede hacer que el texto del mes tenga un espacio entre arriba y hacia abajo y otros elementos.
Compatibilidad del navegadorAunque las propiedades mejoradas de CSS pueden ayudarnos a lograr los efectos de los gradientes y las sombras en Photoshop, todavía tenemos que enfrentar los problemas que los diseñadores web tuvieron que enfrentar en el pasado, la compatibilidad del navegador.