Calculating shadow values for all Material Design elevations -

-

in latest material design documentation (https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-) exhaustive set of ui elements referenced respective elevation (z-index in dp). example switch elevated 1dp, while dialog elevated 24dp. google's list of ui elements uses 10 different elevation levels. since elevation decides shadow of element, we'll need 10 different shadows. , that's i'm lost.

how calculate/deduce right shadow values (color, x-offset, y-offset, blur, spread) each elevation level?

i've found different sources have calculated shadow values 5 different elevations (https://news.layervault.com/stories/42319-calculating-shadow-values-for-material-design). however, 5 elevation steps not enough, nor give explanation how got these respective values.

here's function came gives result, believe:

(javascript)

function getshadow(object, dp) {     if (dp <= 0)     {         panel.style.boxshadow = "none";         return;     }      panel.style.boxshadow = "0px " + dp + "px " + dp + "px " + "rgba(0, 0, 0, .38)"; }

a jfiddle: https://jsfiddle.net/crkb906z/

basically, distance base layer how far down shadow top is, , use same value blur make fuzzier material gets higher.

i compared result of 3 shadows used polymer , comparable. since can't find consistency between 5 layer shadows people provide, imagine how it's calculated isn't important.

edit

okay, after studying available box-shadows 5 depths (they originated here, google has since removed documentation), i've come more complex formula results in shadows more examples in link:

function applyshadow(element, dp) {     if (dp == 0)     {         element.style.boxshadow = "none";     }     else     {         var shadow = "0px ";          var ambienty = dp;         var ambientblur = dp == 1 ? 3 : dp * 2;         var ambientalpha = (dp + 10 + (dp / 9.38)) / 100;          shadow += ambienty + "px " + ambientblur + "px rgba(0, 0, 0, " + ambientalpha + "), 0px ";          var directy = (dp < 10 ? (dp % 2 == 0 ? dp - ((dp / 2) - 1) : (dp - ((dp - 1) / 2))) : dp - 4);         var directblur = dp == 1 ? 3 : dp * 2;         var directalpha = (24 - math.round(dp / 10)) / 100;          shadow += directy + "px " + directblur + "px rgba(0, 0, 0, " + directalpha + ")";          element.style.boxshadow  = shadow;     } }

i update https://jsfiddle.net/crkb906z/1/ show difference.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more