Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: 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)
<!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. :P
-
Hola Chompy129.
Ejercicio bien resuelto, solo te faltó centrar el "div".
Saludos. ;D
-
Bueno no me percate que tenia que centrarlo. -.-
Igual, gracias por revisar la actividad. :D
Saludos igual :)
-
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:
<!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:
div {border: solid 2px; width: 400px; height: 200px;margin:auto;
background: linear-gradient(25deg, red, white, blue)}
-
Hola alefaletti, debes poner uno mas <br /> encima de los <div></div> o arriba basicamente asi:
<!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 :D
-
Muchas gracias Jorgito por el detalle! un abrazo!