Me gustaría crear algunas "simulaciones" de Mac OS X 10.7 Windows en Photoshop.
Me gustaría conocer los parámetros de la sombra de la ventana, como el tamaño, la extensión y la distancia.
¿Alguien podría ayudarme con esto?
Respuestas
¿Demasiados anuncios?
Strongground
Puntos
31
En realidad, es más bien una combinación de dos sombras paralelas. Estos ajustes me funcionan bien en comparación directa con la sombra original:
- Sombra 1:
- Opacidad: 47%
- Ángulo: 90°.
- Distancia: 26px
- Separación: 0px
- Tamaño: 43px
- Sombra 2:
- Opacidad: 44%
- Ángulo: 90°.
- Distancia: 0px
- Separación: 0px
- Tamaño: 3px
La segunda sombra es para la fina línea más oscura que se nota alrededor de cada ventana, especialmente cuando se examina el cromo de las ventanas de OS X sobre fondo blanco.
Gopala raja naika
Puntos
121
.box {
width: 200px;
height: 100px;
margin: auto;
padding: 20px;
border-radius: 5px;
background-color: #e4e4e4; border: 1px solid #adadad;
-webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}
<div class="box">
Lorem ipsum
</div>
Iulian Onofrei
Puntos
147
A partir de marzo de 2020, el Recursos de diseño de interfaz de usuario de Apple para macOS nos dice esto:
- 1px dentro de un borde blanco de 15% de opacidad
- 0,5px fuera del borde negro 65% de opacidad
- 18px desplazamiento superior 50 desenfoque negro 52% opacidad sombra
Ejemplo: https://jsfiddle.net/Revolter/sg352ozv/
(Insertar > Interfaz de usuario de Apple MacOS > Ventana con barra de título > Aqua oscuro)
