El truco es tener un elemento dentro de otro: <div class="xxx"><div></div></div>
.xxx tendría una imagen ancha con una esquina redondeada (de fondo, claro). .xxx div tendría una imagen más estrecha con LA OTRA esquina redondeada (y sin transparencia... No sé si eso te sirve) Un ejemplo: http://www.imm.cnm.csic.es/RedBiosensores/ Saludos, Ignacio Gros > Envíe los mensajes para la lista Ovillo a > ovillo@lists.ovillo.org > > Para subscribirse o anular su subscripción a través de la WEB > http://lists.ovillo.org/mailman/listinfo/ovillo > > O por correo electrónico, enviando un mensaje con el texto "help" en > el asunto (subject) o en el cuerpo a: > [EMAIL PROTECTED] > > Puede contactar con el responsable de la lista escribiendo a: > [EMAIL PROTECTED] > > Si responde a algún contenido de este mensaje, por favor, edite la > linea del asunto (subject) para que el texto sea mas especifico que: > "Re: Contents of Ovillo digest...". Además, por favor, incluya en la > respuesta sólo aquellas partes del mensaje a las que está > respondiendo. > > > Asuntos del día: > > 1. Esquina redondeada y bordes superior e izquierdo con sombra > (Jorge) > 2. Re: Esquina redondeada y bordes superior e izquierdo con > sombra ( Ramon Vilar Gavaldà ) > 3. Re: Esquina redondeada y bordes superior e izquierdo > consombra (Jorge) > 4. Re: Esquina redondeada y bordes superior e izquierdo > consombra ( Jinglero - Pedro Federico García ) > 5. Re: Esquina redondeada y bordes superior e izquierdo > consombra (Daniel Navarro) > 6. Re: Esquina redondeada y bordes superior e izquierdo > consombra (Alejandro Jorge) > > > ---------------------------------------------------------------------- > > Message: 1 > Date: Mon, 3 Nov 2008 20:36:44 -0000 > From: "Jorge" <[EMAIL PROTECTED]> > Subject: [Ovillo] Esquina redondeada y bordes superior e izquierdo con > sombra > To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> > Message-ID: <[EMAIL PROTECTED]> > Content-Type: text/plain; format=flowed; charset="iso-8859-1"; > reply-type=original > > Hola lista, > > estoy maquetando una página, que lleva un diseño elástico (se expande > horizontal y verticalmente segun tamaño de la fuente) y debe ser accesible > y > semanticamente correcta ya que es para una Administracion Publica y se > obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es que > tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos > bordes superior e izquierdo lleva una sombra, además de la propia esquina. > > Podeis ver una imagen de lo que pretendo hacer en la dirección: > http://mbrown.iespana.es/img/maqueta.jpg > > Mi pregunta es si alguien puede decirme cuál es el mejor método para > implementar ese diseño para que lo más accesible y semántico posible. > > Gracias de antemano, > > Jorge > > > > ------------------------------ > > Message: 2 > Date: Mon, 3 Nov 2008 22:48:36 +0100 > From: " Ramon Vilar Gavaldà " <[EMAIL PROTECTED]> > Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo > con sombra > To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> > Message-ID: > <[EMAIL PROTECTED]> > Content-Type: text/plain; charset=ISO-8859-1 > > Buenas > La URL que passas no es correcta. Le faltan permisos al directorio > para poder visualizarse. > > Ramon > > > > 2008/11/3 Jorge <[EMAIL PROTECTED]>: >> Hola lista, >> >> estoy maquetando una página, que lleva un diseño elástico (se expande >> horizontal y verticalmente segun tamaño de la fuente) y debe ser >> accesible y >> semanticamente correcta ya que es para una Administracion Publica y se >> obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es que >> tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) >> cuyos >> bordes superior e izquierdo lleva una sombra, además de la propia >> esquina. >> >> Podeis ver una imagen de lo que pretendo hacer en la dirección: >> http://mbrown.iespana.es/img/maqueta.jpg >> >> Mi pregunta es si alguien puede decirme cuál es el mejor método para >> implementar ese diseño para que lo más accesible y semántico posible. >> >> Gracias de antemano, >> >> Jorge >> >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > > > -- > Ramon Vilar Gavaldà - http://ramonvilar.facil.cat > Membre de FÀCIL - http://www.facil.cat > Membre de l'esplai SESA - http://www.esplaisesa.org > > > ------------------------------ > > Message: 3 > Date: Mon, 3 Nov 2008 22:34:00 -0000 > From: "Jorge" <[EMAIL PROTECTED]> > Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo > consombra > To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> > Message-ID: <[EMAIL PROTECTED]> > Content-Type: text/plain; format=flowed; charset="iso-8859-1"; > reply-type=original > > Hola Ramón, > > no es correcta la url http://mbrown.iespana.es/img/maqueta.jpg ? > > indico la ruta completa a la imagen que pretendo que veais. > > Yo diria que todo el mundo puede verla, corrijanme si me equivoco. > > Jorge > > ----- Mensaje original ----- > De: "Ramon Vilar Gavaldà" <[EMAIL PROTECTED]> > Para: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> > Enviado: lunes, 03 de noviembre de 2008 21:48 > Asunto: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo > consombra > > > Buenas > La URL que passas no es correcta. Le faltan permisos al directorio > para poder visualizarse. > > Ramon > > > > 2008/11/3 Jorge <[EMAIL PROTECTED]>: >> Hola lista, >> >> estoy maquetando una página, que lleva un diseño elástico (se expande >> horizontal y verticalmente segun tamaño de la fuente) y debe ser >> accesible >> y >> semanticamente correcta ya que es para una Administracion Publica y se >> obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es que >> tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) >> cuyos >> bordes superior e izquierdo lleva una sombra, además de la propia >> esquina. >> >> Podeis ver una imagen de lo que pretendo hacer en la dirección: >> http://mbrown.iespana.es/img/maqueta.jpg >> >> Mi pregunta es si alguien puede decirme cuál es el mejor método para >> implementar ese diseño para que lo más accesible y semántico posible. >> >> Gracias de antemano, >> >> Jorge >> >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > > > -- > Ramon Vilar Gavaldà - http://ramonvilar.facil.cat > Membre de FÀCIL - http://www.facil.cat > Membre de l'esplai SESA - http://www.esplaisesa.org > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > ------------------------------ > > Message: 4 > Date: Mon, 3 Nov 2008 20:48:26 -0300 > From: " Jinglero - Pedro Federico García " <[EMAIL PROTECTED]> > Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo > consombra > To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> > Message-ID: > <[EMAIL PROTECTED]> > Content-Type: text/plain; charset=ISO-8859-1 > > Yo tampoco la veo... > > Forbidden >> >> You don't have permission to access /img/maqueta.jpg on this server. >> > > Salutes > > El 3 de noviembre de 2008 19:34, Jorge <[EMAIL PROTECTED]> escribió: > >> Hola Ramón, >> >> no es correcta la url http://mbrown.iespana.es/img/maqueta.jpg ? >> >> indico la ruta completa a la imagen que pretendo que veais. >> >> Yo diria que todo el mundo puede verla, corrijanme si me equivoco. >> >> Jorge >> >> ----- Mensaje original ----- >> De: "Ramon Vilar Gavaldà" <[EMAIL PROTECTED]> >> Para: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> >> Enviado: lunes, 03 de noviembre de 2008 21:48 >> Asunto: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo >> consombra >> >> >> Buenas >> La URL que passas no es correcta. Le faltan permisos al directorio >> para poder visualizarse. >> >> Ramon >> >> >> >> 2008/11/3 Jorge <[EMAIL PROTECTED]>: >> > Hola lista, >> > >> > estoy maquetando una página, que lleva un diseño elástico (se expande >> > horizontal y verticalmente segun tamaño de la fuente) y debe ser >> accesible >> > y >> > semanticamente correcta ya que es para una Administracion Publica y se >> > obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es >> que >> > tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) >> cuyos >> > bordes superior e izquierdo lleva una sombra, además de la propia >> esquina. >> > >> > Podeis ver una imagen de lo que pretendo hacer en la dirección: >> > http://mbrown.iespana.es/img/maqueta.jpg >> > >> > Mi pregunta es si alguien puede decirme cuál es el mejor método para >> > implementar ese diseño para que lo más accesible y semántico posible. >> > >> > Gracias de antemano, >> > >> > Jorge >> > >> > _______________________________________________ >> > Lista de distribución Ovillo >> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> > Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> > http://lists.ovillo.org/mailman/listinfo/ovillo >> > >> >> >> >> -- >> Ramon Vilar Gavaldà - http://ramonvilar.facil.cat >> Membre de FÀCIL - http://www.facil.cat >> Membre de l'esplai SESA - http://www.esplaisesa.org >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > > > -- > Jinglero - Pedro Federico Garcia > MSN: [EMAIL PROTECTED] > www.jinglero.com.ar > > www.doxma.com > www.leedor.com > > > ------------------------------ > > Message: 5 > Date: Tue, 4 Nov 2008 01:22:22 +0100 > From: "Daniel Navarro" <[EMAIL PROTECTED]> > Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo > consombra > To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> > Message-ID: > <[EMAIL PROTECTED]> > Content-Type: text/plain; charset=ISO-8859-1 > > Hola Jorge: > > A mí también me dio error la primera vez que intenté acceder al enlace, > pero > ahora parece funcionar sin problemas. > > [...] que lleva un diseño elástico (se expande horizontal y verticalmente > segun tamaño de la fuente) > > Si tienes claro que quieres este tipo de diseño, adelante. Pero si estás > empezando en el mundillo del diseño web (no lo sé), te recomendaría que > empezaras por un diseño de anchura fija en px (oigo rugidos de algunos). > > Las versiones más modernas de los principales navegadores están > incorporando > zoom completo de página en vez de zoom de texto. Por lo tanto, un diseño > fijo con px es cada vez menos traumático. > > De todas formas, posteriormente es muy sencillo convertir un diseño de > tamaño fijo en uno elástico. > > [...]debe ser accesible y semanticamente correcta [..]. La cuestión es que > tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos > bordes superior e izquierdo lleva una sombra, además de la propia esquina. > > Esas esquinas no contienen ningún valor semántico sino que son de adorno. > Por lo tanto, OJO, no la incluyas en el documento mediante el elemento > <img>, sino como imágenes de fondo con la propiedad CSS *background* o * > background-image*. > > Te recuerdo que sólo puedes usar un background-image para cada elemento > (x)html. Para que el diseño pueda redimensionarse horizontalmente, se > necesitan, al menos, dos imágenes de fondo. Una de ellas tiene que ser lo > suficientemente grande como para que la otra se "deslice" sobre ella > ocultándola (técnica de las puertas correderas). > > Nota: Para las sombras usa un programa de diseño gráfico en condiciones, > que > te incluya este efecto. La imagen que propones parece hecha con el Paint. > > > Saludos. > > > ------------------------------ > > Message: 6 > Date: Tue, 4 Nov 2008 08:49:34 +0000 > From: Alejandro Jorge <[EMAIL PROTECTED]> > Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo > consombra > To: <ovillo@lists.ovillo.org> > Message-ID: <[EMAIL PROTECTED]> > Content-Type: text/plain; charset="iso-8859-1" > > > Hola Daniel, > > ... A mí también me dio error la primera vez que intenté acceder al > enlace, pero ahora parece funcionar sin problemas. > > no sé que problemas hay con el servidor, o si solo se permite el acceso > desde España, que lo dudo, pero yo desde mi casa y desde mi trabajo puedo > acceder sin problemas. Espero que no vuelva a pasar. > > ... Si tienes claro que quieres este tipo de diseño, adelante. Pero si > estás empezando en el mundillo del diseño web no lo sé), te recomendaría > que empezaras por un diseño de anchura fija en px (oigo rugidos de > algunos). > > Trabajo en una Administracion Publica donde se nos exije que las paginas > webs cumplan con los pautas de accesibilidad (minimo AA). Hasta ahora > todos los diseños que he hecho son elasticos (p.ej. > http://portal.grancanaria.com/portal/home.bib [en pruebas aun]. El > inconveniente de este diseño es que como pongas una resolucion menor > aparece el scroll horizontal). > > ... Las versiones más modernas de los principales navegadores están > incorporando zoom completo de página en vez de zoom de texto. Por lo > tanto, un diseño fijo con px es cada vez menos traumático. > > Tengo que pensar en todo el mundo, los que tienen IE5, Safari, Firefox, > Lynx, ... > > ...Te recuerdo que sólo puedes usar un background-image para cada elemento > (x)html. Para que el diseño pueda redimensionarse horizontalmente, se > necesitan, al menos, dos imágenes de fondo. Una de ellas tiene que ser lo > suficientemente grande como para que la otra se "deslice" sobre ella > ocultándola (técnica de las puertas correderas). > > ¿A que elemento le aplico la imagen de fondo que va a hacer de puerta > corredera? Esta claro que el borde izqdo junto con la esquina se lo aplico > al div "CONTENIDO" pero para conseguir el borde superior no tengo ningun > elemento al que aplicarle la imagen de fondo. ¿como hago? > > > ... Nota: Para las sombras usa un programa de diseño gráfico en > condiciones, que te incluya este efecto. La imagen que propones parece > hecha con el Paint. > > Esta hecha con Photoshop. > > Muchas gracias por tu respuesta y ayuda. > Jorge> Date: Tue, 4 Nov 2008 01:22:22 +0100> From: [EMAIL PROTECTED]> > To: ovillo@lists.ovillo.org> Subject: Re: [Ovillo] Esquina redondeada y > bordes superior e izquierdo consombra> > Hola Jorge:> > A mí también me > dio error la primera vez que intenté acceder al enlace, pero> ahora parece > funcionar sin problemas.> > [...] que lleva un diseño elástico (se expande > horizontal y verticalmente> segun tamaño de la fuente)> > Si tienes claro > que quieres este tipo de diseño, adelante. Pero si estás> empezando en el > mundillo del diseño web (no lo sé), te recomendaría que> empezaras por un > diseño de anchura fija en px (oigo rugidos de algunos).> > Las versiones > más modernas de los principales navegadores están incorporando> zoom > completo de página en vez de zoom de texto. Por lo tanto, un diseño> fijo > con px es cada vez menos traumático.> > De todas formas, posteriormente es > muy sencillo convertir un diseño de> tamaño fijo en uno elástico.> > > [...]debe ser accesible y semanticamente correcta [..]. La cuestión es > que> tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) > cuyos> bordes superior e izquierdo lleva una sombra, además de la propia > esquina.> > Esas esquinas no contienen ningún valor semántico sino que son > de adorno.> Por lo tanto, OJO, no la incluyas en el documento mediante el > elemento> <img>, sino como imágenes de fondo con la propiedad CSS > *background* o *> background-image*.> > Te recuerdo que sólo puedes usar > un background-image para cada elemento> (x)html. Para que el diseño pueda > redimensionarse horizontalmente, se> necesitan, al menos, dos imágenes de > fondo. Una de ellas tiene que ser lo> suficientemente grande como para que > la otra se "deslice" sobre ella> ocultándola (técnica de las puertas > correderas).> > Nota: Para las sombras usa un programa de diseño gráfico > en condiciones, que> te incluya este efecto. La imagen que propones parece > hecha con el Paint.> > > Saludos.> > _______________________________________________> Lista de distribución > Ovillo> Para escribir a la lista, envia un correo a > Ovillo@lists.ovillo.org> Puedes modificar tus datos o desuscribirte en la > siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo > _________________________________________________________________ > El otoño llega cargado de novedades > http://events.es.msn.com/noticias/vuelta-al-cole > > ------------------------------ > > _______________________________________________ > Ovillo mailing list > Ovillo@lists.ovillo.org > http://lists.ovillo.org/mailman/listinfo/ovillo > > Fin de Resumen de Ovillo, Vol 57, Envío 4 > ***************************************** > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
