¿Cómo trabajar con gradientes lineales en css3
La mayoría de la gente quiere algo un poco más emocionante que un color de fondo o un marco para sus sitios CSS3. Por ejemplo, usted puede confiar en una función lineal gradiente () para realizar la tarea. El uso de un gradiente lineal (), puede crear líneas (horizontales, verticales y en ángulo), diamantes, y plazas.
Cuando se combina la gradiente lineal () con otros métodos de gradiente (como el radial gradiente ()) se puede crear todo tipo de patrones. Por ahora, crear un simple gradiente lineal () usando el siguiente procedimiento para tener una idea de cómo funcionan.
Crear un nuevo archivo de HTML5 con su editor de texto.
Escriba el siguiente código de la página HTML.
Un Fondo no imagen ¿Un simple título
El texto es sencillo para ir con el título.
El objetivo principal de este ejemplo es centrarse en los fondos, por lo que el contenido es bastante simple. Todo lo que ves es un encabezado simple y párrafo.
Guarde el archivo como PatternedBackground.HTML.
La muestra aparece en otros capítulos, por lo nomenclatura es importante.
Crear un nuevo archivo CSS con su editor de texto.
Escriba la siguiente información de estilo CSS.
body {background: lineal gradiente (45 grados, carmesí, Transparente, AzulReal) -background-color: # 00FF00-background-size: 100px 100px;}El punto central de este patrón es la propiedad background, que se basa en la función lineal gradiente (). Puede utilizar esta función en un número de formas-el ejemplo muestra una manera sencilla. Comienza diciendo a la función lineal gradiente () para dibujar la línea a 45 grados.
Hay tres colores en el gradiente: Crimson, el color de fondo (transparente muestra el fondo), y AzulReal. El gradiente se iniciará con Crimson, la transición al color de fondo, y terminar con AzulReal, todo en proporciones iguales.
La propiedad background-color define un valor de verde en este caso. La propiedad background-size define el tamaño del patrón de degradado. Sería fácil para obtener un número de diferentes efectos con el mismo gradiente lineal () y variando estas dos últimas propiedades.
Guarde el archivo como PatternedBackground.CSS.
La muestra aparece en otros capítulos, por lo nomenclatura es importante.
Guarde el archivo HTML y recargar la página.
Usted ve el fondo se muestra, que en realidad es bastante dramática. El fondo se repite automáticamente sin importar lo que el usuario cambia el tamaño de la ventana.
Es posible combinar gráficos y gradientes para crear aún más inusual efectos sin recurrir a la programación. Basta con sustituir una de las entradas de color con la URL de un gráfico descargable utilizando la función url (). El gradiente resultante combinará color, gráficos, transparencias y efectos de transición para crear un fondo inusual para usted.
Cómo utilizar los colores frontal y de fondo en Photoshop CS6 Photoshop CS 6 tiene dos categorías de colores - un color de primer plano y un color de fondo. Se aplica la color de primer plano al utilizar las herramientas de texto, las herramientas de pintura, o las herramientas de forma. El color de fondo es…
Cómo utilizar los mapas de degradado en Photoshop CS6 En Phtoshop CS6, mapas degradados convertir su imagen a escala de grises y luego vuelva a la gama de tonos negros, grises, blancos y con un gradiente de su elección, en efecto, colorear la imagen - a menudo, en formas sorprendentes.Mapas de…
¿Cómo trabajar con gradientes en Photoshop CS6 En Photoshop CS6 un gradiente es una maravillosa mezcla de colores que se pueden aplicar a una capa o selección, desvaneciéndose gradualmente de una tonalidad a otra. Los degradados pueden involucrar a más de dos colores, produciendo un arco iris…
La aplicación de un relleno degradado a una forma en la oficina 2011 para mac La ficha de degradado del panel de relleno en el cuadro de diálogo Formato de forma es donde llenar una forma con un gradiente en Office 2011 para Mac. Aunque parece complicado al principio, después de jugar con él, te encantará su flexibilidad.…
Cómo utilizar gradientes CSS3 Un gradiente de CSS3 (que es una mezcla entre dos o más colores) puede ser un buen fondo. Anteriormente, los desarrolladores podrían crear un degradado mediante la construcción de una tira delgada de gradiente en un editor de imágenes, y luego…
Recursos en línea para generar gradientes CSS3 La capacidad de generar mezclas complejas de gradiente es una de las mejoras realmente dramáticos en CSS3. Hasta el advenimiento de CSS3, los diseñadores se basaron en los archivos de imagen de baldosas para crear fondos texturizados detrás de…
Cómo utilizar un gradiente rellenar javafx En lugar de utilizar un color sólido, puede especificar un relleno de degradado, que combina dos colores uniformemente a través de la forma. JavaFX proporciona dos clases para trabajar con gradientes: LinearGradient y RadialGradient.LA gradiente…
Cómo cambiar fondos repetitivas en sitios css3 Hay situaciones en las que sólo se desea una sola copia de una imagen de fondo en su sitio CSS3. Puede ser que la imagen que ha utilizado es algo que no se repite así o es lo suficientemente grande que usted realmente no quiere que se repita. El…
Cómo crear un fondo css3 sola imagen La manera más simple, más compatible para crear un fondo CSS3 que tiene al menos un poco de realce es utilizar una sola imagen. La imagen de la derecha dice mucho acerca de su sitio y proporciona continuidad entre páginas. Debido a este enfoque…
Cómo generar imágenes usando fabricante de la imagen del gradiente en css3 Usted ya ha visto una serie de otros programas descritos que crean imágenes de degradado. Parece como si cada sitio, incluyendo CSS3, ofrece una. El Dynamic Drive Gradiente Image Maker es diferente, sin embargo: En realidad, crea un archivo de…
Cómo colocar gráficos en sitios css3 En esencia, a los gráficos de posición en sitios CSS3 se utiliza la combinación de las propiedades de fondo izquierda, derecha, arriba, y para proporcionar un posicionamiento básico. Afinando la posición implica el uso de las propiedades de…
Crear gradientes con CSS 3 Los degradados son un efecto favorito de los diseñadores gráficos de todo el mundo debido a los gradientes de crear una transición suave de color. Adición de gradientes para el fondo de una página web o secciones dentro de una página añade…