Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ayuda a obtener este diseño o efecto

CSS - Ayuda a obtener este diseño o efecto

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Ayuda a obtener este diseño o efecto

Publicado por Daniel (1 intervención) el 01/04/2017 17:18:26
Hola Soy novato en Css, solicito su humilde colaboración.

Quiero hacer una web con este mismo efecto, bordes de las secciones redondeados y como en 3d tal como muestra la imagen. agradezco su ayuda
esta es la web www.littmanncol.net
Captura
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 78
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda a obtener este diseño o efecto

Publicado por Alejandro (21 intervenciones) el 02/04/2017 00:19:13
Hola Daniel, hice este pequeño menú de ejemplo, capaz te sirva:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="es">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menú</title>
    <style>
        html {
            box-sizing: border-box;
            font-size: 16px;
            font-family: 'Lucida Grande', Verdana, sans-serif
        }
 
        *,
        *::before,
        *::after {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
            font-size: 1rem;
        }
 
        ul {
            list-style: none;
            font-size: 0;
            background-color: #121212;

            border-radius: 4px;
            box-shadow: 0 0 5px #555555;

        }
 
        .menu-item {
            position: relative;
            display: inline-block;
            margin: .5rem;
            border-radius: 4px;
            border: 1px solid #111;

            text-transform: capitalize;
        }
 
        .menu-link {
            text-decoration: none;
            color: #FFF;

            padding: 1rem;
            display: block;
        }
 
        .nav {
            background-color: rgba(154, 143, 115, 0.15);
            max-width: 960px;
            margin: 1rem auto;
            width: 80%;
            padding: .5rem;
            border-radius: 4px;
        }
 
        .submenu,
        .sub-submenu {
            min-width: 320px;
            position: absolute;
            padding: 0;
            margin: 0;
            transform: scale(0);
            transition: transform 0.3s;
            transform-origin: top left;
        }
 
        .submenu .menu-item {
            display: block;
            width: 100%;
            margin: 0;
        }
 
        .menu>.menu-item>.menu-link:hover {
            color: #4d71b7;

        }
 
        .menu-item:hover .submenu {
            transform: scale(1);
        }
 
        .submenu .menu-item:hover {
            background: #304f83;

        }
 
        .submenu .menu-item:hover .sub-submenu {
            transform: scale(1);
        }
 
        .sub-submenu {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
        }
 
        .arrow {
            position: absolute;
            right: 1rem;
            top: 1rem;
            font-weight: 700;
        }
 
        .menu-item.item-active {
            background: -webkit-linear-gradient(#4d71b7, #354f83);

            background: linear-gradient(top, #4d71b7, #354f83);

        }
    </style>
</head>
 
<body>
    <header class="header">
        <nav class="nav">
            <ul class="menu">
                <li class="menu-item item-active"><a class="menu-link" href="#">Home</a></li>
                <li class="menu-item"><a class="menu-link" href="#">Nosotros</a></li>
                <li class="menu-item">
                    <a class="menu-link" href="#">Submenu</a>
                    <ul class="submenu">
                        <li class="menu-item"><a class="menu-link" href="#">Subitem 1</a></li>
                        <li class="menu-item">
                            <a class="menu-link" href="#">Subitem 2 <span class="arrow">></span></a>
                            <ul class="sub-submenu">
                                <li class="menu-item"><a class="menu-link" href="#">Subitem 1</a></li>
                                <li class="menu-item"><a class="menu-link" href="#">Subitem 2</a></li>
                                <li class="menu-item"><a class="menu-link" href="#">Subitem 3</a></li>
                                <li class="menu-item"><a class="menu-link" href="#">Subitem 4</a></li>
                            </ul>
                        </li>
                        <li class="menu-item"><a class="menu-link" href="#">Subitem 3</a></li>
                        <li class="menu-item"><a class="menu-link" href="#">Subitem 4</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a class="menu-link" href="#">Servicios</a></li>
                <li class="menu-item"><a class="menu-link" href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar