Para el asunto de las cajas redimensionables con bordes redondeados aquí
tienes un artículo:
http://simplelogica.net/caoticoneutral/index.php?p=15
Espero que te sirva.
-
Jacinto Lajas
[EMAIL PROTECTED]
Fran Rives escribió:
Hola, este es el primer mensaje que escribo a esta lista, pero
enhorabuena por lo buena que es. /pelotilleo :D
Mi problema es el siguiente. Digamos que aunque CSS es una gran
herramienta para presentación, presenta ciertas limitaciones. El
modelo de cajas cuadradas con únicamente un color y en 2d, no me
permite disponer de todo lo que me gustaría. Por eso me planteé
conseguir una presentación estilo Photoshop (como hacen en CSS zen
garden, sin perder semántica), pero con una diferencia. Yo quiero que
mi presentación se redimensione conforme disminuyo/aumento la pantalla
del navegador, o conforme cambio de resolución o de monitor, algo que
los de Css zen garden no han conseguido (pese a que se autoproclamen
triple A).
Entonces, yéndome un poco más hacia mi caso en particular, yo quiero
meter un menú a la izquierda de mi página. Dentro de ese menú quiero
meter los enlaces hacia las distinas secciones (estos enlaces los he
puesto con outset normal e inset en hover, pero eso es otra historia).
Este menú con los enlaces quiero que sea un rectángulo tridimensional
con bordes redondeados y efectos 3d y sombras (esto lo he hecho con
photoshop, aplicando varios estilos de capa a un rectángulo normal
negro).
El problema viene con la redimensión que le quiero aplicar a este
menú. Para ello he cortado a la imagen del photoshop en 9 pedazos,
cada uno de ellos representando un borde (lógicamente el centro de la
imagen lo he quitado). Así: a1 -- borde superior izquierdo; a2 --
borde superior medio(me hace falta porque el rectángulo es 3d); a3 --
borde superior derecho; b1 -- borde izquierdo medio; b2 -- borde
derecho medio; c1 -- borde inferior izquierdo; c2 -- borde inferior
medio; c3 -- borde inferior derecho;
Cada uno de estos pedazos es una nueva imagen. Entonces,
posteriormente lo que hago es meter estas imágenes como divs
posicionados absolutamente dentro de un div padre (la misma técnica
que para bordes redondeados, pero en 3d y con 9 en vez de 4). Esto lo
hago para conseguir que mi menú se redimensione. Entonces el div padre
tiene un background negro y le posiciones los nueve divs con imágenes
de fondo. Así consigo que se me redimensione sin notar nada extraño
hasta cierto punto (lógicamente, si la pantalla es muy muy pequeña, se
verá como los bordes no dan disminuído de tamaño, pero eso sería un
caso extremo).
Ahora os pegaré fragmentos de mi código XHTML y CSS para entender
mejor el caso:
-- XHTML --
div id=lista
div id=a1/div
div id=a2/div
div id=a3/div
div id=b1/div
div id=b2/div
a id=primero href=#Primero/a
a id=segundo href=#Segundo/a
a id=tercero href=#Tercero/a
a id=cuarto href=#Cuarto/a
div id=c1/div
div id=c2/div
div id=c3/div
/div
-- CSS --
#lista { position: absolute;
width: 12%;
top: 5%;
left: 1%;
padding: 2.3em 0;
background: black; }
/* Posicionando las imágenes del borde para que coincidan con los
bordes reales del div lista (las imagenes cortadas tienen un borde
blanco) */
#a1{ position: absolute;
background:
url(../imagenes/a1.jpg) no-repeat;
width: 43px;
height: 43px;
top: 0%;
left: 0%;
z-index: 101; }
#a2{ position: absolute;
background:
url(../imagenes/a2.jpg) repeat-x;
width: 90%;
height: 43px;
top: 0%;
z-index: 100; }
#a3{ position: absolute;
top: 0%;
right: -5%;
background:
url(../imagenes/a3.jpg) no-repeat;
width: 43px;
height: 43px;
z-index: 101; }
/* Primera línea lograda */
/* Segunda línea */
#b1{ position: absolute;
top: 43px;
bottom: 0%;
background: url(../imagenes/b1.jpg);
