Archive for the ‘ CSS ’ Category

Generar sombra con CSS

  • Written by Dunderio
  • Posted 2012/01/13 at 5:49 pm

Para generar sombra con css es tan fácil como agregar las siguientes lineas a la clase que se tenga asignada al objeto.

Ejemplo:

.div_con_sombra {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);
}

No Comments
Filed under: Consejos y trucos, CSS

Como centrar un tabla usando css

  • Written by Dunderio
  • Posted 2010/10/26 at 4:45 pm

Me he topado varías veces con este problema y siempre pienso que esta vez no se me va a olvidar. Por lo que decidí publicarlo para dejarlo por escrito.

Ponemos un <div> encerrando la tabla

<div class=centrar_tabla>

<table class=tabla_centrada><tr></tr></table>

</div>

Luego en el archivo css definimos:

.centrar_tabla
{
text-align: center;
}

.tabla_centrada

{
margin: 0 auto;
text-align: left;
}

Espero les sea de utilidad

1 Comment
Filed under: CSS

Como hacer un botón con gradiente en CSS

  • Written by Dunderio
  • Posted 2010/10/13 at 12:36 pm

Estoy desarrollando un website en el que quiero tener botones con gradiente y esquinas redondeadas pero sin tener que estar creando imagenes para cada uno. Por esto investigué un poco y encontre el código CSS que me permite realizarlo.

.button
{
behavior: url(border-radius.htc);
border-top: 1px solid #f7d186;
background: #e08619;
background: -webkit-gradient(linear, left top, left bottom, from(#e86823), to(#e08619));
background: -moz-linear-gradient(top, #e86823, #e08619);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e86823, endColorstr=#e08619);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#e86823, endColorstr=#FEB764)”;
padding: 5.5px 11px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 22px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
text-align:center ;
}
.button:hover {
border-top-color: #de7d07;
background: #de7d07;
color: #404040;
}
.button:active {
border-top-color: #ffffff;
background: #ffffff;
}

El archivo .htc lo puedes encontrar aqui

No Comments
Filed under: CSS

Como usar topmargin y leftmargin en Firefox

  • Written by Dunderio
  • Posted 2010/08/25 at 11:48 am

Como habrán notado los atributos topmargin y leftmargin aplicados en la etiqueta no funcionan en Firefox ya que los mismos son nativos de IE.

La solución es muy sencilla para un topmargin=0 y leftmargin=3
Solución 1-En la etiqueta <body> agregas

style=”margin: 0px 0px 3px;”

Solución 2-Dentro de <HEAD> agregas

<style>
body {margin: 0px 0px; 3px;}
</style>

2 Comments
Filed under: asp.net, CSS