MANUALES 17,18


Como dar estilos css a un botón


Bienvenid@s, hoy os mostraré las propiedades CSS fundamentales para que podáis darle vuestros estilos personalizados a los botones de vuestras páginas web, para ello crearemos una clase llamada "button" y utilizaremos las siguientes propiedades CSS para personalizar el botón ...

border : Para aplicar estilos al borde del botón. 

font-size : Para aplicar el tamaño de fuente del botón. 

font-family : Para aplicar el tipo de fuente del botón. 

padding : Para establecer unos márgenes entre el texto y el borde del botón. 

border-radius : Para redondear las esquinas del botón. 

background : Para establecer el color de fondo del botón. 

color : Para establecer el color del texto del botón. 

También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre el botón. 
DEMO DE LOS BOTONES ... 

   

Código del ejemplo ... 

 <!-- 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>

Como dar estilos css a una caja de texto - input text y textarea


Bienvenid@s, hoy os mostraré las propiedades CSS fundamentales para que podáis darle vuestros estilos personalizados a los elementos input text y textarea de vuestras páginas web o blogs, de este modo puedes tener un diseño elegante y únicamente tendrás que ir cambiando los valores de las propiedades CSS hasta conseguir el diseño deseado.

Para ello crearemos una clase llamada "textbox" y utilizaremos las siguientes propiedades CSS para personalizar cualquier input text o textarea ... 

border : Para aplicar estilos al borde de la caja de texto. 

font-size : Para aplicar el tamaño de fuente de la caja de texto. 

font-family : Para aplicar el tipo de fuente de la caja de texto. 

padding : Para establecer unos márgenes entre el texto y el borde de la caja de texto. 

border-radius : Para redondear las esquinas de la caja de texto. 

background : Para establecer el color de fondo de la caja de texto. 

color : Para establecer el color del texto de la caja de texto. 

También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre la caja de texto. 
DEMO DE INPUT TEXT Y TEXTAREA ... 



Código del ejemplo ... 

 <!-- 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>


TOMADO DE: http://jquery-manual.blogspot.com.co/2013/11/como-dar-estilos-css-un-boton.html

http://jquery-manual.blogspot.com.co/2013/11/como-dar-estilos-css-una-caja-de-texto.html


Comentarios

Publicar un comentario

Entradas más populares de este blog

TABLA ASCII

Imagen
HEXADECIMALES: Se explicó el tema de hexadecimales y se realizaron ejercicios hexadecimales en clase. TABLA ASCII: ASCII  ( acrónimo   inglés  de  American Standard Code for Information Interchange  — Código Estándar Estadounidense para el Intercambio de Información), pronunciado generalmente  [áski]  o [ásci] o [ásqui], es un  código de caracteres  basado en el  alfabeto latino , tal como se usa en inglés moderno. Fue creado en  1963  por el Comité Estadounidense de Estándares (ASA, conocido desde 1969 como el Instituto Estadounidense de Estándares Nacionales, o  ANSI ) como una refundición o evolución de los conjuntos de códigos utilizados entonces en  telegrafía . Más tarde, en  1967 , se incluyeron las minúsculas, y se redefinieron algunos códigos de control para formar el código conocido como  US-ASCII . El código ASCII utiliza 7 bits para representar los caracteres, aunque inicialmente empleaba un bit adicional ( bit de paridad ) que se usaba para detectar erro
Leer más

CAJA DE TEXTO EN HTML.

CAJA DE TEXTO: Definición Llamamos campos de texto, dentro de un formulario, a los elementos que nos permiten recoger texto escrito por el usuario. En la pantalla se muestra una pequeña caja donde el usuario puede escribir el texto que pretende enviar. Podemos crear varios tipos de campos de texto, bien sea para introducir un dato simple (nombre, edad, dirección, correo electrónico, etc.) o para introducir un texto mas largo (comentarios, opiniones, etc.); también podemos crear un campo de texto para un dato simple, pero con el texto oculto, del tipo "contraseña". Delante o detrás de estos elementos debemos indicar, mediante el lenguaje HTML habitual para texto, el tipo de datos que queremos que el visitante nos proporcione, ya que los campos de texto son simplemente cajas, en las que escribir la información, la cual será enviada posteriormente. Como ya se dijo en la página anterior, todo el formulario debe ir dentro de las etiquetas  <form> ... </form
Leer más

3. REGLAS Y ETIQUETAS DEL HTML.

Imagen
REGLAS DE HTML: Obligatorio: delimitar el ámbito de las etiquetas (salvo excepciones) etiqueta interna se cierra antes que externa etiquetas a nivel de bloque pueden contener etiquetas a nivel de línea, pero no al revés etiquetas no sensitivas a mayúsculas en vez de espacios agregar raya al piso Pero no está de más cumplir además con XHTML: Cerrar todos los tags, ie: <p> ... </p>, <li> ... </li> Incluir marca de cierre para tags vacíos, ie: <hr />, <br /> Poner entre comillas todos los atributos, ie: <img src="miimagen.gif" /> Todos los tags en minúsculas Terminar con </html> ETIQUETAS HTML BÁSICAS: Etiquetas de formato de texto Salida Etiquetas requeridas El  texto  en negritas. El <B>texto</B> en negritas. El  texto  en itálicas. El <I>texto</I> en it&aacute;licas. El  texto  en formato teletipo. El <TT>texto</TT> en formato teletipo. El  te
Leer más