Ejemplos de CSS

Inicio » CSS
Listado de todos los artículos en la categoría CSS.

Ejemplo de Scroll en div overflow

Para poner un scroll a un div es muy sencillo, solamente tenemos que utilizar la propiedad overflow:scroll y asignar un tamaño determinado al div. En cuanto el contenido lo sobrepase saldrá automáticamente el scroll. Aquí les dejo el ejemplo de scroll en div con overflow: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html;... Seguir leyendo

Ejemplo de Justificar, centrar y alinear a la derecha con CSS

Las hojas de estilo nos permiten alinear a la izquierda, derecha, centrar y justificar un texto. Aquí les dejo el ejemplo: <html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} h4 {text-align: justify} </style> </head> <body> <h1>Cómo centrar un texto</h1> <h2>Cómo alinear a la izquierda un texto</h2> <h3>Cómo centrar un... Seguir leyendo

Ejemplo de Botón con Rollover 1 en CSS

Rollover 1 CSS Para este ejemplo debemos tener 3 imágenes las cuales funcionarán como; Reposo   Sobre   Presionado   Luego en el cuerpo de nuestro sitio tenemos esto [codigo] <span id="bot1">     <a href="#2">INICIO</a> </span>[/codigo] Y asi para todos nuestros botones, después vamos a tener que hacer uso del CSS, iniciamos con este código: [codigo]    ... Seguir leyendo

Ejemplo de Fondo fijo en CSS

Alguna vez te has preguntado cómo se hacen los fondos de las páginas que no caminan, es decir, que cuando recorres para leer el texto el fondo se queda fijo. Pues aquí te tengo la solución para poner un fondo fijo con CSS.   html {         background: url(img/bg.jpg) no-repeat center center fixed;         -webkit-background-size:... Seguir leyendo

Ejemplo de Cambiar el color del texto con CSS

Con las hojas de estilo, CSS, podemos cambiar el diseño, color y formato de cada uno de los elementos de una página. En este ejemplo podemos ver como se cambia el color de los diferentes textos, mediante la aplicación de hojas de estilo a tags específicos como h1, h2 y p. Para definir el color podemos usar hexadecimal o RGB. Aquí el ejemplo de cómo cambiar el color del texto con CSS. <html> <head> <style... Seguir leyendo

Ejemplo de Cambiar el color de fondo con CSS

Estás buscandó cómo cambiar el color de fondo de tu página y tus elementos, llegaste al lugar indicado. Las hojas de estilo o CSS nos permiten controlar de manera separada el color de fondo de cada uno de los elementos de nuestra página. Aquí les dejo un ejemplo para cambiar el color de fondo de los elementos de una página con CSS. <html> <head> <style type="text/css"> body {background-color: yellow} h1... Seguir leyendo

Ejemplo de Imagen de fondo en CSS

Para colocar una imagen de fondo en una página web con CSS utilizamos el siguiente código: <html> <head> <style type="text/css"> body { background-image: url('IMAGEN.jpg') } </style> </head> <body> </body> </html>... Seguir leyendo

Ejemplo de Botón Formulario en CSS

Cuando hacemos un formulario en HTML tenemos la necesidad de hacerlo atractivo para que el usuario no se sienta incomodo con un formulario con un pésimo diseño, para debemos programar en CSS una serie de instrucciones para poder ver un botón bonito y atractivo hacia nuestros usuarios, el código a introducir es el siguiente: <style type="text/css"> <!-- .boton {     font-family: Arial, Helvetica, sans-serif;    ... Seguir leyendo

Ejemplo de Botón de Formulario en CSS

Cuando queremos que nuestro usuario vea un botón atractivo en nuestro formulario tenemos la etiqueta: <input type=”image”> Pero siempre nos quedan los bordes de los botones comunes en formularios, para corregir este problema solo debemos agregar este codigo style="margin-left:10px; cursor: hand; cursor: pointer; border: 0px none;" Quedando como resultado el siguiente código: <input type="image"... Seguir leyendo

Ejemplo de Indentación o sangria en CSS

Una funcionalidad maravillosa del CSS es que nos permite indentar (comunmente conocido como dejar sangría), lo cual sirve para dar un descanso a la vista del lector, además de darle un buen toque de gusto a la colocación del texto en nuestras páginas. <html> <head> <style type="text/css"> p {text-indent: 1cm} </style> </head> <body> <p> Ejemplo de indentación o sangría en CSS. Copia y pega... Seguir leyendo