Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Qué se puede hacer con CSS (algunos trucos y otras cositas útiles)
Qué se puede hacer con CSS
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 46 | 4:39 PM
Solución a 10 propiedades CSS no compatibles con IE6

Cuando creas un sitio web o un blog, muchas veces nos fijamos en que Internet Explorer 6 no soporta algunas propiedades que hemos aplicado, mientras que otros navegadores sí. Esto puede ser un asunto muy engorroso para el desarrollador, se empieza a poner nervioso sin encontrar la solución a su fallo.

En esta entrada recopilaré algunas de las propiedades que no pueden implementarse correctamente en Internet Explorer 6 (dado que no son compatibles) e iré indicando sus respectivas soluciones.

1. Bordes redondeados
Aunque ya os muestro una solución para crear bordes redondeados en Internet Explorer:

Podemos usar un archivo .HTC, pero para ello debemos asignar el correcto MIME Type para htc behavior en tu servidor. Es muy importante realizar este paso. A continuación se muestra como hacerlo:

1. Ve a tu Cpanel y haz click en un enlace llamado MIME Types Link.
2. Debajo de MIME Type, añade text/x-component.
3. Debajo de las extensiones, añade htc.
4. Reinicia el servidor web Apache.

Para mas detalles de cómo añadir MIME Type visita el soporte de Microsoft.

Todo lo que necesitas hacer para aplicar bordes redondeados en IE6 es descargar el HTC desde HTMLremix o un enlace alternativo e incluir el siguiente código en tu archivo CSS:

Quote
.div_class_name{
behavior:url(border-radius.htc);
}

Alternativa en Javascript: JQuery Corner es una alternativa en Javascript que te permitirá crear bordes redondeados compatibles en todos los navegadores.

2. El popular fallo de la transparencia PNG
Muchos diseñadores deben utilizar transparencia en sus proyectos, ¿por qué limitarla? Existen muchos recursos con los que podemos solucionar este error. Os mostraré unos cuantos:

Aplicando la propiedad filter (de Microsoft):

Quote
.class_name{
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
}

Alternativa HTC: Si la solución anterior no te funciona, puedes probar esta: HTC.

Si necesitas soporte en la propiedad background-position, ve a: DD_belated.

La solución que recomiendo es usar un .gif en vez de PNG o un PNG-8.

3. Opacidad
Este hack es mucho más sencillo de aplicar para que la opacidad funcione en Internet Explorer. Aplica este código donde deseas que funcione la opacidad:

Quote
.opacity_div {
filter: alpha(opacity = 50);
}

4. Posición Fixed
Todos los navegadores soportan la propiedad “fixed” pero IE 6 no. Os mostraremos varias soluciones para arreglar este fallo. Copia y pega este código donde desees que funcione la propiedad “fixed”:

Quote
* html .fixed_div{
position: absolute; /* position fixed para IE6 */
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

Solo cambia los valores tops (104) y left (15) por la posición que quieras darle a tu elemento.

El problema de esto es, que al mover la barra de desplazamiento, nos va a tirones, esto lo podemos arreglar insertando este código:

Quote
* html {
background-image: url(image.jpg);
}

Todo lo que necesitas es una imagen de 1px por 1px. ¡Suena chapuza pero debería funcionar!

5. Min-width y Max-width
Para hacer que funcione la propiedad min-width, podemos probar con esto:

Quote
.div_miclase{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}

Para la propiedad max-width:

Quote
.div_miclase{
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
}

Alternativa en Javascript: Se muestra una alternativa a la solución anterior: JQminmax es un plugin que te permitirá definir los valores máximos y mínimos para la altura y anchura.

6. Hover para elementos no anchor
Desafortunadamente IE6 solo soporta :hover para etiquetas con ancho. Esto significa que los submenús basados en CSS no funcionarán en IE6. CSSHover.htc es la mejor solución en estos casos. Puedes descargar el archivo desde xs4all.nl. El código CSS a aplicar para que funcione es este:

Quote
body {
behavior: url("csshover3.htc");
}

Como dije en el hack número 2 (transparencia PNG) no olvides definir el correcto MIME Type para htc behavior en tu servidor, esto es fundamental.

7. Min-height y Max-height
Min-height:
Aplicamos este código (podría no considerarse un hack ya que utiliza CSS válido):

Quote
.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}

Max-height:

Quote
.div_class_name{
height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
}

8. Escalado bicúbico para imágenes
Una línea arregla todo este fallo. Podemos saber más de este hack en el blog de Chris Coyier:

Quote
img {
-ms-interpolation-mode: bicubic;
}

9. Text-indent negativo para input button
El valor text-indent normalmente es utilizado para esconder valores de texto dentro de los botones, por lo que podemos usar imágenes de fondo para mostrar el texto del botón. IE6 no soporta la propiedad text-indent en los botones así que debemos usar este código CSS:

Quote
input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/button_image.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}

10. Text-shadow
Este filtro para la propiedad text-shadow es uno de los filtros más usados en IE:

Quote
.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}

Una pequeña curiosidad: Si a alguien le gusta la imagen con la que ilustré la entrada, puede verla en un formato más grande.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 47 | 5:49 PM
8 propiedades CSS que casi nadie usa (aunque debería)

Algunas propiedades CSS no son tan conocidas pero pueden sernos de suma utilidad a la hora de dar un diferencial al diseño de nuestros sitios web. Igualmente debemos tener la precaución de fijarnos que algunas no funcionan en todos los navegadores.

De esta forma podremos lograr efectos innovadores como máscaras de capas, sombra en los textos, ajuste de fuentes o configuración del formato de un sitio para su impresión, incluyendo la disposición de los elementos. Veamos entonces estas propiedades CSS.

Haciendo clic en cada ítem accederás a la página de cada propiedad para conocerla en detalle:

1. Clip:

Quote
clip: rect(5px, 40px, 45px, 5px)

Funciona como un “clipping mask” en Adobe Illustrator, para los que desconozcan el efecto es similar a poner una hoja de papel con un cuadrado calado en el medio. Lo que se ve a través de la ventana será la capa “de abajo”. Así podemos mostrar encuadres de nuestro sitio, entre otras cuantas cosas que se nos puedan ocurrir.

2. Text-shadow (sombra para el texto):

Quote
text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px

3. Quotes (comillas para las citas):

Quote
q { quotes: '"' '"' }

Nota: Quotes no es soportado actualmente por Internet Explorer.

4. Marks (genera marcas de corte o diferencia):

Quote
@page: { marks: <value>; }

5. Page-break-before/after:

Quote
page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);

Esta propiedad es muy recomendable, acomoda una página para que se imprima por “sectores” respetando los elementos h3 con su respectivo contenido, para no dejar un título “colgado” y en otra hoja el contenido correspondiente.

Aquí tenemos un ejemplo:

Quote
<STYLE>
H3 { page-break-before: always }
</STYLE>
</HEAD>
<BODY>
<H3>Start New Section on New Page</H3>

6. Font-stretch (maneja el aspecto de la fuente):

Quote
font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

7. Font-variant (fuente variante):

Quote
font-variant: (normal | small-caps)

Sirve para mostrar frases en una tipografía de menor tamaño y con todos los caracteres en mayúsculas.

8. Table-layout:

Quote
table-layout: (auto | fixed)

Sirve para acomodar el layout (estructura) del diseño de la página, que cargará mucho más rápido.

No dudes en experimentar con estas propiedades, sólo ten la precaución de testearlas antes de subir los cambios a tu página web en caso de no estar muy familiarizado con el uso de estilos CSS.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 48 | 12:25 PM
CSS: Cómo utilizar caracteres escapados en tu código

Una "secuencia de caracteres escapados" se le llama a una secuencia de caracteres utilizada para representar de forma colectiva un carácter diferente.

Independientemente de dónde aparecen, los valores de string en el CSS se comportan de manera similar. Lo más importante para recordar acerca de ellos es que no son HTML.

Esto significa, por ejemplo, que la inserción de llaves, sin escaparlos como referencias a entidades HTML (<y>) es perfectamente legal. En otras palabras, la regla:

Quote
#example:before { content: "3 <5"; }

Resultará en un pseudo-elemento cuyo contenido son los cinco caracteres (incluyendo espacios) y no una etiqueta HTML de comienzo rota. De forma similar, esta regla:

Quote
#example:before { content: "<"; }

Resulta en un pseudo-elemento cuyo contenido son los cuatro caracteres < y no un ícono de "menor a". Esto significa que el carácter < y el & no son tratados de forma especial por los analizadores de strings CSS, a pesar de que sean caracteres con significado especial en lenguajes derivados de SGML como el HTML y el XML.

Dentro de los strings CSS, el único carácter con sentido especial es la barra (\). Este carácter delimita el comienzo de una secuencia de escape, de forma bastante similar a lo que el ampersand (&) hace en el código HTML.

Las secuencias de escape son útiles porque permiten a los autores de hojas de estilo representar los caracteres que normalmente serían ignorados o interpretados de manera diferente por las reglas tradicionales de análisis de CSS. El ejemplo más evidente de esto es la representación de una barra invertida en un string CSS. Al principio, podrías pensar que la siguiente regla CSS produciría una barra invertida al comienzo de cada párrafo, pero estarías equivocado.

Quote
p:before { content: "\"; }

Cuando un analizador CSS lee la declaración en esta regla, considera que la barra invertida es el comienzo de una secuencia de escape, por lo que lo ignora. A continuación, se encuentra con una cita doble y dado que este carácter no es un componente legal en una secuencia de escape, lo reconoce como el final de la cadena de valor y regresa. El resultado es una cadena vacía, sin barra invertida: " ".

Para obtener la aparición de una barra invertida, por lo tanto, necesitamos "escapar" de ella, o "deshacer" su significado especial. Esto es bastante simple. Nos limitamos a anteponer la barra invertida con otra, como esta:

Quote
p:before { content: "\\"; }

Esta vez, cuando un analizador CSS lee la declaración en la norma, se encuentra con la primera barra diagonal, cambia a su "modo de secuencia de escape", encuentra una barra invertida (la segunda que escribimos) como parte del valor del string en análisis, y luego encuentra el final del valor por medio de las comillas. El resultado es lo que buscábamos originalmente, y el valor que devuelve el analizador de CSS es una barra invertida: "\". Tengan en cuenta que el CSS no hace distinción entre cadenas de comillas simples o dobles, por lo que en cualquier caso, dos barras invertidas son necesarias en el código para dar salida a una.

Una situación similar ocurre si se desea producir una cita doble dentro de una cadena entre comillas dobles. En lugar de escribir """, deberías escribir" \ ""; para decirle al analizador CSS que trate a la segunda cita como parte de un valor en lugar de cómo si fuera el delimitador del final del valor. Como alternativa, puedes utilizar comillas sencillas como el delimitador del string (contenido:'"';).

Después de la barra invertida de partida, solamente los dígitos hexadecimales (números del 0 al 9 y las letras A a la F) pueden aparecer dentro de una secuencia de escape. En las secuencias de escape, estas cifras siempre son referencia a puntos de código Unicode, independientemente del conjunto de caracteres utilizados en la hoja de estilo en sí. Como resultado, es posible representar los caracteres de manera uniforme en una hoja de estilo que no son posibles de incrustar directamente dentro de la hoja de estilo en sí.

Los caracteres acentuados (como la "E" en éste o café) son un ejemplo de una clase de caracteres a los que habría que darle escape en una cadena de CSS si la hoja de estilos estuviera codificada en formato ASCII en lugar de, por ejemplo, UTF-8.

Una aplicación útil para esto es integrar saltos de línea en el contenido generado. El punto de código Unicode para el carácter de nueva línea es U+00.000 A. En una cadena de CSS, esto se puede escribir como \00000A. De una manera similar a la que la forma hexagonal de un triplete para los valores de color se puede acortar, las secuencias de escape también se pueden acortar quitando los ceros a la izquierda desde el punto de código, así que otra manera de escribir una nueva línea es \A. He aquí una regla CSS que separa las dos palabras "Hello" y "world" con una nueva línea, colocando cada una en su propia línea.

Quote
#example:before { content: "Hello\Aworld."; }

Algo a tener cuidado al usar las secuencias de escape en strings de CSS es poner fin a la secuencia de escape en el que se proponen. Observen lo que ocurre si nuestro texto "Hello world" ha cambiado a "Hello boy".

Quote
#example:before { content: "Hello\Aboy."; }

Ahora, en lugar de una nueva línea (punto de código \A), nuestra secuencia de escape es una marca de citación de doble ángulo que apunte a la izquierda, o (punto de código \ AB). Nuestro contenido generado ahora dice "Hello « Oy". Esto sucede porque la "B" en el "boy"se interpreta como un dígito hexadecimal. La secuencia de escape termina en el siguiente carácter, la "O", ya que la letra no es también como un dígito.

De forma explícita, se puede concluir una secuencia de escape en una de dos maneras. En primer lugar, se puede especificar la secuencia en su totalidad utilizando los seis dígitos hexadecimales (incluyendo los ceros iniciales, si los hay). En segundo lugar, puedes añadir un espacio. Las dos reglas CSS siguientes, por lo tanto son equivalentes:

Quote
#example:before { content: "Hello\00000Aboy."; }
#example:before { content: "Hello\A boy."; }

Sabiendo esto, ahora podemos dividir nuestro ejemplo anterior de la imagen a través de dos líneas justo donde queremos. Presten mucha atención a la adición del espacio en blanco en la declaración white-space: pre;.

Ya que estamos generando espacios en blanco y en la mayoría de las situaciones todos los espacios en blanco en HTML se acoplan en un único espacio, la declaración de white-space es necesaria para interpretar literalmente el salto de línea (como si todo el contenido se generará dentro de un elemento <pre>).

Quote
img[title]:before {
content: attr(title) "\AImage retrieved from"
attr(src);
white-space: pre;
display: block;
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 49 | 1:44 PM
Como usar distintos colores en un select menu con CSS

Podemos personalizar nuestros select menu asignándoles clases a las opciones del menú.

Como prueba añadiremos distintos colores de fondo en el desplegable.

Primero: Creamos una página nueva HTML.

Segundo: Dentro de las etiquetas HEAD definimos el CSS.

Quote
<style type="text/css">
body{
background-color:#666666;
color:#FFFFFF;
text-align:center;
}
/*Recuerda: para definir las clases
se coloca un punto delante del nombre*/
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}
</style>

Tercero: Dentro del Body, creamos nuestro formulario, asignando a cada option la clase que le corresponda.

Quote
<form method="post" action="PAGINA.HTML">
<label for="color">Selecciona tu color favorito:</label>
<p>
<select name="color" id="color">
<option value=" ">Selecciona Uno</option>
<option value="amarillo" class="amarillo">amarillo</option>
<option value="rojo" class="rojo">rojo</option>
<option value="verde" class="verde">verde</option>
<option value="azul" class="azul">azul</option>
</select>
</p>
<p>
<input type="submit" name="submit" id="submit"
value="Enviar!" />
</p>
</form>

Cuarto: Guardar y Probar.

Este mismo procedimiento, es suficiente para añadir imágenes en cada option, sólo modificando las clases CSS, de tal manera de poder dejar muy bien personalizado nuestro menú de selección.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 50 | 4:47 PM
Hacks en CSS útiles para Internet Explorer

Debido a la diversidad de navegadores y las diferencias entre versiones es muy útil hacer uso de algunos hacks si queremos que la apariencia de nuestras páginas en Internet Explorer, sea igual que en el resto de los navegadores que soportan los estándares.

A continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.

Detectando la versión de Internet Explorer

Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales.

Estos fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!– cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro.

Este tipo de hack se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.

Quote
<!--[if CONDICION]>
Código HTML
<![endif]–>

En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,5.5,6 o 7).

Quote
IE
Cualquier versión de Internet Explorer
lt IE X
Versiones inferiores a X
lte IE X
Versiones inferiores o iguales a X
IE X
Solo para la version X
gte IE X
Versiones superiores o iguales a X
gt IE X
Versiones superiores a X

A continuación mostramos un ejemplo del uso de este hack:

Quote
<!-- (…) -->
<head>
<title>Título</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="ie_any_version.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lt IE 7]>
<link href="ie_6_and_below.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !lt IE 7]>
<![IGNORE[--><![IGNORE[]]>
<link href="recent_versions.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
<!--[if !IE]>-->
<link href="not_ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
</head>
<!-- (…) -->

El hack del guión bajo

Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

Quote
#textbox{
width: 450px;
/* Firefox y los demás */
_width:400px;
/* Internet Explorer 6 e inferiores */
}

Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.
Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.

Quote
body {
background: #FFFFFF
/* Firefox y los demás */
*background: #000000
/* IE7 e inferiores */
_background: #CCCCCC;
/* Sólo IE6 */
}

En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 51 | 6:36 PM
Truco de Scroll con imágenes de fondo en CSS

¿No habéis visto ninguna web en el que el fondo tenga valor fixed y nos siga? ¿No os gustaría crear algo mejor, que el fondo fuera dinámico y cambiase depende de donde estemos en la página? Aquí aprenderemos a crear fondos dinámicos en nuestra web a medida que vayamos “[b]scrolleando” el sitio web[/b].

Es muy sencillo y podréis ver varios ejemplos muy originales.

Empecemos:

La estructura sería esta, 2 divs, uno en la cabecera y otro en el cuerpo del documento.

Quote
<html>
<head>
...
</head>
<body>
<div class="header">
...
</div>
<div class="content">
...
</div>
</body>
</html>

Ahora el código CSS para aplicar la clase a los divs:

Quote
.header {
padding:40px 40px 40px 300px;
background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
}
...
.content {
padding:10px 40px 10px 300px;
background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;
}

¡Eso es todo! Se pueden ver unos ejemplos a continuación:

Ejemplo 1
Ejemplo 2
Ejemplo 3
Ejemplo 4
Ejemplo 5
(Clicka en “Play” arriba del sitio web)


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 52 | 2:01 PM
Multi Clases en CSS

Buenas gente, hoy les traigo un pequeño truco para aquellos que están comenzando con el Diseño Web o para aquellas personas que todavía no lo conocían.

Muchas veces cuando estamos diseñando le damos estilos a cada elemento HTML y casi siempre tenemos muchos elementos con mismas características, por ejemplo tenemos un párrafo que esta en Negrita, y otro párrafo que también esta en Negrita pero con un Color diferente.

Quote
.parrafo1 {
font-weight:bold;
}
.parrafo2 {
font-weight:bold;
color:red;
}

Asi como ven en el código de arriba, pero como se habrán dado cuenta tenemos dos veces escrita el código para la negrita, que en realidad no seria ningún problema si fuera algo básico, pero en grandes proyectos es necesario usar lo menos código posible para que la pagina cargue mas rápido, para que halla menor uso de banda de ancha entre otras cosas.

Ahora les mostraré una manera sencilla de reutilizar cada clase para ahorrarnos todo ese código innecesario.

Quote
.negrita {
font-weight:bold;
}
.color {
color:red;
}

Y ahora vemos como quedaría nuestro código HTML:

Quote
<p class="negrita">
Nuestro Párrafo numero 1 que se encuentra en Negrita.
</p>
<p class="negrita color">
Nuestro segundo Párrafo que también se encuentra en Negrita pero este cambia de color.
</p>

Como pueden observar dejando un espacio entre ambas clases se pueden ingresar todas las clases que queremos utilizar.

Esto seria muy útil ya que podemos reutilizar todas las clases que quisiéramos y nos ahorraríamos mucho Bodigo. A continuación les voy a dejar otro Ejemplo:

Codigo CSS:

Quote
.negrita {
font-weight:bold;
}
.grande {
font-size:30px;
}
.color {
color:red;
}

Codigo HTML:

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Multi Clases en CSS - www.matydesign.com</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>
<h1>MultiClases en CSS</h1>
<p>
Hoy les mostrare como usar Múltiples Clases en CSS, para no escribir
clases innecesarias y reducir la cantidad de código.
</p>
<p class="negrita">
Estilo Numero 1!
</p>
<p class="grande">
Estilo Numero 2!
</p>
<p class="color">
Estilo Numero 3!
</p>
<p class="negrita grande color">
Todas las Clases Combinadas!
</p>
</body>
</html>

Les dejo el ejemplo para ver el resultado.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 53 | 2:23 PM
960 Grid System es un Framework CSS, con el se nos va a facilitar la tarea de crear las columnas y no tendremos que luchar con los distintos navegadores para que nuestra Web quede bien visible en todos ellos. Con 960 Grid System creamos diseños de 960px de Ancho y dispones de dos variantes de 12 o 16 Columnas, con cada variante tendremos distintos anchos pero ambas variantes tienen de cada lado 10px margen:



A partir de estas dimensiones serán las columnas que crearemos, en cada sección se pueden crear todas las columnas que necesitemos siempre y cuando no superemos el ancho maximo de 960px, teniendo en cuenta los pixeles de los margenes. Ej: Una sección donde tenemos el Contenido y una Sidebar (16 Columnas): Columna 12 (700px) + Columna 4 (220px) + Margenes (40px) = 960px

Ese fue solo un simple ejemplo, nosotros podemos varias los distintos tamaños de columnas con la cantidad siempre teniendo en cuenta que no se superen los 960px de ancho sumando los 10px de margen de cada lado de cada columna.

Bueno ahora comenzaremos con un Ejemplo de típico diseño de Web, de un Header, Contenido, Sidebar y Footer (Para este vamos a usar el Sistema de 12 Columnas):

Primero Incluimos los archivos CSS de 960 Grid System:

Quote
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

Ahora tenemos que crear un contenedor principal que en este caso va a ser de 12 columnas:

Quote
<div class="container_12">

</div>

Como ven si fuera un Contenedor de 16 columnas solo tendremos que cambiar el nombre de la clase a “container_16″.

Cada elemento que va a tener este contenedor va a tener el nombre de clase: “grid_xx”, donde xx es el numero de la anchura de la columna (Ver Tabla anterior para conocer los valores).

Así que primero creamos el contenedor del header:

Quote
<div class="container_12">
<div class="grid_12" id="header">
<h1>Header</h1>
</div>
<div class="clear"></div>
</div>

Al usar todo el ancho para el Header use la clase: “grid_12″, un recordatorio importante es que después de cada fila debemos agregar un div con class: “clear” para que no tengamos problemas con los Float. Ahora creamos los divs para el Contenido y el Sidebar (siempre adentro de nuestro contenedor principal):

Quote
<div class="container_12">
<div class="grid_12" id="header">
<h1>Header</h1>
</div>
<div class="clear"></div>

<div class="grid_9" id="contenido">
<p>Contenido de la Web!</p>
</div>
<div class="grid_3" id="sidebar">
<h2>Sidebar</h2>
</div>
<div class="clear"></div>

</div>

Asi ya tenemos nuestro Header, nuestro espacio del contenido y un lindo sidebar para crear nuestro menú

Pero todavía no terminas y seguimos con el Footer:

Quote
<div class="container_12">
<div class="grid_12" id="header">
<h1>Header</h1>
</div>
<div class="clear"></div>

<div class="grid_9" id="contenido">
<p>Contenido de la Web!</p>
</div>
<div class="grid_3" id="sidebar">
<h2>Sidebar</h2>
</div>
<div class="clear"></div>

<div class="grid_12" id="footer">
<p>Tutorial - 960 Grid System By <a href="http://www.matydesign.com">MatyDesign</a></p>
</div>
<div class="clear"></div>
</div>


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 54 | 2:32 PM
Lista de errores en el uso de CSS

Una lista de errores comunes de principiante que suelen aparecer al aprender CSS:

1. Ignorar la compatibilidad con los navegadores.
Uno de los peores errores que podemos cometer es el de no querer ver la web o el blog en los navegadores más usados para ver como queda. Esto tiene que ver con la validación de W3 Consortium, así que si tienes tu sitio web correctamente validado, cumpliendo así los estandares, debería verse bien en todos los navegadores que cumplan a los estándares. Aunque también se pueden realizar hacks para Internet Explorer usando los comentarios condicionales.

Hay muchos sitios para ver la web en otro navegador de forma online, por ejemplo, en IE Net renderer podremos ver como queda nuestra web en IE 5, 6, 7 y 8, sin tener que abrir el navegador de Internet Explorer, de forma online.

2. Ignorar las resoluciones mínimas
Debemos adaptar nuestro sitio web hasta el formato de resolución mínima, que en la actualizad es de 1024 por 768. Es vital que adaptemos la web a las resoluciones más usadas porque si no perderemos muchas visitas.

3. Ignorar los frameworks
No debemos ignorar los frameworks, ya que estos nos ayudan a agilizar 960.gs hay muchos frameworks probados y testeados, funcionan a la perfección.

4. No utilizar clases genéricas
Debemos utilizar clases genéricas siempre que sea posible. Estas 3 clases mostradas a continuación debería usarse en todo el sitio, cada vez que quisieramos hacer un float. Un ejemplo sería:

Quote
.clear{clear:both}
.rightright{float:rightright}
.left{float:left}

El div sería:

Quote
<div id="block_text" class="right"></div>

5. No validar el HTML
Una de las peores cosas que podemos hacer es no validar nuestro código HTML. Validarlo nos evitará muchos problemas, ya que estaremos cumpliendo los estándares y, aplicado al punto nº 1, nuestra web se tendrá que ver en todos los navegadores que cumplan los estándares.

6. No validar el CSS
Esto por supuesto es un pecado tan grave como el mencionado en el punto nº 5, deberemos validar nuestro código CSS para cumplir los estándares.

7. Usar imágenes de fondo pesadas
Debemos evitar, por muy tentativo que parezca, usar imágenes de fondo que contengan muchos KB, es decir, que pesen mucho, ya que hará la carga eterna al visitante y abandonará la página o blog.

8. Usar CSS para todo
Tampoco tenemos que caer en el error de usar CSS para todo, por muy liviano que parezca, también hay que usar otras alternativas para tener una buena accesibilidad hacia nuestros lectores.

9. No usar CSS como clase
Debemos utilizar CSS siempre que podamos, haciendo la llamada desde el elemento hacia una clase, y no poniendo el código CSS ya dentro del elemento. Un ejemplo INCORRECTO sería este:

Quote
<a href="algo.html" style="float: right; color: rgb(51, 51, 51);">enlace</a>

Debería ser así:

Quote
<a href="algo.html" class="estilo_enlace">enlace</a>

10. Usar demasiados archivos CSS
No se debe sobrepasar el límite de archivos CSS de 12, pero a partir de 5 ya empieza a ser malo. Lo correcto sería tener solo dos archivos CSS en las que ubicar nuestro código.

Esta lista de errores nos ayudará a ver que estamos haciendo mal, pudiendo aprender de nuestros propios errores.


Los peores errores CSS

Cada uno al aprender tiene sus errores, que va corrigiendo a lo largo del tiempo.

A continuación se detallan los peores errores mientras aprende CSS:

1. * { font-size:11px; }
No es recomendable poner asterisco al lado de la línea de código CSS. Se debe evitar siempre que se pueda.

2. * { color:#000; }
Lo mismo que con la fuente, no es recomendable poner asterisco al lado de la línea.

3. Declaraciones CSS largas

Quote
.mi-div { margin-right:20px; margin-left:20px; margin-top:3px; }

En vez de poner las declaraciones como he dicho arriba, podríamos hacer así:

Quote
.mi-div { margin: 3px 20px 0px 20px; }

4. Colores CSS largos

Quote
.my-div { color:#000; background:#fff; border-bottom:#f00; }

En vez de poner el código de los colores largo, podríamos ponerlo como muestra en el ejemplo, es decir, en vez de #FFFFFF, poner #FFF, el resultado será el mismo.

5. Declaraciones CSS multilínea
Según algunas opiniones, prefieren tener las declaraciones en una sola línea, en vez de tenerlas en varias líneas, es decir, en vez de esto:

Quote
/* demasiado larga */
p
{
font-size:12px;
line-height:19px;
color:#999;
margin:0 0 5px 0;
padding:0 0 15px 0;
text-indent:20px;
font-family:arial, verdana, sans-serif;
}
/* mucho mejor */
p { font-size:12px; line-height:19px; color:#999; margin:0 0 5px 0; padding:0 0 15px 0; text-indent:20px; font-family:arial, verdana, sans-serif; }


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
k4non114
Mensajes: 83
Reputación: 7
Mensaje Nº 55 | 5:45 PM
wow esto es lo que estaba buscando!, Gracias de nuevo! :).

Si puedes cheka este tuto :) http://foro.ucoz.es/forum/8-809-1
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 56 | 5:38 PM
Logo con efecto de animación con CSS

Desde un sitio interesante les traigo un tutorial para crear un encabezado al que, al pasar el mouse sobre él, le aparezca un fondo a través de un efecto de desvanecimiento. Para esto se usará XHTML básico, CSS y algo de Javascript no obstrusivo mediante JQuery. El efecto final puedes observarlo aquí.

La imagen que utilizan en el ejemplo puedes verla debajo de este párrafo. Como verás se encuentran tanto la imagen normal como la que aparecerá con el efecto en un mismo archivo. De esta forma nos aseguramos de que cargue más rápidamente.

Es importante que las partes repetidas en ambas imágenes coincidan totalmente ya que cualquier diferencia, aunque sea de sólo unos pocos pixeles se notará bastante.

El HTML que utilizaremos es muy simple, tan sólo la siguiente línea:

Quote
<h1 id="header"><a href="#">Awesome header</a></h1>
Luego debemos agregar el siguiente código CSS:
#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}

De esto debemos ajustar las propiedades width con el ancho de nuestra imagen, height con su altura y en background debemos sustituir header.jpg por la ruta y el nombre del archivo.

Por último nos queda incrustar el Javascript. Antes que nada debemos enlazar nuestra página a JQuery mediante el código que dejo a continuación:

Quote
<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>

Si aún no tienes esta librería puedes descargarla de su sitio oficial.

Luego de esto colocamos la siguiente función en el sector head del sitio:

Quote
<script type="text/javascript">
//<![CDATA[
var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");
});

//]]>
</script>

Con esto ya habremos terminado y tendremos nuestro header listo para usar.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 57 | 6:44 PM
CSS3: Cómo darle estilo a una lista usando un solo píxel

Una imagen de fondo de un sólo píxel puede ser algo muy versátil. Con repeat-x puede ser una línea horizontal, repeat-y hace una línea vertical y repeat la transforma en un color relleno.

Simplemente como una prueba divertida del concepto, podemos utilizar esto para crear una lista ordenada con subdvisiones. En esta nota te contamos cómo utilizar esta herramienta de CSS para lograrlo.

El HTML no es nada demasiado complejo, simplemente una lista desordenada anidada como cualquier otra:

Quote
<ul id="project-list">
<li><a href="#">Civil Engineering</a>
<ul>
<li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
<li><a href="#">Culver’s Home Office</a></li>
<li><a href="#">First Addition to Highland Addition</a></li>
<li><a href="#">Fox Point Apartments</a>
<ul>
<li><a href="#">East Side</a></li>
<li><a href="#">West Side</a></li>
</ul>
</li>
<li><a href="#">Metropolitan Place Phase II</a></li>
<li><a href="#">Oak Park Place of Baraboo</a></li>
<li><a href="#">Premier Coop</a></li>
<li><a href="#">Sleep Inn & Suites</a></li>
<li><a href="#">Tradewinds Business Center</a></li>
<li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
</ul>
</li>
<li><a href="#">Environmental Engineering</a></li>
<li><a href="#">Telecommunications Engineering</a>
<ul>
<li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
<li><a href="#">Oakland County/Radian Communications Michigan</a></li>
<li><a href="#">T-Mobile Site Deployment</a></li>
<li><a href="#">U.S. Cellular Network Development</a></li>
<li><a href="#">Western Wireless South Dakota</a></li>
</ul>
</li>
</ul>

En el CSS, aplicaremos el gráfico PNG de píxel único a las mismas listas, repetido verticalmente, y a los mismos ítems de la lista, repetido horizontalmente. En los ítems de la lista, podemos "parar" las líneas para que no atraviesen todo dándole a los links anchor dentro de estos un fondo blanco, el cual se establecen en la parte superior del elemento de la lista borrando la línea:

Quote
#project-list {
background:transparent url(../images/graypixel.png) repeat-y 15px 0;
width:340px;
}

#project-list li {
font-size:16px;
margin:15px 0 20px;
padding:0 0 0 10px;
}

#project-list li a {
background:white;
color:#1F6DD9;
display:block;
padding:3px;
}

#project-list li a:hover {
color:#84B8FF;
}

#project-list li ul li {
background:transparent url(../images/graypixel.png) repeat-x 0 8px;
font-size:13px;
margin:4px 0 4px 5px;
padding:0 0 0 20px;
}

#project-list li ul li a {
padding:0 0 0 3px;
}

#project-list li ul li ul {
background:transparent url(../images/graypixel.png) repeat-y 15px 0;
margin-bottom:10px;
}

#project-list li ul li ul li {
margin-left:16px;
padding-left:10px;
}

Bastante sencillo ¿Verdad?


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 58 | 5:01 PM
Seleccionar con distinto color mediante CSS

¿Alguna vez te has preguntado porqué algunas web tienen el “don” de poder seleccionar el texto de manera distinta, es decir, con otro color? Pues es muy fácil, ¡aquí tienes la solución!

Para seleccionar el texto con el color que queramos, solo tendremos que pegar este código CSS. Usaremos la propiedad moz-selection en Firefox:

Quote
p {
font-size: 1.5em;
margin-bottom: 2.2em;
}
p.rojo::selection {
background: #ffb7b7;
}
p.rojo::-moz-selection {
background: #ffb7b7;
}
p.azul::selection {
background: #a8d1ff;
}
p.azul::-moz-selection {
background: #a8d1ff;
}
p.amarillo::selection {
background: #fff2a8;
}
p.amarillo::-moz-selection {
background: #fff2a8;
}

Obviamente, los colores de selección del párrafo se pueden cambiar por lo que queramos.Después deberemos seguir esta estructura en nuestro documento HTML:

Quote
<p class="rojo">Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en rojo</p>
<p class="azul"> Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en azul</p>
<p class="amarillo">Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en amarillo. </p>

Se puede ver un ejemplo en funcionamiento.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 59 | 5:45 PM
Bocadillos de texto con CSS

Hay muchas formas originales de mostrar un texto, una de ellas es englobarlo en forma de bocadillo de cómic, de forma que parezca aún más divertida su interfaz. Pero, si esto se puede hacer solo con CSS, mejor que mejor. Explicaremos como crear un bocadillo de texto (Callout) con CSS:

Explicación
El bocadillo se hace solo usando CSS. Es básicamente un DIV con borde transparente a la izquierda y derecha. El height y width es 0, así que solo verás el borde o el div que creará el efecto de flecha.

Código CSS

Quote
<style type="text/css">
.calloutUp
{
height: 0;
width: 0;
border-bottom: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 10;
}
.calloutUp2
{
position: relative;
left: -10px;
top: 2px;
height: 0;
width: 0;
border-bottom: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 11;
}
.calloutDown
{
height: 0;
width: 0;
border-top: 12px solid #ffffff;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px;
top: 0px;
margin-left: 20px;
z-index: 11;
}
.calloutDown2
{
position: relative;
left: -10px;
top: -12px;
height: 0;
width: 0;
border-top: 10px solid #9999ff;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
z-index: 10;
}
.divContainerUp
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: -1px;
z-index: 9;
width: 500px;
padding: 4px;
}
.divContainerDown
{
background-color: #9999ff;
border: solid 1px #ffffff;
position: relative;
top: 1px;
z-index: 3;
width: 500px;
padding: 4px;
}
.divContainerMain
{
background-color: #ccccff;
padding: 8px;
}
</style>

Código HTML

Quote
<div class="divContainerMain">
<h3>
Up Side Callout</h3>
<div>
<a href="#">Ramesh Soni</a> dijo</div>
<div class="calloutUp">
<div class="calloutUp2">
</div>
</div>
<div class="divContainerUp">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
consectetuer.
</div>
<br />
<br />
<h3>
Down Side Callout</h3>
<div class="divContainerDown">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
consectetuer.
</div>
<div class="calloutDown">
<div class="calloutDown2">
</div>
</div>
<div>
<a href="#">Ramesh Soni</a> dijo</div>
</div>

Estandarización

CSS 2.1 válido.
XHTML 1.0 Transitional válido.
No se visualiza bien en IE 6: Los bordes no se visualizan bien en IE 6, una solución para que se vean mejor es convertir los bordes de dotted a dashed, así se visualizarán un poco mejor.

Ejemplo final
Finalmente ofrecemos un ejemplo de su funcionamiento.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 60 | 6:01 PM
Tooltip oculto con CSS

Los bocadillos de texto (tooltip) son un recurso muy interesante a la hora de mostrar textos informativos. En esta entrada aprenderemos a crearlos usando HTML, CSS y 3 imágenes. Estos bloques de información quedarán ocultos y únicamente se mostrarán al mover el ratón encima de un enlace.

Antes que nada es necesario mostrar las imágenes con las que ilustraremos y daremos forma a nuestro bloque oculto. Podéis descargarlas haciendo click aquí.

Código CSS
Daremos estilo a los enlaces junto con la etiqueta <span>. Esta etiqueta, es la que nos ayudará, mediante el atributo :hover, a mostrar el bloque de información cuando nos posicionemos encima de un enlace. Cabe destacar la línea display: block; para darle una disposición de bloque al contenido oculto.

Quote
div#mitexto{width: 500px; margin:0 auto}

a.tt
a.tt span{ display: none; }

/*background:; ie hack*/
a.tt:hover{ z-index:25; color: #aaaaff; }
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* altura del bloque variable */
display: block;
padding: 0 8px;
background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(bubble.gif) no-repeat bottom;
}

Código HTML
El contenedor tiene asignado un ancho específico, aunque esto es opcional y puede ser eliminado. Dentro del enlace se insertan varias etiquetas con las que conseguiremos asignarle una forma y estructura al tooltip por medio de imágenes. Se añade una para la parte superior, otra para el fondo, el cual varía su altura según la cantidad de texto que haya dentro del bocadillo de texto (tooltip), y otra para la parte inferior, anidadas unas con otras.

Quote
<div id="mitexto">
<h1>Encabezado 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi enim, tincidunt vitae pharetra sed, consequat nec velit.
<a class="tt" href="#">MI ENLACE<span class="tooltip"><span class="middle">Felicidades, acabas de encontrar un contenido oculto</span><span class="bottom"></span></span></a>.
</p>
</div>

Estandarización
CSS 2.1 válido.
XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento
Ver ejemplo del funcionamiento sobre el Tooltip oculto mediante CSS


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » Qué se puede hacer con CSS (algunos trucos y otras cositas útiles)
Búscar: