2 votos

Parámetros de sombra de ventana de Mac OS X 10.7

Me gustaría crear algunas "simulaciones" de ventanas de Mac OS X 10.7 en Photoshop.

Me gustaría aprender sobre los parámetros de sombra de las ventanas, como el tamaño, la dispersión y la distancia.

¿Alguien podría ayudarme con esto???

1 votos

¿Qué versión de Windows estás intentando simular?

1 votos

¿Estás solo preguntando sobre sombras? ¿O hay algo más?

0 votos

No estoy tratando de simular Windows, estoy tratando de simular las sombras de Mac OS

3voto

Para las ventanas estándar de Mac OS X, use sombra con los siguientes parámetros: color negro #000000 con opacidad del 60%, ángulo de 90º, distancia de 25px, tamaño de 50px, dispersión de 0px.

2 votos

A partir de la última versión de OS X, creo que 50% de opacidad, 22px de distancia y 45px de tamaño se aproximan más al sombreado. Para pantallas retina, 45px de distancia y 90px de tamaño.

3voto

Strongground Puntos 31

En realidad es más bien una combinación de dos sombras. Estos ajustes me funcionan bien en comparación directa con la sombra original:

  • Sombra 1:
    • Opacidad: 47%
    • Ángulo: 90°
    • Distancia: 26px
    • Extensión: 0px
    • Tamaño: 43px
  • Sombra 2:
    • Opacidad: 44%
    • Ángulo: 90°
    • Distancia: 0px
    • Extensión: 0px
    • Tamaño: 3px

La segunda sombra es para la línea más oscura que se nota alrededor de cada ventana, especialmente al examinar el cromo de la ventana de OS X en un fondo blanco.

2voto

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);
}

 Lorem ipsum

1voto

Iulian Onofrei Puntos 147

A partir de marzo de 2020, los Recursos de Diseño de UI de Apple para macOS oficiales nos dicen lo siguiente:

  • Borde blanco de 1px con opacidad al 15%
  • Borde negro de 0.5px por fuera con opacidad al 65%
  • Desplazamiento superior de 18px, sombra difuminada negra con opacidad al 52%

Ejemplo: https://jsfiddle.net/Revolter/sg352ozv/

(Insertar > Apple macOS UI > Windows > Ventana con barra de título > Dark Aqua)

AppleAyuda.com

AppleAyuda es una comunidad de usuarios de los productos de Apple en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X