1. ¿Buscando un Banco para abrir tu primera cuenta de ahorros? Revisa nuestro comparativo de cuentas cero mantenimiento haciendo clic aquí.
    Ocultar anuncio

Efecto Redondeado

Publicado en 'Webmasters' por x-web, 1 Nov 2006.





  1. x-web

    x-web Miembro maestro

    Registro:
    23 Set 2006
    Mensajes:
    303
    Likes:
    0




    Hola:

    Este efecto en ocasiones es necesario utilizarlo para ciertos diseños, hay muchas formas de hacerlo, usando imagenes para las esquinas, con javascripts, Ajax, etc.

    Esta para mi es la mejor forma usando solo CSS, con esto se obtendra el efecto de redondeo aplicado a una etiqueta DIV por ejemplo.

    HTML:
    <style type="text/css">
    .redondeado{
    display:block;
    }
    .redondeado *{
    display:block;
    height:1px;
    overflow:hidden;
    background:#0a67e6;
    }
    .redondeado1{
    border-right:1px solid #95bdf4;
    padding-right:1px;
    margin-right:3px;
    border-left:1px solid #95bdf4;
    padding-left:1px;
    margin-left:3px;
    background:#478dec;
    }
    .redondeado2{
    border-right:1px solid #e6effc;
    border-left:1px solid #e6effc;
    padding:0px 1px;
    background:#3883ea;
    margin:0px 1px;
    }
    .redondeado3{
    border-right:1px solid #3883ea;
    border-left:1px solid #3883ea;
    margin:0px 1px;
    }
    .redondeado4{
    border-right:1px solid #95bdf4;
    border-left:1px solid #95bdf4;
    }
    .redondeado5{
    border-right:1px solid #478dec;
    border-left:1px solid #478dec;
    }
    .redondeado_contenido{
    padding:0px 5px;
    background:#0a67e6;
    }
    </style> 
    
    HTML:
    <div>
    <b class="redondeado">
    <b class="redondeado1"><b></b></b>
    <b class="redondeado2"><b></b></b>
    <b class="redondeado3"></b>
    <b class="redondeado4"></b>
    <b class="redondeado5"></b>
    </b> <div class="redondeado_contenido">
    Aqui tu contenido
    </div>
    <b class="redondeado">
    <b class="redondeado5"></b>
    <b class="redondeado4"></b>
    <b class="redondeado3"></b>
    <b class="redondeado2"><b></b></b>
    <b class="redondeado1"><b></b></b>
    </b>
    </div>
    
    espero sea de ayuda, probado en IE¬¬ y Firefox:D


    Saludos:)
     


  2. Cancerx7x

    Cancerx7x Suspendido

    Registro:
    14 May 2007
    Mensajes:
    35
    Likes:
    0
    pucha no entiendo nadaaa........

    creo q tengo q aprender a aser paginas siempre es bueno =)

    se pero nose de donde ;(

    pucha ya se!!!!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!!!!!

    :ptm:O_oO_o;):question::tmr::tmr::errr:me voy a comprar mi libro de dreamweaver:P:P:stop::pls::pls::):D
     
    Editado por el moderador: 7 Jun 2007
  3. Wilssonly

    Wilssonly Suspendido

    Registro:
    16 Oct 2006
    Mensajes:
    450
    Likes:
    0
    Mejor lee libros de xhtml y css.
     
  4. Yaraher

    Yaraher Miembro maestro

    Registro:
    26 Mar 2007
    Mensajes:
    313
    Likes:
    2
    cancerx7x, siempre es mejor aprender las bases antes de ir a aprender sobre una herramienta. Es como si dijeras:

    "Quiero aprender a cocinar.. Ya sé, ¡¡me compraré un libro sobre la Olla Arrocera Max2000+!!!"

    Puedes aprender a usar Dreamweaver, pero eso no te convertirá en un diseñador web, ni podrás hacer bien sitios web.

    Aprende primero, como dice *********, los conceptos de qué es un sitio web: contenido (XHTML), diseño (CSS) e interacción (JavaScript, Java, PHP, etc.). Cuando tengas esto bien aprendido, recién oriéntate a aprender a usar completamente un entorno como Dreamweaver.

    Es como las matemáticas, primero aprendimos a sumar y restar a mano, y luego pasamos a la calculadora. Suerte!
     
  5. arturojavier

    arturojavier Suspendido

    Registro:
    24 Oct 2007
    Mensajes:
    234
    Likes:
    0
    Lo He Probado Muy Interesante No Se Me Habia Ocurrido Esto Pero El DiseÑo Es Muy Simple ... Prefiero Hacer Capaz Con Figuras Mas Trabajadas Pero Es Muy Buen Material Gracias
     
  6. siestoyloco

    siestoyloco Miembro nuevo

    Registro:
    23 May 2008
    Mensajes:
    4
    Likes:
    0
    hola shin-hack para poder enlazar tu archivo css tienes que tener un archivo index.html donde esta la estrutura de tu pagina y otro archivo estilo.css, en donde estan los estilos a aplicar en tu pagina:
    Bueno lo que tienes que hacer es en tu archivo index.html modificar tu header asi:
    HTML:
    <head>
            <title>titulo de tu pagina</title>
            <link rel="stylesheet" type="text/css" href="estilo.css" />
      </head>
     
  7. BettoX

    BettoX Miembro nuevo

    Registro:
    28 May 2008
    Mensajes:
    2
    Likes:
    0
    Va dentro del Body?
    o entre head y head?? [​IMG][​IMG][​IMG]
    [​IMG]
     
    Última edición: 28 May 2008
  8. Chiko0_PeRuvian

    Chiko0_PeRuvian Miembro nuevo

    Registro:
    20 Set 2008
    Mensajes:
    45
    Likes:
    0
    bueno mira aqui yo tengo como pocos meses pero me gusta esto de la web eso se logra con imagenes png para cada esquina y dandoles formato con css
    un saludo tambien as oido de los efectos mismos usando jquery con javascript ahh.. que queda mas guayy xP

    Me gusto tu ejemplo amiigo
     
  9. MijT

    MijT Miembro de bronce

    Registro:
    12 Oct 2006
    Mensajes:
    1,106
    Likes:
    63
    Con CSS 3 ya no hay necesidad de trucos, ni hacks, ni javascript para el redondeado :)
     
  10. Chiko0_PeRuvian

    Chiko0_PeRuvian Miembro nuevo

    Registro:
    20 Set 2008
    Mensajes:
    45
    Likes:
    0
    a que bueno mijt asi que tienes el dreamweaver cs4? oye en 1 semana estoy en peru que tal me puedes agregar me gustaria aprender muchas cosas de esto

    l_pumira17@hotmail.es
     
  11. Yaraher

    Yaraher Miembro maestro

    Registro:
    26 Mar 2007
    Mensajes:
    313
    Likes:
    2
    Se refiere a la tercera revisión de CSS que incorpora esos adicionales. Sin embargo, de eso hasta que el resto de los navegadores (IE, te estoy mirando :P) lo implementen, faltará mucho realmente como para utilizarlo así.
     
  12. Roydan

    Roydan Miembro maestro

    Registro:
    5 Jun 2007
    Mensajes:
    277
    Likes:
    12
    Interesante el Script, pero en mi opinion es demasiado codigo. mas sencillo es usar imagenes en divs para hacer bordes. asi se evita de sobrecargar de codigo y es mas facil la administracion de la misma.
    Sobre CSS3 es cierto ya se pueden hacer muchas cosas mas, pero no todos los exploradores web lo soportan. por ejemplo IE6 el cual es muy usado todavia.

    :yeah:
     
  13. dineromoneyfree

    dineromoneyfree Miembro nuevo

    Registro:
    17 Feb 2009
    Mensajes:
    4
    Likes:
    0
    Gracias por el estilo, me lo llevo!!!
    sigue asi compi


    un saludo.
     
  14. x-web

    x-web Miembro maestro

    Registro:
    23 Set 2006
    Mensajes:
    303
    Likes:
    0
    La idea del tutorial es poder realizar el mismo efecto pero sin utilizar imágenes para un div (capa) con bordes redondeados en este sentido es mucho mas adaptable a cualquier diseño para cambiar tamaño y color sobre todo si en el diseño que se quiere poner existen imágenes de fondo.

    Por experiencia puedo decir que a la larga es mas trabajoso tener que adaptar un capa con border redondeando con imagenes a un diseño que utilizando solo codigo.

    PD: Alquien sabe que si vuelvo a publicar un Post que ya existe me lo permitirian?.....
    hay Post de tutoriales de Photoshop del 2006 pero el problema es que ya no cargan las imagenes del tutorial, lo ideal es que pudiera editarlo pero ya no me lo permite:mmm:

    Saludos
     
    Última edición: 18 Feb 2009
  15. grunst3r

    grunst3r Miembro nuevo

    Registro:
    27 Feb 2009
    Mensajes:
    1
    Likes:
    0
    Hola a todos soy nuevo bueno el CSS que das es bueno hee para hacer el efecto redondeado bueno tengo uno haber como lo ven .... no soy experto en css pero aqui les va el code
    HTML:
    <style type="text/css">
    * {margin: 0px; padding: 0px;}
    .caja {margin: 20px auto;
    background-color: #43758C;
    width: 200px;
    position: relative;
    }
    .punto {font-weight: bold;
    color: #43758C;
    position: absolute;
    font-size: 60px;
    background-color: transparent;
    line-height: 18px;
    }
    .lt {top: -12px; left: -2px;}
    .rt {top: -12px; right: -2px;}
    .lb {bottom: -10px; left: -2px;}
    .rb {bottom: -10px; right: -2px;}
    
    .bottom, .top {height: 10px;
    background-color: #43758C;
    position: absolute;
    left: 10px;
    right: 10px;
    width: 90%;
    }
    .bottom{ bottom: -10px;}
    .top {top: -10px;}
    .texto {padding: 8px 12px; color: #fff;}
    </style>
    
    <div class="caja">
    <div class="punto lt">&bull;</div>
    <div class="top"></div>
    <div class="punto rt">&bull;</div>
    <div class="punto lb">&bull;</div>
    <div class="bottom"></div>
    <div class="punto rb">&bull;</div>
    <div class="texto">Esta caja tiene las esquinas redondeadas
    usando &uacute;nicamente css. Puede ser un buen truco para hacer
    todo tipo de decoraciones a las cajas.</div>
    </div>
    
    Bueno esto me ayuda en varias cositas saludos amig@s. . !!