Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje18-07-2008, 01:23 (UTC)    
Título del mensaje: CSS (Basico)
Responder citando
Fondos en CSS

Con CSS se puede personalizar el fondo de cada objeto de nuestra página, permitiendonos escojer el color de fondo, una imagen, la posición de la imagen, el comportamiento, y las repeticiones de la misma...

El color de fondo
El color de fondo se define usando el atributo background-color y un color RGB cómo valor.

background-color: #ff0000;


La imagen de fondo
Podemos definir un objeto con una imagen de fondo usando el atributo background-image y cómo valor una forma del estilo url(imagen.jpg), por ejemplo:

background-image: url(imagen.gif);


La posición del fondo
La imagen de fondo se puede aliniar a la parte superior, inferior.., para esto usaremos el atributo background-position, indicando uno o mas de los siguientes valores:

top - Aliniar en la parte superior
bottom - Aliniar en la parte inferior
center - Aliniar en el medio
left - Aliniar a la izquierda
right - Aliniar a la derecha

Vamos a ver un ejemplo de imagen de fondo aliniada en la parte superior derecha:

background-position: top right;


El comportamiento
El comportamiento de la imagen de fondo cuando usamos las barras de desplazamiento también se puede definir con el atributo background-attachment, que puede ser:

scroll - La imagen se mueve con el interior del objeto
fixed - La imagen no se mueve

Podemos hacer que el fondo no se desplace al desplazar la página:

background-attachment: fixed;


Las repeticiones
Podemos hacer que la imagen de fondo se repita usando el atributo background-repeat:

repeat - La imagen se repite vertical y horizontalmente
repeat-x - La imagen se repite horizontalmente
repeat-y - La imagen se repite verticalmente
no-repeat - La imagen no se repite

Podemos hacer que el fondo no se desplace al desplazar la página:

background-attachment: fixed;


El atributo background
El atributo background es una mezcla de los cinco anteriores y nos permite usar todos sus posibles valores para definir un fondo rapidamente:

background: #ff0000 url(imagen.gif) repeat-x top fix

Seguire incrementando este post, con información básica de CSS.

Cambiar la apariencia del cursor con CSS

Podemos modificar la apariencia del cursor cuando éste se desplaza sobre un vínculo, texto, imágen ... integrando el atributo <style> en la etiqueta del componente.

<A HREF="www.arc3d.net" style="cursor:hand">

Estos son los diferentes tipos de cursores que se pueden utilizar:

default (flecha)
crosshair (cruz)
e-resize (flecha que apunta a la derecha)
hand (mano)
help (signo de pregunta)
move (cruz con flechas en los extremos)
n-resize (flecha que apunta hacia arriba)
ne-resize (flecha que apunta al noreste)
nw-resize (flecha que apunta al noroeste)
pointer (mano)
s-resize (flecha que apunta hacia abajo)
se-resize (flecha que apunta hacia el sudeste)
sw-resize (flecha que apunta hacia el sudoeste)
text (I-beam)
w-resize (flecha que apunta a la izquierda)
wait (reloj de arena)

Igual que con todas las propiedades 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>Cambio de cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: hand}
-->
</style>
</head>
<body>
Hola mundo!
</body>
</html>

A partes del documento

<html>
<title>Cambio de cursor</title>
<head>
</style>
</head>
<body>
<A HREF="www.arc3d.net" style="cursor:hand">Arc 3D</a>
</body>
</html>

Usar un cursor presonalizado

<html>
<title>Cambio de cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("salta.cur")}
-->
</style>
</head>
<body>
Hola mundo!
</body>
</html>

Seguire incrementando este post, con información básica de CSS.


Ultima edición por delacruzgarcia el Jue Jul 17, 2008 9:25 pm; editado 1 vez
↑
Mensaje18-07-2008, 01:28 (UTC)    
Título del mensaje:
Responder citando
jaja buen aporte
______________
↑
Mensaje18-07-2008, 02:03 (UTC)    
Título del mensaje:
Responder citando
no solo puedes usar los cursores por defecto, tambien puedes hacer esto:
cursor: url(url del cursor), bueno los urls de los cursores puedes obtenerlos en
http://www.bautizame.org/hi5_cursores_punteros_todos.php

ellos te dan este code:
Cita:
<style>
html, body { cursor:url(http://www.bautizame.org/hi5/cursores/flechas/136.ani); }
</style>
<div style='position:absolute; left:0px; top: 0px; border:0; z-index:9;'><a href='http://www.bautizame.org' target='_blank'><img src='http://www.bautizame.org/img/banner.gif' border='0' /></a></div>


Solo usa lo que esta en color azul y reemplazolo donde te dije


Ultima edición por diegovenegas el Jue Jul 17, 2008 10:03 pm; editado 1 vez
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.