contenido 28 de abril de 2014 a las 08.49
   Imprimir artículo
elWebmaster.com

Fragmentos de c贸digo CSS para mejorar tu web


codigos de css

Es casi imposible reunir en un art铆culo todos los fragmentos de c贸digo CSS que podr铆an ayudarte, pero aqu铆 est谩n algunos que puedas llegar a necesitar, unos con m谩s frecuencia que otros. No te asustes por la longitud de algunos c贸digos CSS porque son todos f谩ciles de aplicar y en cualquier caso, est谩n bien documentados. Adem谩s de los que resuelven problemas comunes y molestos tambi茅n hay algunos que resuelven nuevos problemas provocados por las nuevas tecnolog铆as.

Lista de c贸digos para la comprensi贸n entre navegadores

Codificar entre varios navegadores puede ser a veces dif铆cil, pero estos fragmentos de c贸digos en CSS para el navegador seleccionado te puede ayudar con los problemas de versiones. Con ellos la compatibilidad entre navegadores se resolver谩.

/***** C贸digos de selectores ******/

/* IE6 o menor */
* html #uno聽 { color: red }

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

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

/* IE8, FF, Saf, Opera (Todos excepto IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 o menor, 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聽 }

/* Todos excepto IE6-8 */
:root *> #quince { color: red聽 }

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

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

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

/***** C贸digos de 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; } /* string after ! can be anything */

Centrar imagenes vertical u horizontal con CSS sin tablas (entre navegadores)

Este codigo centra en vertical u horizontal una imagen de dimensiones desconocidas dentro de un cuadro. El cuadro contenedor tiene una anchura y altura (width y height) explicita.

<figure class=’logo’>
<span></span>
<img class=’photo’/>
</figure>


.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }

.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }

Transparencia para cualquier navegador con CSS

T煤 puedes de manera r谩pida y f谩cil aplicar la transparencia a cualquier elemento al agregar el siguiente c贸digo CSS en tu hoja de estilo:

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;聽聽聽聽聽 /* khtml, old safari */
-moz-opacity: 0.5;聽聽聽聽聽聽 /* mozilla, netscape */
opacity: 0.5;聽聽聽聽聽聽聽聽聽聽 /* fx, safari, opera */
}

Sombra de cuadros con CSS

La exageraci贸n de las sombras puede dar lugar a que se vea raro el cuadro, pero usarlo con estilo puede a帽adir un cierto aspecto elegante a tus divs sin utilizar ninguna imagen para hacerlo. La propiedad de sombra a los cuadros es una de las cosas nuevas que nos trae CSS3 y uno de los m谩s buscados.

Sombra por fuera
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

Sombra por dentro
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

Altura minima (entre navegadores)

La altura minima en CSS (min-height) es uno de los codigos mas requeridos para solventar el molesto problema de la altura minima en IE.
#div {
min-height: 500px;
height:auto !important;
height: 500px;
}

Acomodar el footer con CSS

La fabricaci贸n del footer adherido con CSS es algo que se debe hacer. Tu no querr谩s que el footer venga despu茅s de la cabecera en las p谩ginas de peque帽o contenido como un ni帽o viene tras los dulces. Simplemente se ver谩 mal.

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+’px’);
}

C贸digo para el Clearfix de CSS

Muchos se habr谩n encontrado con el problema del colapso de los contenedores de elementos flotantes.

La propiedad float de CSS es muy 煤til y muy usada para posicionar elementos en la interfaz pero presenta un peque帽o problema: Al estar situada dentro de otro elemento (por ejemplo un div), este elemento contenedor no envuelve al elemento flotante dentro de ella (colapsa).

Una forma com煤n y de muy extendida utilizaci贸n, es usar el m茅todo clearfix. Este m茅todo consiste en crear una clase 鈥渃learfix鈥 en nuestro CSS y aplicarla a los elementos contenedores.

C贸digo HTML:

<div id=鈥漜ontenedor鈥 class=鈥漜learfix鈥>

<div id=鈥漝ivflotante鈥>
Div flotante.
</div>
</div>

C贸digo CSS:

.clearfix:after {
content:鈥.鈥;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
#divflotante {
float:left;
}

8 listas de letras

La idea detr谩s de la creaci贸n recomendada de lista de fuentes es simple: dado que la mayor铆a de los dise帽adores web no saben mucho sobre la selecci贸n de fuentes y tipograf铆a para la web, y tienen demasiado trabajo en sus dise帽os para pasar el tiempo necesario para aprender, necesitan una ventanilla 煤nica de fuentes que ofrezca una gran variedad para todas las plataformas Windows, Mac y Linux.

Adem谩s, aquellos dise帽adores que entienden lo suficiente acerca de la tipograf铆a pueden sentir como su creatividad se ve limitada por las restricciones est谩ndar en la “seguridad web” para el conjunto de fuentes. El uso de fuentes apiladas es una forma de aumentar las opciones de un dise帽ador.

Las listas de fuentes apiladas son agrupadas por una fuente universal que forma la base de esa lista. Por tanto, un dise帽ador puede decidir sobre un aspecto tipogr谩fico de su sitio, coge la fuente apilada apropiada, y puede modificarlo para adaptarlo a sus necesidades.

/* The Times New Roman-based serif stack: */
font-family: Cambria, “Hoefler Text”, Utopia, “Liberation Serif”, “Nimbus Roman No9 L Regular”, Times, “Times New Roman”, serif;

/* A modern Georgia-based serif stack:*/
font-family: Constantia, “Lucida Bright”, Lucidabright, “Lucida Serif”, Lucida, “DejaVu Serif,” “Bitstream Vera Serif”, “Liberation Serif”, Georgia, serif;

/*A more traditional Garamond-based serif stack:*/
font-family: “Palatino Linotype”, Palatino, Palladio, “URW Palladio L”, “Book Antiqua”, Baskerville, “Bookman Old Style”, “Bitstream Charter”, “Nimbus Roman No9 L”, Garamond, “Apple Garamond”, “ITC Garamond Narrow”, “New Century Schoolbook”, “Century Schoolbook”, “Century Schoolbook L”, Georgia, serif;

/*The Helvetica/Arial-based sans serif stack:*/
font-family: Frutiger, “Frutiger Linotype”, Univers, Calibri, “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, Myriad, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, “Helvetica Neue”, Helvetica, Arial, sans-serif;

/*The Verdana-based sans serif stack:*/
font-family: Corbel, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Liberation Sans”, Verdana, “Verdana Ref”, sans-serif;

/*The Trebuchet-based sans serif stack:*/
font-family: “Segoe UI”, Candara, “Bitstream Vera Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Trebuchet MS”, Verdana, “Verdana Ref”, sans-serif;

/*The heavier 鈥淚mpact鈥 sans serif stack:*/
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;

/*The monospace stack:*/
font-family: Consolas, “Andale Mono WT”, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, “DejaVu Sans Mono”, “Bitstream Vera Sans Mono”, “Liberation Mono”, “Nimbus Mono L”, Monaco, “Courier New”, Courier, monospace;

Dale a los elementos de enlaces un cursor de apuntador

Algunos elementos a los que se puede hacer clic, misteriosamente no desencadenan un cursor de puntero en los navegadores. Este c贸digo arregla eso, y proporciona una clase “puntero” predeterminada para aplicar a otras cosas se puedan hacer clic seg煤n sea necesario.

a[href], input[type=’submit’], input[type=’image’], label[for], select, button, .pointer {
cursor: pointer;
}

Conteniendo texto dentro de las etiquetas

height: 120px;
overflow: auto;
font-family: 鈥淐onsolas鈥,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */

Bordes m煤ltiples

Un elemento debe ser posicionado con relative y tener suficiente padding para contener el ancho del borde extra que crear谩s con los pseudo-elementos.

#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}

Los pseudo-elementos est谩n posicionados en una distancia espec铆fica lejos del eje de la caja de elementos, movidos detr谩s del contenido con un z-index negativo, y da los valores de border y background que tu quieras.

#borders:before {
content:””;
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}

#borders:after {
content:””;
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}

Efecto de Curl con un cuadro con sombra en CSS3

HTML
<ul class=”box”>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:before,
ul.box li:after {
content: ”;
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }

ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }

Det茅n al superscripts de parar las alineaciones de una vez por todas

Normalmente, las etiquetas superscript y subscript rompen las alineaciones. Con este c贸digo podr谩s solucionar este problema.

Inserta el siguiente c贸digo CSS a tu hoja de estilos y listo:

sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }

Remueve la barra de scroll para el Textarea en IE

No te has preguntado por que los textareas tienen una scrollbar en IE inclusive si la misma esta vacia. Nadie lo sabe con seguridad pero aqui esta la solucion.

textarea { overflow: auto; }

Simple y bonito estilo de comillas

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:”\201C””\201D””\2018″”\2019″;
}


blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}


blockquote p {
display:inline;
}

Footer adherido

Anteriormente se mostr贸 una forma de mantener en una misma posici贸n al footer, aqu铆 hay otro ejemplo:

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }聽 /* must be same height as the footer */

#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
<div id=”wrap”>
<div id=”main” class=”clearfix”>
</div>
</div>
<div id=”footer”>
</div>

Rotaci贸n de texto con CSS

Afortunadamente, muchos de los navegadores m谩s populares de la actualidad soportan la capacidad de rotar los elementos HTML. A煤n mejor, podemos hacer que funcione en Internet Explorer (hasta la versi贸n 5.5 a煤n). 驴Qu茅 m谩s puedes pedir? Bueno, vamos a ver el c贸digo HTML.

<div class=”example-date”>
<span class=”day”>31</span>
<span class=”month”>July</span>
<span class=”year”>2009</span>
</div>

Para Webkit y Firefox (a partir de 3,5), se puede tomar ventaja de la propuesta propiedad para transformar para manejar la rotaci贸n. Cada navegador requiere su propiedad de prefijo por ahora.
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

Para llevar a cabo la transformaci贸n, el elemento tiene que ser ajustado a display: block. En este caso, basta con a帽adir la declaraci贸n del span que deseas girar.
Cuando se trata de los efectos en Internet Explorer, hay una sorprendente cantidad de poder en el uso de filtros. Aunque enga帽oso, hay un filtro llamado BasicImage que ofrece la capacidad de rotar cualquier elemento que tiene el dise帽o.
filter: progid: DXImageTransform.Microsoft.BasicImage (rotaci贸n = 3);

When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I鈥檇 say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Transparencia de fondo

Ser capaz de establecer la transparencia del fondo sin afectar a la transparencia del primer plano (el texto) es bastante pr谩ctico. Es por eso que hay rgba () en CSS (rojo, verde, azul, alfa). IE no lo soporta todav铆a, pero podemos usar el filtro de gradiente que soporte transparencia. En este caso no necesitamos el gradiente actual, as铆 que colocamos desde el inicio hasta el final el mismo color. Asimismo, el background: transparent se necesita para que todo el asunto trabaje en IE:

.rgba {
background-color: transparent;
background-color: rgba(200,200,200,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)”;
}

Centrando un DIV con una anchura desconocida

T煤 puedes f谩cilmente centrar un DIV usando la propiedad margin:auto; cuando tengas que colocar el width en tu CSS. Pero en caso de que necesites centrar un DIV con una anchura desconocida, aqu铆 est谩 el c贸digo para realizarlo:

.content {
margin: 0 auto 8px;
display: table;
}

.content div {
display: table-cell;

<!–[if IE]>
.content {
display: block;
text-align: center;
}
.content div {
display: inline;
zoom: 1;
}
<![endif]–>

Estilizando enlaces por tipo de archivos

T煤 puedes f谩cilmente darle un estilo espec铆fico a una URL usando 铆conos. Esto trabaja s贸lamente con browsera compatibles con CSS3. Asegurate de cambiar la ruta de los 铆conos.
/* external links */
a[href^=”http://”]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^=”mailto:”]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=”.pdf”]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Cambia el estilo de la selecci贸n de texto

::selection
{
color: white;
background-color: red;
}

::-moz-selection聽 /* Firefox necesita una atenci贸n extra para este c贸digo*/
{
color: white;
background-color: red;
}

Capitular

Capitular no es s贸lo una opci贸n para los libros y peri贸dicos, t煤 puedes ahora usarlo en el dise帽o web y es tambi茅n una linda implementaci贸n para usar.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Estilizando los enlaces dependiendo del formato del archivo

Deseas aprender UX. Comienza con esto. Este c贸digo CSS agrega 铆conos junto al enlace as铆 el usuario sabe a donde lo llevar谩.
/* external links */
a[href^=”http://”]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^=”mailto:”]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=”.pdf”]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

Fuente original del art铆culo: Design Your Way
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder