Tutoriales de css

« ‹ 1 2/2 › »
Página sin usar tablas en CSS
Introducción

La actual dirección del desarrollo web, es dejar de usar las tablas para crear la estructura de la página. Las tablas son tediosas, "difíciles" de usar, es complicado dejar cada cosa en su lugar, muy complicado de mantenerlas, se va creando un chorizo de tablas, tablas una de otras dentro de otras y dentro de otras

Las páginas ahora se maquetan con divs, listas y principalmente con CSS, es más, ya hay proyectos que maquetan todo el sitio solamente con listas y CSS.

Claro que esto lleva a que uno aprenda a programar con hojas de estilo, pero realmente vale la pena hacerlo. Los sitios quedan más claros, fáciles de mantener, se indexan mejor a los buscadores (múy util si queremos posicionarnos en Google).

Para empezar vamos a ver cómo crear una pagina "clásica", o sea, que contenga una cabecera, un menú, el contenido y un pie, y a la vez que quede centrada y sea compatible con IE y Firefox.

Primero debemos crear nuestra estructura html de la siguiente manera:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
<head> 
<title>Prueba</title> 

</head> 

<body> 

<div id="content"> 
<div id="cabecera"></div> 
<div id="menu"></div> 
<div id="contenido"></div> 
<div id="pie"></div> 
</div> 

</body> 
</html>


Como vemos en el código de arriba, tenemos una capa "content" que va a contener toda la información. Dentro de ella se encuentran otras capas "cabecera", "menu", "contenido, "pie". Cada una de estas capas las iremos posicionando dentro de "content" para lograr nuestra meta. Como dentro "content" está "todo", con solo centrar esta capa, se centrará toda la información de nuestro sitio.

El CSS que logra hacer esto es el siguiente:



<style> 
body { 
margin:0; 
padding:0; 
text-align:center; 
} 

#content { 
text-align:left; 
margin:auto; 
background-color:#ff0; 
width:800px; 
height:800px; 
} 

#cabecera { 
width: 800px; 
height:100px; 
background-color:#f00; 
} 

#menu { 
width:150px; 
height:650px; 
float:left; 
background-color:#888; 
} 

#contenido { 
width:650px; 
height:650px; 
float:left; 
background-color:#ccc; 
} 

#pie { 
clear:both; 
width:800px; 
height:50px; 
background-color:#0f0; 
} 

</style>


Autor: Federico Lozada
Eliminar el subrayado de los enlaces en CSS
?Cómo eliminar el subrayado de los enlaces?

A veces nos resulta una tanto molesto fijar nuestros enlaces con el famoso subrayado que aparece por defecto.. Puede darse el caso en que por una cuestión de estética o no, nos interese eliminar el subrayado del enlace ( me refiero al caso en el que nuestro enlace ocupe un párrafo completo o sea compartido con una imagen).
Existe una forma muy fácil de eliminarlo.

Deberás incluir la siguiente porción de código entre las etiquetas justo aquí. de tus páginas.

Aclaración: El siguiente ejemplo elimina el subrayado del enlace por completo, es decir cuando me posicione con el mouse encima del enlace el subrayado tampoco aparecerá.



<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: none}
-->
</STYLE>


Aclaración: El siguiente ejemplo elimina el subrayado del enlace en forma parcial, es decir cuando se cargue nuestra página los enlaces no tendrán el subrayado, únicamente aparecerá el mismo cuando me posicione con el mouse encima de los mismos.



<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline}
-->
</STYLE>


Autor: Gabriel Marcelo
Celdas con puntas redondeadas en CSS
Introducción

Antes de iniciar es necesario especificar que este ejemplo funciona con Internet Explorer únicamente.

Para inicar es necesario incluir el siguiente estilo en el documento que contendrá la celda:



<style type="text/css">
<!--
body {text-align:center}
#ttt {width:396;height:1;background:D3D3D1;}
#tt {width:398;height:1;background:EFEFEF; border-right:1px solid D3D3D1;
border-left:1px solid D3D3D1;}
#t {width:400;background:EFEFEF;border-right:1px solid D3D3D1; 
border-left:1px solid D3D3D1;padding:4;}
-->
</style>


La hoja de estilo anteriormente publicada posee 4 (cuatro) capas. Para los que recién se inician en CSS o para los que necesitan refrescar la memoria, las capas se utilizan para aplicar estilos a partes amplias de un documento HTML y poseen atributos especiales que hacen más fácil su manejo.

Para poder experimentar el resultado en nuestra página en necesario incluir las siguientes líneas en el lugar donde queramos que aparezca la celda: 



<div id="ttt"><img src="blank.gif" width="1" height="1"></div>
<div id="tt"><img src="blank.gif" width="1" height="1"></div>
<div id="t" style="font-family:Verdana;font-size:x-small;color:999">Esta es una 
celda con puntas redondeadas realizada enteramente con hojas de estilo.</div>
<div id="tt"><img src="blank.gif" width="1" height="1"></div>
<div id="ttt"><img src="blank.gif" width="1" height="1"></div>


Debo aclarar que para su buen funcionamiento es necesario crear una imagen de 1x1 px transparente (en este ejemplo se lo llamó blank.gif). Dejo a su gusto el tamaño, el grosor de los bordes y el color, el color de fondo y el texto.

Autor: Federico Elgarte
Capas visibles e invisibles en CSS
Introducción

Como primera instancia hay que definir las propiedades de la capa. En ella también podremos poner información, imágenes, links, etc.



#pantalla {position: absolute; width: 50%; height: 50%; 
background:url(imagen.gif) no-repeat fixed center; border: 1px solid}


Una vez definida la capa debemos insertarla en nuestro documento html de la siguiente manera:



<div id="pantalla"></div>


...y colocar dos enlaces para activar y desactivar el efecto:



<a href="javascript:closeit()">Mostrar capa</a> 
<a href="javascript:showit()">Esconder capa</a>


Ahora solo resta insertar el script:



<script> 
var once_per_browser=0 
var ns4=document.layers 
var ie4=document.all 
var ns6=document.getElementById&&!document.all 

if (ns4) 
crossobj=document.layers.pantalla 
else if (ie4||ns6) 
crossobj=ns6? document.getElementById("pantalla") : document.all.pantalla 

function closeit(){ 
if (ie4||ns6) 
crossobj.style.visibility="visible" 
else if (ns4) 
crossobj.visibility="show" 
} 

function get_cookie4(Name) { 
var search = Name + "=" 
var returnvalue = ""; 
if (document.cookie4.length > 0) { 
offset = document.cookie4.indexOf(search) 
if (offset != -1) { // if cookie4 exists 
offset += search.length 
// set index of beginning of value 
end = document.cookie4.indexOf(";", offset); 
// set index of end of cookie4 value 
if (end == -1) 
end = document.cookie4.length; 
returnvalue=unescape(document.cookie4.substring(offset, end)) 
} 
} 
return returnvalue; 
} 

function showornot(){ 
if (get_cookie4(postdisplay)==){ 
showit() 
document.cookie4="postdisplay=yes" 
} 
} 

function showit(){ 
if (ie4||ns6) 
crossobj.style.visibility="hidden" 
else if (ns4) 
crossobj.visibility="hide" 
} 

if (once_per_browser) 
showornot() 
else 
showit() 
script>


Autor: Federico Javier
Opacidad en CSS
Introducción

La propiedad opacity introducida en CSS3 permite definir la transparencia de un elemento con valores entre 0 a 1, de esta manera deberíamos poder definir un elemento semitransparente.

La propiedad opacity funciona tanto en Internet Explorer "filter: alpha(opacity=50)", como en Firefox "opacity: .5"

Este efecto se puede aplicar en imágenes, formularios, capas, etc.



<style type=?text/css?>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>

<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" 
class="opaco" width="100" height="109"></p>


Autor: Gamaliel M.
Cambiar el cursor del Mouse en css
Introducción

Las hojas de estilo poseen una propiedad que permite cambiar la imagen del puntero del mouse.

Listas de cursores

Cursores disponibles por defecto:

Nombre
Muestra
default
crosshair
pointer
move
nw-resize
ne-resize
n-resize
e-resize
help
text
wait
Definiendo el cursor

Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.

A todo el documento 

<html>
  <title>Cambiar el cursor</title>
  <head>
  <style type="text/css">
  <!--
  body {cursor: pointer}
  -->
  </style>
  </head>
  <body>
  </body>
</html>


A algunos sectores del documento 

<html>
  <title>Cambiar el cursor</title>
  <head>
  </head>
  <body>
  <p style="cursor: default">Cursor default</p>
  <p style="cursor: crosshair">Cursor crosshair</p>
  <p style="cursor: pointer">Cursor pointer</p>
  <p style="cursor: move">Cursor move</p>
  <p style="cursor: nw-resize">Cursor nw-resize</p>
  <p style="cursor: ne-resize">Cursor ne-resize</p>
  <p style="cursor: n-resize">Cursor move</p>
  <p style="cursor: e-resize">Cursor move</p>
  <p style="cursor: help">Cursor move</p>
  <p style="cursor: text">Cursor move</p>
  <p style="cursor: wait">Cursor wait</p>
  </body>
</html>


Personalizar cursor

También es posible utilizar un cursor personalizado:



<html>
  <title>Cambiar el cursor</title>
  <head>
  <style type="text/css">
  <!--
  body {cursor : url("ruta/harrow.cur")}
  -->
  </style>
  </head>
  <body>
  </body>
</html>


Autor: Fabian Muller
« ‹ 1 2/2 › »