Initial Letter Make the initial letter four lines tall, h1+p::first-letter { one line above the content and 3 into initial-letter: 4 3; } the content.
http://codepen.io/rachelandrew/full/WobvQq/
http://codepen.io/rachelandrew/full/WobvQq/
Currently Safari 9+ only.
Initial Letter h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; Adding additional styling to the margin: 0 5px 0 0; initial letter. color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; }
http://codepen.io/rachelandrew/pen/LbEpPX
Initial Letter @supports (initial-letter: 3) or (- webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; Using feature queries to test for background-color: rgb(114,110,151); padding: 2em .5em; support before adding rules that margin: 0 5px 0 0; style the fi rst letter. color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } }
http://codepen.io/rachelandrew/pen/LbEpPX
Upside down and back to front with Writing modes
http://codepen.io/rachelandrew/pen/LbVQNW
Writing Modes .wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; } Using vertical-rl then fl ipping the text h1 { writing-mode: vertical-rl; with a transform. transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; }
http://codepen.io/rachelandrew/pen/LbVQNW
http://caniuse.com/#feat=css-writing-mode
Variables in CSS with Custom properties
CSS CUSTOM PROPERTIES (CSS VARIABLES) This module introduces a family of custom author-de fi ned properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document. https://drafts.csswg.org/css-variables/
Custom Properties :root { --primary: blue; --secondary: orange; De fi ne variables then use them in } CSS h1 { color: var(--primary); }
Custom Properties :root { --primary: blue; --secondary: orange; } @supports (--primary: blue) { Can be tested for using feature h1 { color: var(--primary); queries } h2 { color: var(--secondary); } }
http://codepen.io/rachelandrew/pen/mErpZA
http://caniuse.com/#feat=css-variables
Adding things up with calc()
Basic mathematics in CSS
calc() <div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div> Three boxes, each with a div nested <div class="box box2"> inside. <div>height is 140px</div> </div> <div class="box box3"> <div>height is 14em</div> </div> </div>
calc() .box2 { height: 140px; Two of the outer boxes have a height, } box1 is the height of the content .box3 { inside. height: 14em; transition: height 0.5s ease; } Box3 will grow on hover. .box3:hover { height: 30em; }
calc() .box > div { color: #fff; border-radius: 5px; position: absolute; In the CSS for the inner box, we bottom: 20px; calculate the height as 50% - 20px. right: 20px; width: 30%; height: calc(50% - 20px); }
http://codepen.io/rachelandrew/full/VmYYqM/
http://caniuse.com/#feat=calc
Staying put with position: sticky
POSITION: STICKY A stickily positioned box is positioned similarly to a relatively positioned box, but the o ff set is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. https://drafts.csswg.org/css-position/#sticky-pos
position: sticky <dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> A dl with dt elements followed by <dd>Rachel Andrew</dd> multiple dd elements. <dt>B</dt> <dd>. . .</dd> </dl>
position: sticky .authors dt { position: sticky; Applying position: sticky to the dt top: 0; }
http://codepen.io/rachelandrew/pen/NbPamG
http://caniuse.com/#feat=css-sticky
Snap to it with Scroll snapping
https://drafts.csswg.org/css-scroll-snap-1/
http://caniuse.com/#feat=css-snappoints
Recommend
More recommend