Cómo agregar varias imágenes de fondo y rotar objetos con css3
Con CSS3, puede agregar fácilmente como muchas imágenes de fondo a cualquier elemento a su gusto. También puede rotar las imágenes. La ilustración muestra un ejemplo de un recipiente con tres imágenes de fondo, un patrón, y dos archivos PNG con transparencia.
La forma más sencilla de añadir múltiples imágenes es separar cada uno por una coma, por lo que asegúrese de colocar la imagen que quieres estar en la posición más alta primero y cualesquiera imágenes adicionales por debajo de ella en el orden de apilamiento deseada:
.box {/ * repliegue * / background: url (bg-full.jpg) arriba a la izquierda no-repeat - / * modernos navegadores * / background: url (bg-top.jpg) arriba a la izquierda no-repeat, url (bg-bottom .jpg) abajo a la derecha de no repetición, url (bg-middle.jpg) dejó repetir-x}Como reserva para los navegadores más antiguos, puede incluir una sola imagen que tiene todos los elementos combinados de sus imágenes separadas en la parte superior del bloque de estilo, como se ha señalado aquí por el /* retroceder */ comentarios. Este método asegura que los navegadores antiguos muestran la primera imagen e ignoran el resto.
Como diseñador web, una de las maneras que usted puede agregar un poco de interés para su diseño 2D es romper con la estructura lineal de la red mediante la rotación de un objeto en el espacio. Con CSS3, puede girar sin esfuerzo un objeto mediante la aplicación de la transform: rotar estilo a cualquier objeto:
.girar {transform: rotate (-4deg) - webkit-transform: rotate (-4deg) - / * Safari y Chrome * / - moz-transform: rotate (-4deg) - / * Firefox * / - o-transform: rotar (-4deg) - / * Opera * /}Los objetos pueden ser girados en sentido horario (4deg) O hacia la izquierda (-4deg). También puede escalar y sesgar un objeto con el scale () y skew () transformar métodos especificando valores numéricos o grados para el eje X y el eje Y:
div {transformar: escala (3,6) - ms-transformar: escala (3,6) - / * IE 9 * / - webkit-transform: escala (3,6) - / * Safari y Chrome * / - o Edition -Collaborative: escala (3,6) - / * Opera * / - moz-transform: escala (3,6) - / * Firefox * /} div {transformar: inclinación (10 grados, 20deg) - ms-transformar: inclinación (10 grados, 20deg) - / * IE 9 * / - webkit-transform: inclinación (10 grados, 20deg) - / * Safari y Chrome * / - o-transform: inclinación (10 grados, 20deg) - / * Opera * / - moz Edition -Collaborative: inclinación (10 grados, 20deg) - / * Firefox * /}-
Cómo utilizar la herramienta de transformación libre en los documentos de InDesign CS6 -
Ilife '11: girar y enderezar imágenes en iPhoto -
Cómo voltear y rotar objetos en PowerPoint 2013 -
Cómo voltear y rotar objetos de PowerPoint 2007 -
Cómo utilizar transformaciones CSS3 -
Girar objetos geométricos con la TI-84 Plus
Cómo graficar y transformar una función exponencial Representación gráfica de una función exponencial es útil cuando se desea analizar visualmente la función. Si lo hace, le permite ver realmente el crecimiento o la decadencia de lo que estás tratando. La función madre básica de cualquier…
¿Cómo transformar horizontalmente una función Usted puede transformar cualquier función en una función relacionada desplazando horizontalmente o verticalmente, darle la vuelta (reflejándola) horizontal o verticalmente, o estirando o encogiendo horizontal o verticalmente. Vamos a través de…
¿Cómo transformar los problemas de límites con el fin de utilizar l'h & # regla del 244-pital Aunque la regla de L'H # de 244-pital es un gran atajo para hacer problemas de límite, puede ser a veces no puede continuar con un problema de límite cuando la sustitución produce formas inaceptables,En estos casos, primero hay que ajustar el…
¿Cómo transformar expresiones límites que impiden utilizando l'h & # regla del 244-pital Aunque la regla de L'H # de 244-pital es un gran atajo para hacer problemas de límite, puede ser a veces no puede continuar con un problema de límite cuando la sustitución produce ciertas formas inaceptables.Por ejemplo, cuando la sustitución de…
Soporte CSS3 y navegador El estado actual de las normas para la compatibilidad con exploradores web para efectos CSS3 y transformaciones es en flujo. Lo más probable, con el tiempo los poderes fácticos estar en el mundo del navegador - quienes publican Internet Explorer,…
Cómo redondear los bordes y crear varias columnas con css3 En lugar de tener que utilizar hasta cuatro imágenes separadas para dar la ilusión de una forma curvada en su sitio web, con CSS3 ahora puede crear contenedores con esquinas curvas! Aquí está el código, que cuenta con la declaración de CSS3…
¿Cómo transformar objetos con css3 En CSS3, un transformar cambia la apariencia de los objetos que aparecen en pantalla de una manera específica. Por ejemplo, es posible rotar el objeto o sesgar sus dimensiones. Transforma hacen que sea fácil para crear presentaciones únicas de…
¿Cómo trabajar con los selectores CSS3 A mediados de 2010, los diseñadores y desarrolladores web se regocijaron como CSS3 comenzó a hacer su camino en la corriente principal. Desde entonces, el apoyo del navegador para CSS3 ha aumentado y mejorado constantemente, a pesar de CSS3 aún…
Cómo crear transformaciones con CSS 3 CSS 3 te permite crear muchos efectos interesantes en su sitio web para la visualización en el iPhone y el iPad. Las CSS 3 transformar propiedades le permiten transformar un elemento para crear efectos en 2D y 3D. Puede especificar una lista de…
Hacer css 3 trabajos en más navegadores web Si desea utilizar HTML5 y CSS 3 en el diseño de su sitio web, usted debe saber que tanto HTML5 y CSS 3 son todavía en desarrollo. La especificación CSS aún no ha sido aprobado por el W3C, pero muchos desarrolladores de navegadores ya han…
Efectos que se pueden hacer con las hojas de estilo en cascada CSS3, la última edición de Hojas de Estilo en Cascada, presenta los avances en el manejo de diseño. De ellas, algunas nuevas capacidades que definen gradientes de color, grados de transparencia, e incluso los reflejos son definitivamente vale la…
¿Cómo transformar capas en Photoshop Elements 9 Al trabajar con capas en Photoshop Elements, puede encontrar la necesidad de transformar (escala o girar) algunas de sus imágenes. Puede hacerlo mediante la aplicación de los comandos Transformar y transformar gratuito. Los métodos para…