How can I change the default width of a Twitter Bootstrap modal box?

body .modal-admin {
 /* new custom width */
 width: 750px;
 /* must be half of the width, minus scrollbar on the left (30px) */
 margin-left: -375px; }

Use multiple custom fonts using @font-face?

You only have to include diferents @font-face


@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

How do I make a semi transparent background? - css3

use rgba()

.transparent{
background:rgba(255,255,255,0.5);
}
This will give u 50% opacity while the content of the box will continue to have 100% opacity.

Trucos CSS (Tutorial parte 11) - Comprimir el CSS

En servidores como apache en el archivo .htaccess podemos escribir una directriz e indicar al servidor que cuando envie un archivo CSS lo comprima para que su peso sea menor. El cliente se encarga de descomprimir el archivo.

¿Cómo activar la compresión dentro del archivo .htaccess?

<IfModule mod_deflate.c>
AddType application/php .php
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>


«Anterior

Trucos CSS (Tutorial parte 11) - Comprimir el CSS

Trucos CSS (Tutorial parte 10) - Minimizar CSS

Para minimizar el CSS tenemos que utilizar programas o scripts de minimización. Estos programas eliminarán los caracteres no visibles y los comentarios. Incluso hay programas de minimización capaces de unir dos archivos en uno. Esto nos permite una mayor velocidad en la descarga del CSS.

Aquí tenemos un programa que se llama minify que hace lo mencionado antes. Descarga Minify

«Anterior

Trucos CSS Trucos CSS (Tutorial parte 10) - Minimizar CSS

Siguiente»

Trucos CSS (Tutorial parte 9) - Utilizar Sprites

¿Qué es un Sprite?
Un Sprite es coger un trozo de una imagen y colocarla en un lugar de la web. Todos pensamos que los sprites se utilizan sólo con icono, es decir imágenes pequeñas para ello veremos los sprites de www.softonic.com. que utilizan una imagen para colocar fondos de cabeceras y la imagen es de gran tamaño.

«Anterior

Trucos CSS Trucos CSS (Tutorial parte 9) - Utilizar Sprites

Siguiente»

Trucos CSS (Tutorial parte 8) - Abreviaturas de CSS

Aquí no quiero alargarme mucho porque lo que se tiene que explicar está todo en la Cheat Sheet de CSS. Ahí encontraremos el pdf que no explica como utilizar las abreviaturas de CSS.


• background-color, background-repeat, background-image, background-position, -> background
• Text-align, text-shadow, text-indent -> text
• Font-family, font-style, font-variant, font-weight, font-stretch, font-size -> font
• Border-left, border-right, border-top, border-bottom -> border

«Anterior

Trucos CSS Trucos CSS (Tutorial parte 8) - Abreviaturas de CSS

Siguiente»

Trucos CSS (Tutorial parte 7) - Los colores en CSS

Los navegadores nos permiten reducir el tamaño de un color específico abreviandolo. De esta manera reducimos el tamaño del CSS. La abreviación del color consiste en elegir un color que tenga dos cifras iguales; veamos el ejemplo:

#FFCC66 se puede abreviar en #FC6

Es verdad que no es una gran mejora, pero todo ayuda.

«Anterior

Trucos CSS (Tutorial parte 7) - Los colores en CSS

Siguiente»

Trucos CSS (Tutorial parte 6) - min-height en IE

La propiedad min-height la reconocen todos los navegadores menos Internet Explorer. Para emular este comportamiento en el navegador Internet Explorer debemos hacer lo siguiente:

Firefox, Opera, Chrome: min-height:100px;
IE: min-height:100px;height:auto !important; height:100px;

«Anterior

Trucos CSS (Tutorial parte 6) - min-height en IE

Siguiente»

Trucos CSS (Tutorial parte 5) - Usar clases aninadas

¿Cómo usar clases anidadas en CSS?
Para que nos entendamos, usar clases anidadas o identificadores anidados quiere decir poner varias propiedades dentro de los id ó class de css. Para ver cómo usar las clases anidadas, haremos un ejemplo y quedará explicado.
Primero debemos preparar las clases a anidar en css.

.blanco{color:#ffffff;}
.azul{color:#5c7999;}
.naranja{color:#eabd82;}

.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}

.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs14{font-size:14px}
.fs15{font-size:15px}

.mt5{margin-top:5px}
.mr5{margin-right:5px}
.ml5{margin-left:5px}
.mb5{margin-bottom:5px}
.m5{margin:5px}

.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pl5{padding-left:5px}
.pb5{padding-bottom:5px}
.p5{padding:5px}

Una vez definidos nuestros estilos en el archivo CSS, vamos al archivo html y lo editamos. Si tenemos un texto que queremos que se alinee a la derecha, que tenga un margen derecho de 5 px, un padding derecho de 5 px, fuente 10 px y color naraja, lo podemos definir en el CSS de la siguiente forma:


.estilo_parrafo{text-align:right;padding-right:5px;margin-right:5px;color:#eabd82;font-size:10px}

<p class="estilo_parrafo">Este es el párrafo</p>

Con clases anidadas haríamos:

<p class="mr5 pb5 fs_10 naranja tar">Este es el párrafo</p>


«Anterior

Trucos CSS (Tutorial parte 5) - Usar clases anidadas

Siguiente»

Trucos CSS (Tutorial parte 4) - Hacks de Internet Explorer

Como todos sabemos Internet Explorer tiene siempre un comportamiento diferente de todos los standares. Por esto hay hacks que nos permiten introducir estilos o propiedades sólo para Internet Explorer.

Hacks: para Internet Explorer 6 tenemos el hack "_" y para Internet Explorer 6 y 7 tenemos el hack "#". A continuación mostraremos un ejemplo para ver como debemos utilizar estos hacks dentro de nuestra hoja de estilos.


//en todos los navegadores tendremos un margen de 10 pixeles
div img{width:100px;margin:10px;}

//en explorer 6 y 7 tendremos un margen de 15 pixeles
div img{width:100px;margin:10px;#margin:15px}

//en explorer 7 tendremos un margen de 15 pixeles y en explorer 6 un margen de 20 pixeles
div img{width:100px;margin:10px;#margin:15px;_margin:20px}


«Anterior

Trucos CSS (Tutorial parte 4) - Hacks de IE

Siguiente»

Trucos CSS (Tutorial parte 3) - Reset al CSS

¿Porqué hacer un reset del CSS?
La razón de hacer al principio del CSS un reset es igualar el comportamiento de todos los navegadores. Tenemos que tener en cuenta que no todos los navegadores tienen los mismos estilos por defecto.

Aquí es dónde nos encontramos con mayor diferencia. Internet Explorer funciona de diferente manera que el resto de navegadores como Firefox, Chrome, Opera, Safari, etc...

Al resetear el CSS facilitamos la maquetación de la página web. Empezamos a crear los estilos desde 0.

A continuación mostramos como hacer un reset de un CSS.
/****************************
*** RESET ***
****************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:??; }
abbr,acronym { border:0; }
form label { cursor:default }
a{outline:none;}
a img{border:0px}


«Anterior

Trucos CSS (Tutorial parte 3) - Reset al CSS

Siguiente»

Trucos CSS (Tutorial parte 2) - Dividir el CSS

Dividir el CSS en parte Pública y parte Privada, es decir, si nuestro portal tiene una parte que necesita identificar al usuario con login y password. En este caso vale la pena que creemos un CSS para la parte privada.
Ej: css_publico.css y css_privado.css

Con esta implementación mejoramos el tiempo de descarga del CSS. El navegadores renderizará más rápido los estilos y el usuario tendrá una mejor experiencia.

«Anterior

Trucos CSS (Tutorial parte 2) - Dividir el CSS

Siguiente»

Trucos CSS (Tutorial parte 1)

Este pequeño tutorial de CSS nos ayudará a mejorar la hoja de estilos para que se descargue con mayor velocidad y tenga un comportamiento similar en todos los navegadores.

Índice del tutorial de CSS

1. Dividir el CSS
2. Reset al CSS al principio
3. Hacks de Internet Explorer
4. Usar clases anidadas
5. min-height en IE
6. Los colores en CSS
7. Abreviaturas propias de CSS
8. Utilizar Sprites
9. Minimizar el CSS
10. Comprimir el CSS