Photo: Gaute Heggen
The point of this text is to give a demonstration of the readability of some Scrollyteller built in css classes. This is the class ‘.waw’.
waw is short for white always works. In my opinion this is the most readable font without a background.
This is the a black font (obiously) and it has a slight bright glow to increase contrast. Still, I find it has readability problems. Mostly for even bright backgrounds.
The classname is .bsw, which is short for black sometimes works.
You can of course just use any element type as a .swoosh.
This is an generateblocks ‘Headline’ element H4. The font is Special Elite, it has a dark semi transparent background, line height 0.8 , custom padding and restricted width.
This is the built in CSS class .newsbox. I recommend it for longer texts that need higher readability than the white subtitle-like class .waw. The text is also left aligned. Now some dummy text will follow just to show this as a longer text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
This is new kid on the block and hoping to be a built in class…
.newsboxsansserif is the classname and it is just like its sibling, except the little feet on the letters are gone, the frame is by deafult a bit tighter and the background less transparent.
I like it already so this class is a keeper.
This is a container element with a grid. Inside is image and text side by side.
Photo: Gaute Heggen
Was that Elvis twice with guns?
Anyway, here is the whole damn identical text, font and background circus again, but at least its on the left this time!
You right wing extremists! white always works is racist!
This is the a black font (obiously) and it has a slight bright glow to increase contrast. Still, I find it has readability problems. Mostly for even bright backgrounds.
The classname is .bsw, which is short for black sometimes works. This case works better than the previous image.
You can of course just use any element type as a .swoosh.
This is an generateblocks ‘Headline’ element H4. The font is Special Elite, it has a dark semi transparent background, line height 0.8 , custom padding and restricted width.
This is the built in class .newsbox. I recommend it for longer texts that need higher readability than the white subtitle-like class .waw. Now some dummy text will follow just to show this as a longer text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
This is new kid on the block and hoping to be a built in class…
.newsboxsansserif is the classname and it is just like its sibling, except the little feet on the letters are gone, the frame is by deafult a bit tighter and the background less transparent.
I like it already so this class is a keeper.
This is a container element with a grid. Inside is image and text side by side.