Tilted text
and irregular-shaped boxes
Qwwwik version 2.1 includes titled text for a class of <h5>h5 headings</h5> in small coloured boxes. They can be links or just headings. Use one, or two together (or three together or ten together). These are links:
LINK TEXT 1 »
« THIS IS LINK TEXT 2
The HTML markup for two links together:
<h5 class="u7" style="margin: 2.4em auto 0em auto;"><a href="./page"> LINK TEXT 1 »</a></h5> <h5 class="d7" style="margin: 2.1em auto 3.0em auto;"><a href="https://example.com/">« THIS IS LINK TEXT 2 </a></h5>
The margins are adjusted to control the space above and below. The overlaps can be set as minus to overlap more, or less, including with other items above or below. Trial and error will be involved ('Preview page') before publishing!
Example 1 as headings without links:
IN BRIEF
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
FULL STORY
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam etc ...
The HTML markup:
<h5 class="u7 top" style="margin: 3.0em auto -2.4em 10%;"><span class="bluebg shape02">IN BRIEF</span></h5> <div class="shape1" style="background-color: #cc56a5;"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div> <h5 class="d7" style="margin: -3.0em auto 2.0em 10%;"><span class="greenbg shape01">FULL STORY</span></h5>
Note the addition of the optional classes shape02 and shape01 to give the tilted headings the same irregular shapes as the large irregular-shaped boxes.
Example 2 as headings without links:
IN BRIEF
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
FULL STORY
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam etc ...
The main difference is shape2, not shape1:
<div class="shape2 top" style="background-color: #cc56a5;">
An optional div class "top" ensures the item stays uppermost and doesn't slide under the main coloured box.
Note 1: div class "shapes 1 & 2" have no default background colour so are visible only when a background HEX colour is specified (shown in red in the markup). The text is white so choose a dark enough colour.
Note 2: the taller the coloured shape is, the more the top edges will slope and the more parallel the side edges will be as a consequence of being stretched.
Different colours for the tilted text:
(1) Tilt up:
<h5 class="u7" style="margin: 3.0em auto 3.0em auto;"><span class="classname">IN BRIEF</span></h5>
(2) Tilt down:
<h5 class="d7" style="margin: 3.0em auto 3.0em auto;"><span class="classname">FULL STORY:</span></h5>
classnames: greenbg, redbg, bluebg, purplebg, greybg.
The styles for tilted text and the irregular-shaped coloured box are in a new css file '/css/transient.css' (to keep them as a separate 'add-on').
This box has also been given the class 'tile' so it swings in upwards from the bottom. The class can be applied to any element, or to any group of elements by wrapping them in a div with class="tile".
Double 'slide-up' image with crossband:
The HTML markup:
<div class="tile"> <div class="fw1 tile"><img src="img/example-image.jpg" width="720" height="560" class="crossband-red" alt=""></div> </div>
See information