Elegant.Background

Background contains everything about background rendering: using photos or gradient, and positionning them on the page.

Types


type alias Background =

{ color : Maybe.Maybe Color.Color, images : List.List Elegant.Background.BackgroundImage }

The Background record contains everything about background rendering, including character rendering. You probably won't use it as is, but instead using Box.background which automatically generate an empty Background record. You can then use modifiers. I.E.

Box.background
    [ Elegant.color Color.white
    , Background.images
        [ Background.image "/example.photo" ]
    ]


type Image

[]

Represents an image in CSS. It can be an image, represented by a source url, or a gradiant. They are instanciated by image (which instanciate an Image inside a BackgroundImage) or by linear or radial, instanciating a gradiant.



type alias BackgroundImage =

{ image : Maybe.Maybe Elegant.Background.Image, position : Maybe.Maybe (Elegant.Helpers.Vector.Vector Elegant.Helpers.Shared.SizeUnit) }

Represents a Background Image, i.e. an image in Background. Contrary to Image, a BackgroundImage contains an image and a position. This position set the position of the image on the background.



type Gradient

[]

Defines a gradient, which can be either linear or radial. They are instanciated by the corresponding functions.



type Angle

[]

Represents an angle. Can be either radiant or degree.



type alias Degree =

Basics.Float

Represents a degree.



type alias Radiant =

Basics.Float

Represents a radiant.



type alias ColorStop =

{ position : Maybe.Maybe Elegant.Helpers.Shared.SizeUnit, color : Color.Color }

Represents a CSS Color Stop, which contains a Color, and possibly a position. This is automatically generated by colorStop.


Background creation


default : Elegant.Background.Background

Generates an empty Background.



images : List.List Elegant.Background.BackgroundImage -> Modifiers.Modifier Elegant.Background.Background

Modify the background rendering to add photos and gradients. It modifies the images list in Background.

Background.images
    [ Background.image "/example.photo" ]


image : String.String -> Elegant.Background.BackgroundImage

Accepts an Url, and returns a BackgroundImage. This image can be modified to add a position to it.



gradient : Elegant.Background.Gradient -> Elegant.Background.BackgroundImage

Accepts a gradient, and creates a BackgroundImage.



linear : Elegant.Background.Angle -> Elegant.Background.ColorStop -> Elegant.Background.ColorStop -> Elegant.Background.Gradient

Creates a linear gradient. The angle, and two colors (one for starting color, the second for the ending color) are required, and more colors can be added in the gradient using intermediateColors.



radial : Elegant.Background.ColorStop -> Elegant.Background.ColorStop -> Elegant.Background.Gradient

Creates a radial gradient. Two colors (one for starting color, the second for the ending color) are required, and more colors can be added in the gradient using intermediateColors.


Background modifiers


intermediateColors : List.List Elegant.Background.ColorStop -> Elegant.Background.Gradient -> Elegant.Background.Gradient

Sets multiples intermediate colors in a gradient. By default, a gradient is created with two colors. This can be used to add more colors.



colorStop : Color.Color -> Elegant.Background.ColorStop

Generates a CSS Color Stop from Color to use in gradients.



at : a -> { b | position : Maybe.Maybe a } -> { b | position : Maybe.Maybe a }

Sets a position on both a gradient and a BackgroundImage.



degree : Basics.Float -> Elegant.Background.Angle

Generates an angle in degree from Float.



rad : Basics.Float -> Elegant.Background.Angle

Generates an angle in radiant from Float.


Compilation


backgroundToCouples : Elegant.Background.Background -> List.List ( String.String, String.String )

Compiles a Background record to the corresponding CSS list of tuples. Compiles only styles which are defined, ignoring Nothing fields.