template

Home • Contacto • RSS • Translate Site • Enlaces • Gestionado con Bligoo

Artículos escritos sobre "css" en otros sitios

Cambiar el diseño de un botón en Bligoo

Enviado por Ximena el lun 23/06/2008 a las 13:24

Con la herramienta Web Developer de Firefox podemos saber qué class tienen los botones de los formularios. Usamos (del Web Developer) CSS >View Style Information (Ctrl + Mayús. + Y) en alguno de los botones que si tienen estilo, como por ejemplo el del formulario de contacto que entrega Bligoo o el del blidget Usuarios registrados. En mi blog el class es form-button, supongo que para todos los usuarios de Bligoo es lo mismo. Esto sirve para darle estilo a botones de formularios externos como por ejemplo el del buscador Google ligado a mi blog.

En el css el código es:

.form-button
{
background #ffffff;
border: 1px solid #ddd;
}

En este código, background es el color de fondo y border el borde, 1px, el grosor de este, solid, el tipo de borde y #ddd, el color del borde.

Para ver los tipos de bordes puedes ver el artículo border.

Etiquetas: bligoo código botón | Secciones CSS

Leído 25 veces |

| Comentar

border

Enviado por Ximena el lun 10/03/2008 a las 14:42

¿Cómo cambio el estilo del borde?

Para cambiar el estilo del border están los siguientes valores:

None:

No se visualiza el borde, pero se puede poner la anchura.

Ej:

2px none;

En este caso la anchura son 2px y none indica que no se ve el borde.

Solid:

Ej:

border: 2px solid #eeaabb;

Dotted:

Ej:

border: 2px dotted #eeaabb;

Dashed:

Ej:

border: 2px dashed #eeaabb;

Double:

En este caso la línea será doble y la suma de las dos líneas y el espacio entre ambas será el ancho del borde.

Ej:

border: 4px double #eeaabb;

Groove:

Ej:

border: 4px groove #bb3355;

Ridge:

Ej:

border: 4px ridge #bb3355;

Inset:

Ej:

border: 3px inset #bb3355;

Outset:

Ej:

border: 3px outset #bb3355;

Si lo que quieres es una línea de menos de un pixel esto puede ser la solución.

Ej:

border: 1px thin #eeaaaa;

Etiquetas: borde línea valores border | Secciones CSS

Leído 68 veces |

| Comentar

Plantilla A

Enviado por Ximena el mar 04/03/2008 a las 23:03

Licencia plantilla:

http://creativecommons.org/licenses/by-nc-sa/2.0/cl/

Para poder guardar la plantilla copia el texto y pégalo en el Bloc de notas (si tienes Windows). Te recomiendo lo guardes en formato UTF-8.

Etiquetas: Plantilla A plantilla template css | Secciones bligoo template

Leído 74 veces |

| Comentar

text-transform

Enviado por Ximena el lun 03/03/2008 a las 23:30

Me pregunté ¿cómo puedo poner todo en mayúscula o todo en minúscula? Entonces encontré la propiedad de texto text-transform.

MAYÚSCULA:

Por ejemplo: Quiero modificar este texto.

Para ponerlo todo en mayúscula utilizo en el CSS lo siguiente:

text-transform: uppercase;

Y queda: QUIERO MODIFICAR ESTE TEXTO.

minúscula:

Para ponerlo todo en minúscula hago lo siguiente:

text-transform: lowercase;

Se vería: quiero modificar este texto.

Primera Letra En Mayúscula:

Hay que hacer esto:

text-transform: capitalize;

Quedaría así: Quiero Modificar Este Texto.

¿Qué te parece? Ahora sólo queda probar.

Etiquetas: texto propiedad text-transform | Secciones CSS

Leído 103 veces |

| Comentar

Esmeralda 1.2

Enviado por Ximena el sáb 02/02/2008 a las 22:06

Licencia plantilla:

http://creativecommons.org/licenses/by-nc-sa/2.0/cl

Para poder guardar la plantilla copia el texto y pégalo en el Bloc de notas (si tienes Windows). Te recomiendo lo guardes en formato UTF-8.

Etiquetas: esmeralda 1.2 template plantilla css | Secciones bligoo template

Leído 82 veces |

| Comentar

Duo

Enviado por Ximena el mar 15/01/2008 a las 1:38

Licencia plantilla:

http://creativecommons.org/licenses/by-nc-sa/2.5/us/

Para poder guardar la plantilla copia el texto y pégalo en el Bloc de notas (si tienes Windows). Te recomiendo lo guardes en formato UTF-8.

Etiquetas: duo template plantilla css | Secciones bligoo template

Leído 88 veces |

| Comentar

Links con subrayado de distinto color cuando el mouse pasa sobre ellos

Enviado por Ximena el jue 03/01/2008 a las 13:45

Para poner un subrayado de otro color cuando el mouse pasa sobre un link, se puede solucionar con un borde. En este caso el borde va en a:hover . No olvides que al poner el borde no es necesario un subrayado (underline).

Si te gustan los enlaces (a) con subrayado, sustituye none por underline.

a {
color: #bc1c2d;

text-decoration: none;

}

a:hover {
color: #333;

text-decoration: none;

border-bottom: 2px solid #41aadc;
}

Abajo una imagen que muestra más o menos como se vería el código CSS.

Primero está el enlace y después el enlace cuando el mouse pasa sobre él.

Si quieres cambiar el grosor del borde modifica lo que está en rojo, a continuación:

a:hover {
color: #333;

text-decoration: none;

border-bottom: 2px solid #41aadc;
}

Por ejemplo, si quieres el borde más delgado pon 1px

Etiquetas: subrayado hover enlaces border links bottom | Secciones CSS

Leído 269 veces |

| Comentar

1 | 2 | 3 Siguiente Última

Encuéntralo

Secciones

Aquí

Calcula los usuarios online de tu web o blog

Buscador de bligueros

Top

template

Cambiar el diseño de un botón en Bligoo

border

Plantilla A

text-transform

Esmeralda 1.2

Duo

Links con subrayado de distinto color cuando el mouse pasa sobre ellos

Encuéntralo

Secciones

Aquí

Buscador de bligueros

Comentarios recientes

Recomendados de otras webs

Top

Publicaciones