Shadows
If multiple shadows are set, they will stack.
These can be used directly as properties.
import Color
import Style exposing (..)
import Style.Shadow as Shadow
style MyStyleWithShadow
[ Shadow.glow Color.red 5
]
simple : Style.Property class variation
A nice preset box shadow.
deep : Style.Property class variation
A nice preset box shadow that's deeper than simple
.
glow : Style.Color -> Basics.Float -> Style.Property class variation
A simple glow by specifying the color and size.
innerGlow : Style.Color -> Basics.Float -> Style.Property class variation
textGlow : Style.Color -> Basics.Float -> Style.Property class variation
You can also have more control over the paraters of the shadow, such as the Shadow.box
shown below.
import Color
import Style exposing (..)
import Style.Shadow as Shadow
style MyStyleWithShadow
[ Shadow.box
{ offset = ( 0, 0 )
, size = 5
, blur = 2
, color = Color.blue
}
]
box : { offset : ( Basics.Float, Basics.Float ), size : Basics.Float, blur : Basics.Float, color : Style.Color } -> Style.Property class variation
drop : { offset : ( Basics.Float, Basics.Float ), blur : Basics.Float, color : Style.Color } -> Style.Property class variation
A drop shadow will add a shadow to whatever shape you give it.
So, if you apply a drop shadow to an image with an alpha channel, the shadow will appear around the eges.
inset : { offset : ( Basics.Float, Basics.Float ), size : Basics.Float, blur : Basics.Float, color : Style.Color } -> Style.Property class variation
text : { offset : ( Basics.Float, Basics.Float ), blur : Basics.Float, color : Style.Color } -> Style.Property class variation