Background contains everything about background rendering: using photos or gradient, and positionning them on the page.
{ color : Maybe Color
, images : List 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" ]
]
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.
{ image : Maybe Image
, position : 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.
Defines a gradient, which can be either linear or radial. They are instanciated by the corresponding functions.
Represents an angle. Can be either radiant or degree.
Basics.Float
Represents a degree.
Basics.Float
Represents a radiant.
{ position : Maybe Elegant.Helpers.Shared.SizeUnit
, color : Color
}
Represents a CSS Color Stop, which contains a Color, and possibly a position.
This is automatically generated by colorStop
.
default : Background
Generates an empty Background
.
images : List BackgroundImage -> Modifiers.Modifier 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 -> BackgroundImage
Accepts an Url, and returns a BackgroundImage
. This image can be modified
to add a position to it.
gradient : Gradient -> BackgroundImage
Accepts a gradient, and creates a BackgroundImage
.
linear : Angle -> ColorStop -> ColorStop -> 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 : ColorStop -> ColorStop -> 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
.
intermediateColors : List ColorStop -> Gradient -> 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 -> ColorStop
Generates a CSS Color Stop from Color to use in gradients.
at : a -> { b | position : Maybe a } -> { b | position : Maybe a }
Sets a position on both a gradient and a BackgroundImage
.
degree : Basics.Float -> Angle
Generates an angle in degree from Float.
rad : Basics.Float -> Angle
Generates an angle in radiant from Float.
backgroundToCouples : Background -> List ( String, String )
Compiles a Background
record to the corresponding CSS list of tuples.
Compiles only styles which are defined, ignoring Nothing
fields.