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.

14 Steps - CSS y js externos o internos

Es importante saber que los estilos CSS y los js internos, dentro de nuestro código son más rápidos que los de archivos externos. Pero también tenemos que tener en cuenta que son mucho más difíciles de depurar si están dispersos por todo nuestro código que tenerlos en un solo archivo. Es recomendable tener todos los estilos dentro de una sola hoja de estilos al igual que con nuestro código javascript para facilitar la reutilización y la actualización.

14 Steps - Evitar CSS expressions

¿Por qué evitar expresiones CSS? Debemos intentar evitar expresiones CSS del estilo cada vez que se mueva el ratón, cada vez que se presiona una tecla, cuando se redimensiona la pantalla del navegador, etc… Esto lo que hace es que se vuelvan a evaluar todas nuestras expresiones del CSS y provoquen que se haga más lenta nuestra página. Evitando expresiones regulares apoyamos a los estándares web y esto también significa un incremento del rendimiento y reduce el procesamiento por parte del navegador.

14 Steps - Poner hojas de estilo al principio

¿Por qué poner las hojas de estilo al principio del html? Las hojas de estilo no son bloqueantes, es decir, el navegador no deja de descargar elementos mientras se descarga un css. Se recomienda ponerlas al principio y con la etiqueta <link> porque el navegador va renderizando poco a poco el html. En conclusión la página se va descargando y las cosas se van poniendo en su lugar y con su tamaño poco a poco.
Se recomienda ponerlas al principio porque la experiencia del usuario es mejor que si lo cargásemos al final.

<link rel="stylesheet" type="text/css" href="estilos.css" title="default"/>


14 Steps - Componer CSS's y Javascripts

¿En qué consiste componer CSS’s o scripts? Componer un CSS consiste en coger todos los CSS que tenemos añadidos en una archivo html, php, etc… y juntarlos en unos sólo. La ganancia es mayor dependiendo del número de archivos que tengamos por separado. Lo que está claro es que podemos llegar a reducir el número de peticiones http a dos. Una para la hoja de estilos CSS y la otra para el javascript.
Un programa útil y sencillo de utilizar es el minify. Incluso nos quita los caracteres no útiles como retornos de carro o comentarios. Con este programa reducimos las peticiones http y encima reducimos el tamaño de los CSS y javascripts.

En esta url http://code.google.com/p/minify/ tenemos el código del proyecto minify que sirve para minimizar y unir css y js en un solo archivo.

14 Steps - Imágenes Inline

Otra opción para optimizar nuestro código es insertar directamente la información de la imagen. A continuación veremos una imagen en la que ponemos la información en el mismo src de la imagen. También mostraremos el código generado en base 64.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR4Ae2dCZSdR3Xn7+t+S++b1OpWa21JlmQZyQvCNmAZYxvbmOWEeA42S5LDTDIzIWGSQDiTk4GTCWeWM3OYZAITcsbBCRgI24ADZjG2Yxtb3uRFkrVbu9RqtXpR73u/7vn/6r37+tOzVizpdXK6ur9X9dVX23fvrVu3bt2qL2Yz2O3evbuyra3tmnQ6/a6ioqLrJycnY/LjuoqmpqZiugia4nmLYn5isZgp3pRnilvicKSP+iEy8kM5pJGTl0mbTR8iCUefEc5mnywuLh5V/jHV+UgikXh8w4YNr2efzXgvB6CZ1NJnn3123tDQ0O+qTR9NJpMry8rKHMmhmULQBTdXCAuE4Rm5Px/n6ajTw9F8HiciMIhI7R4YHx9/Qun/9y233PJkNO1MDJ8fFC5jy59++uk7R0ZGvlxbW3vF4OCgbdq0yV577TXr6ekJRAAi6PFchLlwZwtHm+/po3EePtczkE0aRzq+XyUlJbZ8+XK7+eab7eqrr7be3t7xsbGxvxJX+Py73/3uEa9jpvkzigCefPLJ+wSwvxPySx977DG7//777dChQzkkO+DPBMRzPT9TvosRD2FAlKWlpXbHHXfYH//xH9ucOXOsq6vrewsXLvyt5ubmGUkEM4YAnn/++XcODw8/UlNTU/GNb3zDvvSlLwWWGo/HLwZ+LlsZEII4mF111VX2la98xRoaGqyzs/OLN91002cvWyMuoKKiC0h7yZJu3bq1fHR09Esg/5lnnrEvf/nLJmHK/rkhHwDBheACO3bssC984QsBZpJh/lByzc2XDIBvouAZQQDqMfdoDL1OwpM98MADp4yzb+LdCpoVInjqqads48aNNm/evLiE2c+IO8wYjuvAKTgBZIHysfLycnv99ddNUz8TsLx9/6x9yTOGLANXSKVSt73yyivLZtoLFXyA3b59+zyx+mth+YcPHzZJzoGFXixAMSZT5rkc6WgD07mL5SgLIXZiYsKqq6vLJRBeq7L3X6zyL0Y5BScA9ZImzZ/r6CUSAi/GO+XKAKlMz2699VZDl8C9zxTwmbfjc/Hs5ZdftiNHjlw0IqBchjVmB7RDBLE017gZEij4ECAgpQQYebHz6qkXAjd6/vXXX2+SwE1CJtrB0BvpkSCGOIhuYGDAqqqq7MMf/nB4fiF1nCstdUEAcANdledKf7...

14 Steps - CSS sprites

Ahora mostraremos como hacer sprites en CSS. La técnica consiste en coger una imagen y localizar una zona que la usaremos para mostrar un trozo de la imagen. Lo que conseguimos con los sprites es reducir las peticiones http de imágenes.

Lo que queremos es crear diferentes botones, con la imagen que mostramos a la izquierda. Lo que tendremos que hacer es ir al CSS y modificar el CSS e introducirle los backgrounds indicando que zona de la imagen debe poner en cada botón:







a.ejemplo {display:block; font-weigh:bold; padding:10px 10px 10px 10px; text-decoration:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF04zIki3Bcab-YWaA2vdMKl39a0f7aHp7ie3OMtg8Wb8HbtR2Yj6Zp57RBywuzsIBZ_vVoScV1-bcJfnHMV_Lz0zMuMcmLYHOs8IoZYfId9xajeW_AKG_n1dBdYeUWUNvBeWFyt7oCqo6/s400/botones.gif) 0px 0px;text-align:center;color:#fff}
a:hover .ejemplo {text-decoration:underline;}

Aquí vemos el ejemplo:

Botón

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