1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Solucionado ¿Como hacer este borde en CSS?

Tema en 'Temas Solucionados' comenzado por malgusto, 17 de Octubre de 2015.

  1. malgusto

    malgusto Miembro

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    61
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Género:
    Hombre
    Hola a todos, un duda a ver si alguien me puede ayudar, como se puede hacer en CSS un borde asi? Como con brillo.

    Gracias!!!
     

    Archivos adjuntos:

    • borde.jpg
      borde.jpg
      Tamaño de archivo:
      43,5 KB
      Visitas:
      29
  2. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Si te refieres a la sobra esa se hace con box-shadow yo uso esta 0px 2px 4px rgba(0, 0, 0, 0.2) que le da un aspecto como si estuviese encima del background

    Edito seriamos mas exactos si nos pasas la url y vemos como lo ha hecho así te decimos exactamente el color y todo :)
     
    Última modificación: 17 de Octubre de 2015
  3. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    789
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    Género:
    Hombre
    Yo creo que es así, a lo mejor me equivoco pero pruebalo tu mismo, ten el html:
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                display: flex;
                justify-content: center;
            }
            div#caja{
                margin-top: 30px;
                width: 900px;
                height: 80px;
                background-color: blue;
                border-radius: 10px;
                text-align: center;
                box-shadow: 0px 0px 8px black;
                border-top: 1px solid #b3d4fc;
                border-left: 1px solid black;
                border-right: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="caja">
            GAMMAFP
        </div>
    </body>
    </html>
    [​IMG]
     
  4. malgusto

    malgusto Miembro

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    61
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Género:
    Hombre
    Me refiero a lo que hace gammafp, gracias a ambos!

    Si, a esto me refiero :) .

    Un par de dudas... ¿Por que lo declaras display:flex al body? Todavia no le he metido mucha mano al flexbox pero es la primera vez que veo eso... Para alinear la caja al centro habria bastado con un div y margin auto y tal, no?

    Otra cosa... poner en el css div#caja... Habria bastado con poner #caja y ya esta, no?

    Gracias!
     
  5. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    789
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    Género:
    Hombre
    Si claro uso flex-box para alinear la caja al centro, es mas porque a mi me gusta hacerlo así, igual podria haber usado margin: 0 auto;
    lo del div#caja: Claro hubiese bastado con escribir #caja pero a mi me gusta especificar el elemento exacto mientras mas exacto mejor según tengo entendido, si tu en un futuro declaras #caja y arriba tienes div#caja el css interpretará el que sea mas especifico.
     
  6. malgusto

    malgusto Miembro

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    61
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Género:
    Hombre
    Una pregunta... Poner..

    div#caja {}

    Es lo mismo que ... Con el espacio, no?

    div #caja {}

    Es decir, que hace referencia al id caja que se encuentre dentro de un div, no?
     
  7. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    No es lo mismo si está junto significa que es el div con ese id y si esta separado es algo con ese id que esta dentro del div
     
    A malgusto le gusta esto.
  8. malgusto

    malgusto Miembro

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    61
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ah vale, eso mismo se puede hacer para otras clases, no? es decir...

    div.caja {}

    Seria especificar que seria un div con esa clase, no?
     
  9. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    194
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Sii pero lo que hemos puesto antes eran ids (#) y el . son clases
     
  10. malgusto

    malgusto Miembro

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    61
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Género:
    Hombre
    Si, si, preguntaba si se podia hacer exactamente igual con id y con clases.

    Gracias :) .
     
  11. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    789
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    Género:
    Hombre
    Excelente respuesta @RodrigoT.
    Tiene toda la razón rodrigo, si la pones separadas significa que el id está dentro del div, es decir que uno es hijo del otro.
     

Comparte esta página