Cupcake ipsum dolor sit. Amet I love croissant chocolate chocolate cake gummi bears chocolate. Chocolate jelly beans I love jelly. Sweet roll pastry sweet. Tart lemon drops pie. Jelly candy canes brownie pie macaroon pudding pie.
A floating box at the far end of the box has borders on two sides (using border-color
with four values), and border-radius
on the one visible corner. It also has a margin on two sides, with different units.
This paragraph is in a container that has padding on each side, using the two-value ("padding: 0 20%;") syntax. When rotated (top to bottom), the values should be flipped, so that the padding is on the top and bottom.
This paragraph is has a text-indent
. Sed efficitur vulputate arcu a facilisis. Sed et libero volutpat, facilisis ex vel, dapibus nisi. Maecenas bibendum, est non consequat consectetur, tellus erat elementum tortor, ut aliquet tellus enim sed ligula. Sed luctus congue purus sit amet condimentum. Suspendisse est ligula, accumsan laoreet porta vel, rutrum finibus dui.
padding
and margin
styles. Padding.
This span has both padding and margin after the text, using margin-[direction]/padding-[direction] properties. When flipping from ltr to rtl, padding-right becomes padding-left. For tb-lr, it becomes padding-bottom.
Lorem ipsum. This span has both padding and margin before the text, using the four-value syntax. (E.g. padding: 0 0 0 1em; )
Lorem ipsum. This span has both padding and margin on both sides of the text, using the three-value syntax. When rotated, this gets converted to four-value syntax.
A border and border radius.
This span has a red border after the text, with rounded corners.
This span has a thicker border closer to the preceding line, a thinner border to the inline-start direction, and repeating text at the border closer to the following line.
Using box-shadow
, text-shadow
, including inset positioning and overlapping shadows.
This text has a red shadow before the text slightly closer to the previous line, and a blue shadow after the text and slightly closer to the following line.
This box has an inset shadow, visible before the text.
transform: translate( 25%, 50% );
position: relative;
Cursor is shown when hovering over the text.
Background-images, including URL flips, and positioning.