Hoy solo pudo trabajar el primer grupo y un poco el segundo.
A continuación, un ejercicios que realicé en CSS:
El ejercicio consiste en cambiar el diseño de una caja de texto, como se mostrará a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cajatexto</title>
</head>
<style>
input.hola{border:10px solid #7342AF;
font-size:25px;
font-family: Helvetica;
padding-top:15px;
padding-left:10px;
padding-bottom:15px;
padding-right:30px;
border-radius:50px;
background:#769FCF;
background: linear-gradient(left, #769FCF, #265287);
background: -moz-linear-gradient(left, #769FCF, #265287);
background: -webkit-linear-gradient(left, #769FCF, #265287);
background: -o-linear-gradient(left, #769FCF, #265287);
color:#22343E;
}
input.hola:hover
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206A12;
background: linear-gradient(left, #206A12, #3EA72A);
background: -moz-linear-gradient(left, #206A12, #3EA72A);
background: -webkit-linear-gradient(left, #206A12, #3EA72A);
background: -o-linear-gradient(left, #206A12, #3EA72A);
color:#E26209;}
input.hola:focus
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206AAF;
background: linear-gradient(left, #206AAF, #3EA98A);
background: -moz-linear-gradient(left, #206AAF, #3EA98A);
background: -webkit-linear-gradient(left, #206AAF, #3EA98A);
background: -o-linear-gradient(left, #206AAF, #3EA98A);
color:#E26209;}
/* ___________________________________________________________________________________________________________________________ */
input.caja
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #FFFFFF;
background: linear-gradient(left, #FFFFFF, #F7F9FA);
background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
color: #2E3133;
}
input.caja:hover{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206A12;
background: linear-gradient(left, #206A12, #3EA72A);
background: -moz-linear-gradient(left, #206A12, #3EA72A);
background: -webkit-linear-gradient(left, #206A12, #3EA72A);
background: -o-linear-gradient(left, #206A12, #3EA72A);
color:#E26209;}
input.caja:focus
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#406E32;
background: linear-gradient(left, #406E32, #FF0);
background: -moz-linear-gradient(left, #406E32, #FF0);
background: -webkit-linear-gradient(left, #406E32, #FF0);
background: -o-linear-gradient(left, #406E32, #FF0);
color:#E26209;
}
/* ___________________________________________________________________________________________________________________________ */
textarea.caja{border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #FFFFFF;
background: linear-gradient(left, #FFFFFF, #F7F9FA);
background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
color: #2E3133;}
textarea.caja:hover
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#206A12;
background: linear-gradient(left, #206A12, #3EA72A);
background: -moz-linear-gradient(left, #206A12, #3EA72A);
background: -webkit-linear-gradient(left, #206A12, #3EA72A);
background: -o-linear-gradient(left, #206A12, #3EA72A);
color:#000;}
textarea.caja:focus
{
font-family: Arial;
padding-top:1px;
padding-left:5px;
padding-bottom:200px;
padding-right:100px;
border-radius:5px;
background:#406E32;
background: linear-gradient(left, #406E32, #FF0);
background: -moz-linear-gradient(left, #406E32, #FF0);
background: -webkit-linear-gradient(left, #406E32, #FF0);
background: -o-linear-gradient(left, #406E32, #FF0);
color:#E26209;}
</style>
<body>
<center><input type="text" class="hola" placeholder="HOLAAAAAAAAA"></center>
<hr>
<input type="text" class="caja" size="30" placeholder="Input Text">
<br>
<textarea cols="25" rows="10" class="caja" placeholder="Textarea"></textarea>
</body>
</html>
Publicar un comentario