A veces para un proyecto haces algo que en sí quedó bien, pero para el proyecto mismo no funciona. Tal cosa pasó con esta luna, he de decir, modestia aparte, que quedó bien pero a pesar de eso no era funcional ni compatible con el diseño que estoy haciendo.

Pero me parece que si vale la pena que le haga un pequeño articulito.

Vamos a empezar por mencionar que esta luna la inspiré en un trabajo hecho por alguien más, ese codepen se llama "Planet Awesome" y lo pueden ver en la siguiente dirección: "http://codepen.io/bartuc/pen/Ajkph". Es un trabajito maravilloso como lo dice su nombre pero para mis necesidades es un poco pesado, y por pesado me refiero a que tienen demasiadas divisiones y un css muy grande, no es que esto sea malo, nada más que para lo que yo quería necesitaba simplificarlo un poco.

Empece por una división que tuvierse un radio de 50% para que fuera redondo y para su color de fondo le di un degradado radial dandole una posición de fondo difrerente al centro para darle volumen y como toque final para la luna hice que un box-shadow fuese el brillo de la luna.

Una cuestión diferente fueron los cráteres, si bien tienen el mismo radio de 50% le establecí una deformación con transform y con rotate en X y Y, otra cosa importante es que se dio el efecto de 3D con varias box-shadow dos con la propiedad inset y tres sin esta propiedad. Pero lo diferente es la utilización de los subselectores :before y :after para hacer que una división produzca los tres cráteres, esto nos ayuda a ahorrar código html lo que deviene en código más sencillo de leer.

Les dejo acá la muestra, espero les guste.


757 0 0