MANUALES (CSS):
1. Como dar estilos CSS a una caja de texto - input text y textarea:
Propiedades CSS fundamentales para dar estilos a los elementos input text y textarea.
Propiedades CSS fundamentales para dar estilos a los elementos input text y textarea.
border : Estilos al borde de la caja de texto.
font-size : Tamaño de fuente de la caja de texto.
font-family : Tipo de fuente de la caja de texto.
padding : Márgenes entre el texto y el borde de la caja de texto.
border-radius : Redondear las esquinas de la caja de texto.
background : Color de fondo de la caja de texto.
color : Color del texto de la caja de texto.
evento :hover : Estilos cuando se pase el cursor sobre la caja de texto.
EJEMPLO DE CÓDIGO:
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como dar estilos css a una caja de texto - input text y textarea</title>
<style>
.textbox
{
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;
}
.textbox:focus
{
color: #2E3133;
border-color: #FBFFAD;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="text" class="textbox" size="30" placeholder="Input Text"></td>
<td><textarea cols="25" rows="10" class="textbox" placeholder="Textarea"></textarea></td>
</tr>
</table>
</body>
</html>
2. Como dar estilos CSS a un botón:
evento :hover : Estilos cuando se pase el cursor sobre el botón.
TOMADO DE:
Propiedades CSS fundamentales para dar estilos a un botón:
border : Estilos al borde del botón.
font-size : Tamaño de fuente del botón.
font-family : Tipo de fuente del botón.
padding : Márgenes entre el texto y el borde del botón.
border-radius : Redondear las esquinas del botón.
background : Color de fondo del botón.
color : Color del texto del botón.
EJEMPLO DE CÓDIGO:
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como dar estilos css a un botón</title>
<style>
.button
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #4972B5;
background: linear-gradient(left, #4972B5, #618ACB);
background: -moz-linear-gradient(left, #4972B5, #618ACB);
background: -webkit-linear-gradient(left, #4972B5, #618ACB);
background: -o-linear-gradient(left, #4972B5, #618ACB);
color: #FFFFFF;
}
.button:hover
{
background: #365D9D;
background: linear-gradient(left, #365D9D, #436CAD);
background: -moz-linear-gradient(left, #365D9D, #436CAD);
background: -webkit-linear-gradient(left, #365D9D, #436CAD);
background: -o-linear-gradient(left, #365D9D, #436CAD);
color: #FFFFFF;
border-color: #FBFFAD;
}
</style>
</head>
<body>
<input type="button" class="button" value="button">
<input type="submit" class="button" value="submit">
<input type="reset" class="button" value="reset">
</body>
</html>
TOMADO DE:
No hay comentarios:
Publicar un comentario