CSS es un lenguaje de diseño de sitios web conocido y ampliamente utilizado. En su plan versión 3 (CSS3), se han agregado algunas características nuevas que pueden ahorrar tiempo. Aunque estos efectos sólo son compatibles con las últimas versiones del navegador, sigue siendo necesario e interesante conocerlos. Bao Fengbinbin le mostrará 5 nuevas tecnologías interesantes en CSS en este artículo: esquinas redondeadas, esquinas redondeadas individuales, opacidad, sombra y cambio de tamaño de elementos.
1: nota básica
Antes de comenzar este tutorial, creemos el marcado básico que se utilizará a lo largo del tutorial.
Nuestro xHTML requiere los siguientes elementos div:
#round, utiliza código CSS3 para lograr esquinas redondeadas.
#indie, aplica unos filetes individuales.
#opacity, demuestra la nueva forma CSS3 de implementar la opacidad.
#shadow, muestra cómo usar CSS3 para lograr un efecto de sombra sin usar Photoshop.
#resize, muestra cómo usar CSS para lograr un efecto de cambio de tamaño.
En resumen, nuestro xHTML debería verse así:
El siguiente es el contenido citado: |
Creemos el archivo CSS básico:
El siguiente es el contenido citado:
|
Como puede ver arriba, le dimos a cada elemento div un ancho y alto de 300 px y los dejamos flotar hacia la izquierda, dejando todos los divs de la página para que podamos diseñarlos más tarde.
2: esquinas redondeadas
Actualmente, existen muchas formas de crear filetes, pero todas resultan engorrosas. El método más común: primero, debe crear una imagen con esquinas redondeadas, luego debe crear muchos elementos html y usar una imagen de fondo para mostrar las esquinas redondeadas. Tú y yo conocemos muy bien el proceso específico.
Este problema se resolverá fácilmente en CSS3 con una propiedad llamada "border-radius". Primero creamos un elemento div negro y le asignamos un borde negro. El borde es el requisito previo para lograr el efecto del atributo "radio de borde".
Como esto:
El siguiente es el contenido citado: #redondo { |
Ahora que ha creado el elemento div, tiene el aspecto que esperaba: 300 píxeles de alto, angular y negro. Ahora agreguemos el código para implementar esquinas redondeadas. Es muy simple y solo requiere dos líneas de código.
El siguiente es el contenido citado: #redondo { |
Aquí, agregamos dos líneas de código similares, -moz- para el navegador Firefox y -webkit- para el navegador Safari/Chrome.
Nota: Hasta ahora, el navegador IE no admite el atributo border-radius, por lo que si desea que IE tenga un efecto de esquinas redondeadas, debe agregar esquinas redondeadas por separado.
La traducción literal de la propiedad border-radius es el radio del borde. Al igual que en Photoshop, cuanto mayor sea su valor, mayores serán las esquinas redondeadas.
3: Esquinas redondeadas individuales
Si sigue los hábitos anteriores, perderá mucho tiempo. ¡Ahora CSS3 puede resolverlo rápidamente!
Ahora sólo queremos que las esquinas superior derecha e inferior derecha del div estén redondeadas, por lo que sólo necesitamos hacer ligeras modificaciones:
El siguiente es el contenido citado: #indie { |
Imagínese para qué elementos de la página web se utilizaría este enfoque. ¡Sí!
4: Modificar la opacidad usando CSS3
Ahora puedes escribir convencionalmente algunas líneas de código para implementar el efecto de opacidad (truco). Sin embargo, CSS3 simplifica este proceso.
Esta línea de código es fácil de recordar, solo "opacidad: valor;":
El siguiente es el contenido citado: #opacidad { color de fondo: #000; opacidad: 0,3; } |
5: efecto de sombra
Hay muchas formas de lograr sombras. La más común es usar Photoshop para crear una imagen de sombra y luego aplicarla a las propiedades del fondo. Pero CSS3 hace que su trabajo sea más eficiente. Desafortunadamente, actualmente solo Safari y Chrome admiten esta nueva característica.
Sólo requiere una línea de código, pero tiene 4 valores diferentes:
El siguiente es el contenido citado: -webkit-box-shadow: 3px 5px 10px #ccc; |
Permítanme explicar qué representan estos cuatro valores. Los primeros 3px son la distancia horizontal (horizontal) entre la sombra especificada y el elemento div, y los segundos 5px se refieren a la distancia vertical (vertical) entre la sombra y el div. el tercer 10px se refiere al desenfoque de la sombra (similar al difuminado en Photoshop), cuanto mayor es el valor, más delicado es. Todo el mundo sabe que el valor final es el color de la sombra.
Nuestro código final de efecto de sombra;
El siguiente es el contenido citado: #sombra { color de fondo: #fff; borde: 1px sólido #000; -webkit-box-shadow: 3px 5px 10px #ccc; } |
Como puedes ver, nuestro div tiene un fondo blanco, un borde negro y una sombra gris claro.
6: Cambiar tamaño
En la última versión de CSS, es posible cambiar el tamaño de los elementos (pero actualmente solo es compatible con Safari)
Después de usar este código, aparecerá un pequeño triángulo en la esquina inferior derecha de nuestro elemento para recordarle al usuario que se puede cambiar el tamaño de este elemento. El código sigue siendo muy simple, se puede decir que solo requiere una línea de código. Por supuesto, también puede usar algunas propiedades que ha usado antes, como "max-width", "max-height", ". ancho mínimo" y "alto mínimo".
El siguiente es el contenido citado: #cambiar tamaño { color de fondo: #fff; borde: 1px sólido #000; cambiar el tamaño: ambos; desbordamiento: automático; } |
Aquí hablamos principalmente de los atributos de cambio de tamaño y desbordamiento: ambos significan que todos los lados se pueden cambiar de tamaño. Como sugiere el nombre, son horizontales y verticales. Overflow funciona con el cambio de tamaño, por lo que aquí se usa auto.
Resumir
Entonces, ¿obtuviste algo de este artículo? Aunque ahora solo unos pocos navegadores admiten CSS3, es innegable que CSS3 efectivamente nos ahorrará más tiempo en el trabajo. Si tiene algún conocimiento y comprensión sobre la mejora progresiva, creo que aceptará fácilmente esta nueva y poderosa versión de CSS3. No gaste todo su tiempo en IE6, de lo contrario solo será un ingeniero de desarrollo front-end desactualizado.
