Bufa Webmaster » CSS

Prevenir el CACHE de nuestros CSS

Jorge Maiden — Tue, 10 Jan 2012 12:19:34 +0000

Un truco para prevenir el cache de los archivos CSS de nuestras páginas web montadas en php. Para evitar el problema de tener que REFRESCAR la página basta con introducirle un parámetro al archivo css, en este caso le pasamos la fecha y hora actuales con minutos y segundos para que el valor siempre sea diferente:

echo date('Y-m-d H:i:s'); ?>" rel="stylesheet" />

De esta forma cada vez que cargemos la página web el navegador será engañado al pensar que es un estilo nuevo.

CSS: dibujar triángulos

Jorge Maiden — Wed, 28 Dec 2011 13:01:00 +0000

Algunos ejemplos utilizando solo código css para crear formas con aspecto de triángulo:

Triangulo CSS (pico superior)

.triangulo_sup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
}

Triangulo CSS (pico inferior)

.triangulo_inf {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #000;
}

Triangulo CSS (pico izquierda)

.triangulo_izq {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
}

Triangulo CSS (pico derecha)

.triangulo_der {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
}

Triangulo CSS (pico superior izquierdo)

.triangulo_top_left {
width: 0;
height: 0;
border-top: 100px solid #000;
border-right: 100px solid transparent;
}

Triangulo CSS (pico superior derecho)

.triangulo_top_right {
width: 0;
height: 0;
border-top: 100px solid #000;
border-left: 100px solid transparent;
}

Triangulo CSS (pico inferior izquierdo)

.triangulo_bottom_left {
width: 0;
height: 0;
border-bottom: 100px solid #000;
border-right: 100px solid transparent;
}

Triangulo CSS (pico inferior derecho)

.triangulo_bottom_right {
width: 0;
height: 0;
border-bottom: 100px solid #000;
border-left: 100px solid transparent;
}

CSS: Transparencia (opacity) en todos los navegadores

Jorge Maiden — Sun, 16 Oct 2011 19:12:44 +0000

Ejemplo de como utilizar la propiedad “opacity” de css para que funcione en la mayoría de navegadores (Internet explorer, Firefox, Chrome, Safari, Opera).

Ejemplo de transparencia del 50% de opacidad:

.transparencia {

zoom: 1;

/* IE */
filter: alpha(opacity=50);

/* Firefox 0.9+, Safari 2.x+, Chrome, Opera 9+, IE 9+ */
opacity: 0.5;

}

CSS: tabla de valores en PX, EM, PTS, %

Jorge Maiden — Mon, 03 Oct 2011 23:08:44 +0000

Tabla de equivalencias entre las principales unidades de medida en CSS: puntos (pts), pixeles (px), em y porfectanjes, basadas en el tamaño por defecto de 16 pixeles del navegador.

Pts	Px	Em	Porcentaje
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

CSS3 sombra interior

Jorge Maiden — Wed, 29 Jun 2011 22:33:07 +0000

Alguna vez te has preguntado ¿cómo hacer una sombra interior utilizando solo CSS3? es bastante sencillo en realidad!

Utilizaremos la propiedad “box-shadow“.

Vamos a aprovechar para crear un menu redondeado con una sombra interior en la parte superior.

1º el css:

.sombra{
-moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
}
.redondea{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.menu{
width:100%;
height: 30px;
line-height: 30px;
background:#fff;
border:1px solid #ddd;
}
.menu li{
float:left;
}
.menu li a{
padding:0 15px;
text-decoration:none;
color:#bbb;
}

2º el html de la lista del menu:

<ul class="menu redondea sombra">
<li><a href="">Inicio</a></li>
<li><a href="">Empresa</a></li>
<li><a href="">Fotos</a></li>
<li><a href="">Contacto</a></li>
</ul>

DEMO

z-index en video de youtube

Jorge Maiden — Sat, 25 Jun 2011 22:38:23 +0000

Si tenéis problemas con la posiciónde un video de youtube que aparece siempre por encima de cualquier otro elemento (menu, lightbox, etc…) de vuestra web, y con la propiedad z-index de css no conseguís solucionarlo podeis añadir la siguiente variable de wmode de transparencia al iframe del video.

Ejemplo de como añadir al src del iframe de youtube la variable: ?wmode=transparent

Centrar verticalmente con CSS

Jorge Maiden — Sun, 03 Apr 2011 23:16:03 +0000

Hay varios métodos para centrar verticalmente un elemento en CSS. Un método es utilizando al elemento como si fuera una tabla, usando la propiedad display:table en el elemento contenedor, y display:table-cell y vertical-align:middle en el elemento que deseamos centrar verticalmente.

En este caso centraremos verticalmente un texto dentro un div con la clase “.caja”:

.caja {
width:500px;
height:300px;
margin:0 auto;
border:1px solid #000;
display:table;
}
.caja span{
display:table-cell;
vertical-align:middle;
}

<div class="caja">
<span>Sin León no hubiera España, antes que en Castilla leyes</span>
</div>

Hacks CSS para IE, Safari, Opera, Firefox, Chrome

Jorge Maiden — Wed, 30 Mar 2011 20:57:14 +0000

Listado de hacks css para los diferentes tipos de navegadores y versiones.

No suelo utilizar este tipo de hacks en las hojas de estilos, pero me parece interesante y a continuación teneis un listado de hacks css dividido entre selectores y atributos proporcionado por Paulirish en su blog:

Selectores

/* IE6 y superiores */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Safari, Opera */
html>body #tres { color: red }

/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y superiores, Safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

Atributos

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; }

Detectar ipad & iphone con CSS3

Jorge Maiden — Tue, 22 Mar 2011 20:21:04 +0000

Usando CSS3 Media Queries podemos detectar el navegador, y portanto cargar una determinada hoja de estilos para cada dispositivo.

Para detectar el ancho utilizamos la propiedad device-width para controlar la altura junto con los prefijos min/max para controlar la altura mínima o máxima.

Un ejemplo para detectar iphone o ipad:

Un ejemplo de detectar con CSS3 la orientación de la pantalla (vertical o horizontal) en el ipad y cargar un estilo u otro:

Otras propiedades:

height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Condicionales para Internet Explorer

Jorge Maiden — Thu, 17 Mar 2011 19:48:52 +0000

A veces es necesario el uso de condicionales de IE, especialmente si deseamos corregir errores de maquetación en las hojas de estilo para versiones desfasadas del Internet explorer.

Un ejemplo de condicionales que debemos insertar dentro del de nuestra web para filtrar los estilos CSS de las diferentes versiones de IE6, IE7, IE8: