IHazelton

Cakes & Bakes

vertical-rl❤️ vertical-lr❤️

I AM VERTICAL

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia possimus, est earum aliquid dolor quis facere unde, dolore porro dicta sapiente nulla cumque ipsum asperiores nihil, veniam voluptate vero corporis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nulla, a exercitationem aut facilis, vel quia magni deserunt nihil eaque quo placeat eligendi tenetur modi voluptas consectetur blanditiis quas ea? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nulla, a exercitationem aut facilis, vel quia magni deserunt nihil eaque quo placeat eligendi tenetur modi voluptas consectetur blanditiis quas ea? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nulla, a exercitationem aut facilis, vel quia magni deserunt nihil eaque quo placeat eligendi tenetur modi voluptas consectetur blanditiis quas ea? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nulla, a exercitationem aut facilis, vel quia magni deserunt nihil eaque quo placeat eligendi tenetur modi voluptas consectetur blanditiis quas ea? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nulla, a exercitationem aut facilis, vel quia magni deserunt nihil eaque quo placeat eligendi tenetur modi voluptas consectetur blanditiis quas ea?

CSS

Vertical

Text

Typography

This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart- shaped mask.This div element has a heart-shaped mask.

I am a transparent div

I am not a transparent div

Iam a clip div.

Some text goes here

Breathe

OVERLAY TEXT

Color Changing
OVERLAY TEXT

Nature

Breathe

mix-blend-mode-1

Ignacy Jan Paderewski
World's first superstar musician

Flowers

poligon

Example

demo gradient-text

rainbow-text

example1

container-6

Rainbow-bokeh

https://leaverou.github.io/css3patterns

#556b2f rgb(85,107,47)

#2f556b rgb(47,85,107)

#6b2f55 rgb(107,47,85)

#55647B rgb(85,100,123)

Font size = "1"
Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"

WordArt

just image

to lighten use rgba

background: linear-gradient(#e66465, #9198e5);

background: linear-gradient(to right, #e66465, #9198e5);

background: linear-gradient(30deg, #3f87a6, #ebf8e1, #f69d3c, #561423);

background: radial-gradient(yellow, red, brown);

background: radial-gradient(ellipse closest-side, red, brown 10%, #1e30ff 50%, beige);

Bubble Color Rainbow Palette

Our Bubble rainbow color palette is based on the RGB model and consists of 7 colors, just like the traditional rainbow. You might not see a lot of variation in color, especially if the chosen color is dark or extremely light. However, this can lead interesting rainbow palettes that are faded, soft, pastel or dull.

CBEFFF D3CBFF FFCBFE FFCBD2 FFF1CB E1FFCB CBFFE2

rgba(255, 255, 0, 1) rgba(0, 188, 212, 1) rgba(238, 130, 238, 1)

46 blend1 opacity:

47 blend2 mix-blend-mode: multiply

48 blend3 mix-blend-mode: overlay

49 background-blend-mode

match image size

Hover a box

Text

500x300

Pretty Pair

Change color on page...

INFO

500x300

Pretty Pair

Change color on page...

INFO

hover image wrapper2

the title read more

53 cat2-image

cat-image

Animation of filter

Hello there.

NATURE

mask

default

mask1

mask2

mask3

mask4

mask5

mask6

mask7

mask8

square-mask

element element2

styled

rectangle rectangle2 rectangle3

60 box

mask-box-image

61 butterfly

overlay-section4

Beating Heart

By Scott Mathson, inspired by CSS & Una

hero-image

bg-img

68 glossy

pickgradient2

img-gradient

Text Gradient

test-graphic

gover2

gover3

vin

71 blur

blend

multiple-filters testing

blend multiply testing

hue-rotate testing

invert

opacity

brightness testing

contrast

shadowed

sepia

grayscale

saturate

Overlay

article

https://codepen.io/codetrail/pen/DJOPqx

Some text goes here

module1

Some text goes here

By Scott Mathson, inspired by CSS & Una

pretty-background

to lighten use rgba

gover1

gover6

conic-gradient

gover3

Awsome

Past
The arguments are: 1px: Horizontal offset of the effect. Positive numbers shift it right, negative left. 2px: Vertical offset of the effect. Positive numbers shift it down, negative up. 3px: The blur effect. 0 means no blur. color: The color of the shadow.

mix-blend-mode

CSS Blend

CSS Blend Modes let us blend an element’s background layer with another layer. They allow blending between background images, gradients, and background colors.

Text here

And here

Hi there

This is the overlay!

With a little something extra ;)

https://css-tricks.com/radial-gradient-recipes/ https://alexolder.com/css-var-with-bubbles/ https://codepen.io/satheesh-sankaran/pen/jOKXwww https://blog.logrocket.com/creative-text-flows-using-css-shapes/ https://codepen.io/codetrail/pen/DJOPqx https://stackoverflow.com/questions/43806515/position-svg-elements-over-an-image

W3Schools How To

IHazelton

Cakes & Bakes

CSS

Vertical

Text

Typography

Some text goes here

Breathe

Breathe

OVERLAY TEXT

Color Changing OVERLAY TEXT

Nature

Breathe

mix-blend-mode-1

Ignacy Jan PaderewskiWorld's first superstar musician

poligon

Banner Heading

Example

demo gradient-text

rainbow-text

example1

container-6

Rainbow-bokeh

Bubble Color Rainbow Palette

Hover a box

Text

Text

Text

Text

Text

Pretty Pair

Pretty Pair

Animation of filter

Animation of filter

NATURE

NATURE

mask

Beating Heart

Text Gradient

Text Gradient

Some text goes here

Some text goes here

Awsome

mix-blend-mode

CSS Blend

Hi there

Color Changing
OVERLAY TEXT

Ignacy Jan Paderewski
World's first superstar musician