altayaydemir / style-elements / Style.Shadow

Shadows

If multiple shadows are set, they will stack.

Easy Presets

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

Advanced Shadows

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