5 Trucos de CSS Más usados para tu Web


Ahora todo se maqueta y/o diseña con CSS. Los potentes estilos reducen el
peso de la página, permiten que el HTML se centre en un sentido “semántico”
y se posicione mejor en los buscadores, así como también nos permiten rediseñar
un sitio entero en dos patadas.

Por eso son tan útiles esos pequeños trucos de bolsillo que uno suele ir
recolectando por ahí, para echar mano en un momento de necesidad.
Con gusto te dejo esta lista de 5 trucos de CSS que a mi modo de ver
son muy usados y también muy necesitados.


1. Esquinas redondeadas (sin usar imágenes, obvio):


//HTML

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
</b>
<!–Aqui va el contenido –>
<b class=”rbottom”>
<b class=”r4″></b>
<b class=”r3″></b>
<b class=”r2″></b>
<b class=”r1″></b>
</b></div>


//CSS

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}


Asi se vera:





2. Estilos para una lista ordenada:



//HTML

<ol><li><p>This is line one</p>
</li><li><p>Here is line two</p>
</li><li><p>And last line</p>
</li></ol>


//CSS

ol {font: italic 1em Georgia, Times, serif;color: #999999;}
ol p {font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;}


Asi se vera:





3. Crear formularios (sin usar tablas):



//HTML

<form><label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>


//CSS

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {clear: left;
}


Asi se vera:





4. Efecto de texto con gradiente:



//HTML

<h1><span></span>CSS Gradient Text</h1>


//CSS

h1 {font: bold 330%/100% “Lucida Grande”;
position: relative;color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader
(src=’gradient.png’, sizingMethod=’scale’);}</style>
<![endif]–>


Asi se vera:





5. Letras capitales:



//HTML

<p class=”introduction”> This paragraph has the class “introduction”.
If your browser supports the pseudo-class “first-letter”,
the first letter will be a drop-cap. </p>


//CSS

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}



Asi se vera:





This site is under construction

Estimated time remaining before launch






Subscribe below with us to get the latest






Blogger Template by assadotcom
/
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis