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

Tutorial Propiedad box-shadow en CSS3

Tema en 'Tutoriales de HTML y CSS' comenzado por EulisesRdz, 23 de Enero de 2015.

  1. EulisesRdz

    EulisesRdz Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    1
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Desarrollador Web
    Localización:
    Mexico
    [​IMG]
    Conocemos que mediante la propiedad Box-Shadow que nos brinda CSS3 podemos agregar sombras a cualquier objeto, debemos de indicar 3 valores importantes para llevarla a cabo.

    box-shadow: 10px 10px 20px #aaaaaa;

    La propiedad tiene 3 valores y un color, los valores son los siguientes:
    • El primero tiene que ver con el desplazamiento horizontal de la sombra, positivo significa que la sombra se encuentra a la derecha del objeto, un desplazamiento negativo pondrá la sombra a la izquierda.
    • El segundo punto trata sobre el desplazamiento vertical, uno negativo la sombra será en la parte superior del objeto, uno positivo la sombra estará por debajo.
    • El tercer parámetro es el radio de desenfoque.
    • El cuarto y ultimo tiene que ver con el color de la sombra.
    A continuación se muestra un pequeño ejemplo de lo que es realizar una sombra utilizando CSS3.
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Box-Shadow</title>
        <style type="text/css">
        #sombra{
            box-shadow: 10px 10px 20px #AAAAAA;
            background: #41C1EE;
            text-align: justify;
            color: white;
            padding: 5px;
            width: 20%;      
        }
        </style>
    </head>
    <body>
    <div id="sombra">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et diam at justo ullamcorper dictum. Fusce justo velit, semper eget malesuada non, vestibulum sit amet urna. In ac ullamcorper magna. Donec tellus est, mollis auctor elit vel, iaculis faucibus enim.</p>
    </div>
    </body>
    </html>
    Se muestra una caja de texto en donde se realizo el tutorial sobre sombras en CSS3.

    [​IMG]
    Mas información acerca de la propiedad.
     
    A JayP le gusta esto.
  2. JayP

    JayP Miembro Activo

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    125
    Me gusta recibidos:
    72
    Puntos de trofeos:
    28
    Género:
    Hombre
    El tercero es como la opacidad de la sombra?
     
  3. Root._dir

    Root._dir Nuevo Miembro

    Se incorporó:
    30 de Julio de 2015
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    No estimado, es el grado de difuminacion de la sombra, mientras más pixels más difuminada

    Enviado desde mi XT1032 mediante Tapatalk
     

Comparte esta página