Autor Tema: CSS y HTML. linear-gradient, degradados de color en HTML efectos CU01060D (Leído 3712 veces)

Chompy129 · « **en:** 27 de Septiembre 2016, 17:58 »

Degradados CSS. Efecto lineal y radial. linear-gradient. Angulos CSS: unidades deg, grad, turn, rad. (CU01060D)

Aquí les dejo el ejercico CU01060D del curso bases de la programación web con CSS:

Código HTML(CSS Interno)

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Degradación de color</title>
	<style type="text/css">
		#Caja1{width: 400px; height: 200px;
			   margin: 50px; border: 3px solid #000;
			   background: linear-gradient(25deg, #F00, #FFF, #00F);}
		#Caja1:hover{background: linear-gradient(205deg, #F00, #FFF, #00F);}
	</style>
</head>
<body> 
	<div id="Caja1"></div>
</body>
</html>

_{PD: Le agregue un efecto :hover porque creí que el ejercicio era muy sencillo.}

pedro,, · « **Respuesta #1 en:** 27 de Septiembre 2016, 23:55 »

Hola Chompy129.

Ejercicio bien resuelto, solo te faltó centrar el "div".

Saludos.

Chompy129 · « **Respuesta #2 en:** 28 de Septiembre 2016, 00:46 »

Bueno no me percate que tenia que centrarlo. -.-
Igual, gracias por revisar la actividad.

Saludos igual

alefaletti · « **Respuesta #3 en:** 22 de Abril 2017, 17:27 »

Muchas gracias!

Tengo una pregunta; puedo centrar el div... pero como colocar margenes de 50px? si pongo esta medida desde el right y el left; deja de estar centrado. Paso mi codigo. Muchas gracias!

HTML:

Código: [Seleccionar]


<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
	<title>Portal web - aprenderaprogramar.com</title>
	<meta charset="utf-8">
	<meta name="description" content="Portal web aprenderaprogramar.com">
	<meta name="keywords" content="aprender, programar, cursos, libros">
	<link rel="stylesheet" type="text/css" href="CSS(60)EjercicioFinal-degradados.css">
</head>

<body>

    <div> 
    
    </div>
    
</body>

</html>

CSS:

Código: [Seleccionar]


div {border: solid 2px; width: 400px; height: 200px;margin:auto;
     background: linear-gradient(25deg, red, white, blue)}

Jack_F · « **Respuesta #4 en:** 23 de Abril 2017, 04:46 »

Hola alefaletti, debes poner uno mas <br /> encima de los <div></div> o arriba basicamente asi:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
	<title>Portal web - aprenderaprogramar.com</title>
	<meta charset="utf-8">
	<meta name="description" content="Portal web aprenderaprogramar.com">
	<meta name="keywords" content="aprender, programar, cursos, libros">
	<link rel="stylesheet" type="text/css" href="CSS(60)EjercicioFinal-degradados.css">
</head>

<body>
<br /><br /><br /><br /><br />
    <div> 
    
    </div>
    
</body>

</html>

Para crear unos saltos de lineas o para separar una cosa de otra que esten muy juntas.

Un saludo

alefaletti · « **Respuesta #5 en:** 29 de Abril 2017, 19:58 »

Muchas gracias Jorgito por el detalle! un abrazo!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: CSS y HTML. linear-gradient, degradados de color en HTML efectos CU01060D (Leído 3712 veces)

Chompy129

CSS y HTML. linear-gradient, degradados de color en HTML efectos CU01060D

pedro,,

Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D

Chompy129

Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D

alefaletti

Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D

Jack_F

Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D

alefaletti

Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D

Preguntas y respuestas