Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 9 de 9

Tema: Codigos para redondear esquinas sin imagen

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    14 nov, 11
    Mensajes
    3
    Poder de Reputación
    0

    Codigos para redondear esquinas sin imagen

    Hola, siguiendo el curso que por cierto es bastante bueno y facil de entender, al llegar a la leccion de redondear las esquinas, mi problema fue que no me deja copiar ninguna imagen de las que poneis en las lecciones, siempre las he tenido que sustituir por otras, asi que como lineas asi no encontre, busque otro medio como hacerlo sin imagen, y estos codigos son los que he puesto espero sean de utilidad, a mi desde luego me han valido ya que se ven redondeadas. Las de arriba se ven bien y las de abajo segun vaya ampliando la pagina tambien se veran.

    CODIGOS HTLM:

    <div>
    <b class="spiffy">
    <b class="spiffy1"><b></b></b>
    <b class="spiffy2"><b></b></b>
    <b class="spiffy3"></b>
    <b class="spiffy4"></b>
    <b class="spiffy5"></b></b>

    <div class="spiffyfg">
    <!-- Aquí se incluyen los contenidos -->
    </div>

    <b class="spiffy">
    <b class="spiffy5"></b>
    <b class="spiffy4"></b>
    <b class="spiffy3"></b>
    <b class="spiffy2"><b></b></b>
    <b class="spiffy1"><b></b></b></b>
    </div>

    CODIGOS CSS:

    .spiffy{display:block}
    .spiffy *{
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#000000}
    .spiffy1{
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #919191;
    border-right:1px solid #919191;
    background:#3f3f3f}
    .spiffy2{
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
    background:#303030}
    .spiffy3{
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #303030;
    border-right:1px solid #303030;}
    .spiffy4{
    border-left:1px solid #919191;
    border-right:1px solid #919191}
    .spiffy5{
    border-left:1px solid #3f3f3f;
    border-right:1px solid #3f3f3f}
    .spiffyfg{
    background:#000000}

    Espero que cuando lo probeis me digais algo al respecto. Muchas gracias

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Hola Mª Carmen, muy bueno tu aporte, solo que hoy en día con CSS3 el redondear esquinas es muy fácil (aunque no pase validador). Échate un vistazo a esto http://www.miguelmanchego.com/2010/c...s-redondeadas/ así tienes las dos opciones.

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

  3. #3
    Recien Llegado! Merodeador
    Fecha de Ingreso
    14 nov, 11
    Mensajes
    3
    Poder de Reputación
    0
    Si, ya sabia lo del CSS3, pero con este sistema no se ven en todos los navegadores, sin embargo con lo que puse si.
    Gracias por contestar.
    Saludos.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21
    Hey, muchas gracias! :D

    Y bienvenida a CCTW :)

    Te doy unos puntitos por tu aporte, gracias de nuevo

  5. #5
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,184
    Poder de Reputación
    10
    No lo he probado aún, pero leyendo el código imagino lo que hace y si, puede estar bien. Es más código, pero relamente ocupa menos que las imágenes de fondo. Lo malo es a la hora de personalizarlas, que hay que trabajarse un poco los colores a escoger, claro, pero tiene buena pinta, de veras.

    Si consigo tiempo para probarlo lo comento un poco más, oki?

    Un abrazo y gracias por el aporte!

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Yo creo que hoy día si está para todos los navegadores lo de las esquinas no?, eso si, son unas 4/5 líneas de código CSS (para concretar los navegadores)...

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 12
    Mensajes
    121
    Poder de Reputación
    0
    yo lo he hecho con código, de un tutorial que yo creo que vi en este foro mucho más secillo, está escrito para cada navegador y se ve bien en todos:

    -moz-border-radius: 7px 7px 0px 0px; border-radius: 7px 7px 0px 0px; -webkit-border-radius: 7px 7px 0px 0px;

    solo se tiene que añadir en la hoja de estilos dentro del div que se quiera con esquinas redondeadas, queda muy limpio la verdad (podeis verlo en la web que hice: http://adoptivanet.info ). Son 3 textos para que salga bien en todos los exploradores, los 4 números son los radios que se quiere dar a la curba, no recuerdo mal (que seguro que si) arriba, derecha, abajo, izquierda... pero es cuaestión de probar... y si se pone un solo número 7px todas las esquinas son iguales.
    mi primera web: adoptivanet.info

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 jun, 12
    Mensajes
    121
    Poder de Reputación
    0
    lo que no he probado es si poner un borde al div si también lo redondea... eso si que no lo sé.
    mi primera web: adoptivanet.info

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Correcto igualada, eso es CSS3, lo que comentaba yo anteriormente ;-)

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

Temas Similares

  1. Me ayudan con la imagen para redondear las esquinas?
    Por xxarturito14xx en el foro Webs con Capas o DIVS
    Respuestas: 1
    Último Mensaje: 17/03/2010, 08:58
  2. Como crear imagen para redondear esquinas
    Por narcisohp en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 17/01/2009, 20:49

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •