Informatica , Seguridad , Programacion , Noticias IT .

Esto es una traduccion del articulo origianl de NetTuts llamado  11 Classic CSS Techniques Made Simple With CSS3 .Muchos ya hemos oido hablar de CSS3 , como toda novedad trae ventajas ,que veremos en este articulo.Una desventaja podria ser la poca compatibilidad con los nevegadores antiguos y no tan antiguos.

¿Que vamos a ver?

1. Bordes Redondeados
2. Sombras aplicadas a cajas o bloques
3. Sombras aplicadas a Textos
4. Como usar cualquier fuente
5. Opacidad | Transparencia
6. RGBA
7. Tamaño de la imagen de fondo
8. Imagenes de fondo multiples
9. Columnas
10. Bordes de Imagenes
11. Animaciones

1. Bordes Redondeados

Podemos simular bordes redondeados usando 4 div , tablas o JavaScript , la desventaja del JavaScript es que si el usuario que va acceder a nuestra página lo tiene desactivado en el navegador los bordes redondeados no se verán , por eso es mejor usar CSS ya que la gente no suele desasctivarlo. Aqui podeis ver un tutorial sobre como hacer bordes redondeados usando CSS 2 .

Metodo Clásico

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
 $('.box').corners('10px');
});
</script>

<div>
 <!--CONTENT-->
</div>

Este metodo utiliza Jquery (Framework de javascript) con un plug-in llamado Corners .

Usando CSS3

</span></strong>
<pre><style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div>
 <!--CONTENT-->
</div>

Read more

Este no es ningun gran truco pero aveces nos puede venir muy bien esconder algun elemento de una web. Yo tuve que hacer esto con un skin de Blogger ..

Podemos hacerlo de muchas maneras, una de ellas es usar el atributo display , quedaria asi :

#escondido { display: none; }

Otro modo de hacerlo es con el atributo visibility , quedaria asi :

#escondido { visibility:hidden; }

Tambien podemos comentar lineas para que el navegador no las enseñe en la pantalla usando /*  aqui css */  … aqui cada uno con lo que mas le gusta.

Este es digamos un script de navegador , lo copiamos en la barra de navegacion estando en una web y seleccionamos cualquier elemento de esa web y podremos ver algo de informacion sobre ese elemento.

Screenshot:

Click para agrandar la imagen.

Como podeis ver he seleccionado el logo/banner de la web y me proporciona algo de detalles , esto nos puede ayudar en el diseño de una web usando CSS,

<span>javascript:function%20loadScript(scriptURL)%20{%20var%20
scriptElem%20=%20document
.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript')
;%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.
appendChild(scriptElem);}
<span>loadScript('<a href="<a href="http://westciv.com/xray/thexray.js">http://westciv.com/xray/thexray.js</a>">
<a href="http://westciv.com/xray/thexray.js">http://westciv.com/xray/thexray.js</a></a>')
;</span></span>

Esta tecnica la aprendí de un pequeño librillo de diseño web 2.0

Permite la transparencia en todos los navegadores , bueno , no casi todos pero la mayoria .

.madhacking {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

filter:alpha(opacity=50):Internet Explorer .

-moz-opacity:0.5: Firefox .

-khtml-opacity: 0.5: Safari .

opacity: El más importante, es el estándar de CSS.

Ahora mucha gente utiliza imagenes en png y les modifica la transparencia pero contra esto no podran competir.