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 ‚Äúclearfix‚ÄĚ en nuestro CSS y aplicarla a los elementos contenedores.

Código HTML:

<div id=‚ÄĚcontenedor‚ÄĚ class=‚ÄĚclearfix‚ÄĚ>

<div id=‚ÄĚdivflotante‚ÄĚ>
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 ‚ÄúImpact‚ÄĚ 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: ‚ÄúConsolas‚ÄĚ,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’d 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