Creación de fondos con CSS

Vista previa del material en texto

Fondos
Etiquetas Donde aplicar fondos
body (se aplica a todo el documento html)
div (se aplica a alguna sección)
table (se aplica a toda la tabla)
td (se aplica a una celda)
	Propiedades	Valores	
	background-color	color	Especifica un color de fondo
	background-image	url (“imagen.jpg”)	Usa una imagen como fondo
	background-repeat	repeat
repeat-x
repeat-y
no-repeat	Repite imagen. Ejemplos: https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_background-repeat
	Propiedades	Valores	
	background-attachment	fixed
scroll	Especifica si la imagen del fondo se desplaza o no
	background-position	left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
	Define la posición de la imagen de fondo
	Propiedades	Valores	
	background	Todos los anteriores	Abrevia las demás propiedades en una sola. 
Los valores tienen que estar en el orden presentado.
body
{background: #ffffff url(“imagen.jpg”) no-repeat right top; }
Aplicar fondos de colores
1. Crear el estilo
.fondo1 
{background-color: #F6EABB; }
2. Aplicarlo al html en una etiqueta (body, div, table)
<div class=“fondo1”> 
</p > 
Texto con recuadro de color
</p > 
</div > 
Aplicar gradientes
Tipos de gradientes:
Linear
Radial
Cónico
Gradiente linear
	Propiedad	Valor	
	background-image	linear-gradient
	(dirección, color1, color2, …)
Direcciones: left/right/top/bottom
* Se puede omitir
.fondo2 {
background-image: linear-gradient (to left, green, yellow); 
}
En el html
<div class=“fondo2”> 
</p > 
Texto con recuadro de fondo de gradiente
</p > 
</div > 
.fondo2 {
background-image: linear-gradient
(to left, green, yellow); 
}
En el css
Se pueden especificar porcentajes
.fondo4 {
background-image: linear-gradient (red 5%, yellow 15%, red 60%); 
}
Ejemplos de direcciones:
to top
to bottom
left to right
top left to bottom right
bottom left to top right
Gradiente radial
	Propiedad	Valor	
	background-image	radial-gradient
	(tamaño posición, color inicial, color, …, color final)
Tamaño: circle/ellipse
Posición: closest-side/farthest-side/closest-corner/farthest corner
*se puede omitir
.fondo3 {
background-image: radial-gradient (green, yellow); 
}
<div class=“fondo3”> 
</p > 
Texto con recuadro de fondo de gradiente
</p > 
</div > 
En el html
En el css
Gradiente cónico
	Propiedad	Valor	
	background-image	conic-gradient
	(desde-el-ángulo, color grado, color grado, …)
Desde-el-ángulo: from xdeg
Grado: de 0deg a 360deg
*se puede omitir
.fondo4 {
background-image: conic-gradient (green, yellow); 
}
En el html
En el css
<div class=“fondo4”> 
</p > 
Texto con recuadro de fondo de gradiente
</p > 
</div > 
Repetir gradientes
	Propiedad	Valor
	background-image	repeating-linear-gradient
repeating-radial-gradient
repeating-conic-gradient
.fondo5 {
background-image: repeating-radial-gradient (green, yellow); 
}
<div class=“fondo5”> 
</p > 
Texto con recuadro de fondo de gradiente
</p > 
</div > 
En el html
En el css
.fondo6 {
background-image: repeating-conic-gradient (#EBBC12 0deg 10deg, yellow 10deg 20 deg); 
}
En el html
En el css
<div class=“fondo6”> 
</p > 
Texto con recuadro de fondo de gradiente
</p > 
</div > 
.fondo7 {
background-image: repeating-conic-gradient (#EBBC12 15%,
yellow 20%); 
}
En el html
En el css
<div class=“fondo7”> 
</p > 
Texto con recuadro de fondo de gradiente
</p > 
</div > 
*Algunos diseñadores usan estas propiedades para navegadores viejos:
-webkit
-moz
También agregan otro fondo con color plano 
Puedes obtener más herramientas para gradientes en los siguientes enlaces: 
https://mycolor.space/gradient
https://www.css-gradient.com/