CSS 3 + HTML 5 son el futuro de la Web. Aún no han llegado oficialmente, aunque muchos navegadores han comenzado a brindarles soporte parcial. Este artículo presenta 5 técnicas CSS3 que pueden ayudarlo a lograr el futuro de la Web. Actualmente, estas técnicas no deben usarse en proyectos formales de clientes; son más adecuadas para su blog personal, la comunidad de diseño web o situaciones en las que no tendrá clientes quejándose.
1. Efecto de esquinas redondeadas
Una de las nuevas características más utilizadas de CSS3 es el efecto de esquinas redondeadas. El objeto cuadrado HTML estándar tiene esquinas cuadradas de 90 grados. CSS3 puede ayudarle a lograr esquinas redondeadas.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Incluso se puede redondear una sola esquina, pero la sintaxis de Mozilla y Webkit es ligeramente diferente.
-moz-border-radius-topleft: 20px;
-moz-border
-radius-topright: 20px;
-moz-border-radius-bottomleft
: 10px; -moz-border-radius-bottomright: 10px;
-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px
; -webkit-border-bottom-rightright-radius: 10px
; Firefox, Safari, Chrome
2. Bordes gráficos
Como sugiere el nombre, el borde gráfico es el borde que permite el uso de imágenes como objetos. La sintaxis es la siguiente:
borde: 5px solid #cccccc
-webkit-border-image: url(/images/border-image.png; ) 5 repetir;
-moz-border- imagen: url(/images/border-image.png) 5 repetir;
border-image: url(/images/border-image.png) 5 repetir
Aquí, border: 5px establece el ancho del borde, y luego, cada La definición de la imagen del borde le dice al navegador qué parte de la imagen usar como borde. La imagen del borde también se puede configurar individualmente para cada borde:
borde-inferior-derecho-imagen-derecha
borde-imagen-inferior
borde-imagen-inferior-izquierdo
borde-imagen-izquierdo
borde-borde-imagen-superior-izquierdo
-borde
-imagen-superior-
top -rightright-image
border-right-image
Navegadores compatibles: Firefox 3.1, Safari, Chrome
3. Bloquear sombra y sombra de texto
.
Los efectos de sombra alguna vez fueron algo que los diseñadores web amaban y odiaban. Ahora, con CSS3, ya no necesitas Photoshop. Ya existen sitios web que utilizan esta función, como el sitio web de 24 Ways
-webkit-box-shadow: 10px 10px 25px #ccc.
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
Las dos primeras propiedades establecen el desplazamiento X/Y de la sombra, aquí son 10px, y la tercera propiedad define el desenfoque de el Grado de sombra, el último establece el color de la sombra. La sombra del texto también se puede configurar de esta manera:
text-shadow: 2px 2px 5px #ccc;
Navegadores compatibles: Firefox 3.1, Safari, Chrome (solo admite Box Shadow), Opera (solo admite sombra de texto). verde El último valor de los tres colores azules representa la transparencia. Además, también podemos usar la opacidad para lograr transparencia (actualmente, esta técnica se usa principalmente para efectos de caja de luz - Traductor)
4. Use RGBA para lograr efectos de transparencia.
En la actualidad, el efecto de transparencia en el diseño web se logra principalmente mediante imágenes PNG (pero no es compatible con el traductor-navegador IE. En CSS3, el efecto de transparencia se puede lograr directamente).
rgba(200, 54, 54, 0.5);
fondo: rgba(200, 54, 54, 0.5);
color
: rgba(200, 54, 54, 0.5);
color: #000
;
, Safari, Chrome, Opera (opacidad) e IE7 (opacidad, con correcciones
5. Utilice @Font-Face para implementar fuentes personalizadas
).Hay varias fuentes que son relativamente seguras en el diseño web, como Arial, Helvetica, Verdana, Georgia y Comic Sans (la china, en términos generales, Song Dynasty es la única segura; ahora, usando @font-face de CSS3). ¿Puedo especificar las fuentes yo mismo, pero debido a problemas de derechos de autor, las fuentes reales que se pueden usar son limitadas (además, las enormes fuentes chinas también son un problema difícil de resolver - traductor).
La sintaxis es la siguiente:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype'
}
Navegadores compatibles: Firefox 3.1, Safari, Opera 10); e IE7 (requiere algunos problemas, si no tiene miedo a los problemas, puede implementar esta función en IE, consulte: hacer que la fuente funcione en IE)
Aunque CSS3 aún está en desarrollo, estas funciones mencionadas anteriormente ya están disponibles en algunos navegadores utilizados, especialmente Safari. Desafortunadamente, Safari no es un navegador convencional.
Firefox tiene actualmente una gran base de usuarios. Además, el próximo Firefox 3.1 admite muchos efectos de CSS3. Debido a que los usuarios de Firefox están muy motivados para actualizar, muchos usuarios pueden experimentar las nuevas características de CSS3 de antemano.
Google Chrome se lanzó recientemente este año. Está basado en el motor Webkit, por lo que es muy similar a Safari. Debido a que Safari se usa principalmente en el mercado de Mac, Chrome puede llenar el vacío en el mercado de Windows.
Según las estadísticas, en noviembre de 2008, el 44,2% de los usuarios utilizaba Firefox, el 3,1% utilizaba Chrome y el 2,7% utilizaba Safari, lo que significa que algunas funciones de CSS3 ya son compatibles con casi la mitad de los usuarios de Internet en el círculo del diseño web. La proporción puede ser mayor, alrededor del 73,6% (datos proporcionados por Blog.SpoonGraphics)
6. Factores negativos
Las características CSS3 descritas anteriormente traerán excelentes resultados a su sitio web, pero todavía hay algunos factores negativos que deben considerarse:
Internet Explorer: 46% de Internet no puede ver estos efectos, así que no los use para diseños importantes. Asegúrese también de que cuando estos efectos no funcionen, haya diseños alternativos disponibles.
Problemas de validación de CSS: estas funciones de CSS3 no son la versión final. Actualmente, diferentes navegadores utilizan diferentes etiquetas para implementar estas funciones, lo que puede causar problemas de validación para su hoja de estilo.
Código inflado: debido a que diferentes navegadores utilizan una sintaxis de definición diferente, su código CSS eventualmente se volverá muy inflado.
Uso inadecuado: El uso inadecuado de estos efectos puede traer algunas consecuencias adversas, especialmente para los efectos de sombra.
Fuente internacional de este artículo: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
Fuente de traducción al chino: sitio web oficial de COMSHARP CMS (35 km traducción )