→ and → to change slides. 2 for comments. estelle.github.com/cssmastery

CSS Mastery: Other Features

Columns

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;

Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.

Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.

Chicken bacon meatloaf minim meatball salami sunt spare ribs.

Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.

Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.

Multi Column Layout Properties

column-count:
column-width:
columns: <min-column-width> <max-column-cound>
column-fill: auto | balance;
column-gap: normal | length;
column-span: none | all;
column-rule-color:
column-rule-style: <border-style>
column-rule-width:
column-rule:
break-after
break-before
break-inside
orphans
widows

columns

box-sizing

box-sizing: content-box | border-box
content-box
border-box
div {
width: 200px;
height:100px;
padding: 20px;
margin:20px;
border-width: 5px;
}
border-box

border-box replicates the old IE box model

Art Direction

Shaders

Visit Site

background-blend-mode

↪

CSS Shapes

↪ Photo: kristinausk

CSS Shapes 2

↪

CSS Shapes with SVG Masking

↪

CSS Shape Editor

↪

Fonts

Material Design Icons

↪

Icon Fonts

↪

Icon Fonts

↪

Font Squirrel

↪

Unicode Subset

@font-face {
    font-family: 'myFont';
    src: url('myfont-webfont.woff2') format('woff2'),
         url('myfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    unicode-range: U+26;
}

Subsets of Google Fonts

↪

CSS as the Solution

Github Repo 
<input id="zip" type="tel" name="zipcode" class="masked" 
  placeholder="XXXXX" pattern="\d{5}" title="5-digit zip code">

progressively enhanced with JS to: 

<label for="zip">Zip Code</label>
  <span class="shell">
    <span aria-hidden="true" id="zipMask"><i>123</i>XX</span>
    <input id="zip" type="tel" name="zipcode" pattern="\d{5}" 
    class="masked" title="5-digit zip code" maxlength="5" data-placeholder="XXXXX">
  </span>
Github Repo
Github Repo 
<fieldset class="mgr" id="address">
<legend>Select an address to edit:</legend>
<div>
  <a class="backward" data-move="backward" data-mgr="shipping-addresses" hidden></a>
  <ul class="mgr-labels left0">
    <li>
      <label for="address1">
      Instart Logic<br/>
      US Headquarters<br/>
      450 Lambert Avenue<br/>
      Palo Alto, CA 94306
      </label>
    </li>
    <li>
      <label for="address2">
      Instart Logic<br/>
      India Office<br/>
      6th Floor , HM Vibha Towers<br/>
      Hosur Rd, Adugodi<br/>
      Bengaluru — 560029
      </label>
    </li>...
  </ul>
  <a class="forward" data-move="forward" data-mgr="shipping-addresses" hidden></a>
  </div>
  <ul id="addressradios" class="mgr-radios">
    <li>
      <input type="radio" name="shipping-addresses" data-value="0" id="address1" checked><span></span>
    </li>
    <li>
      <input type="radio" name="shipping-addresses" data-value="1" id="address2"><span></span>
    </li>...
  </ul>
  </fieldset>

Other Stuff

Cursors

  • crosshair
  • default
  • help
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • progress
  • none
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • all-scroll
  • zoom-in
  • zoom-out

text-overflow: ellipsis

p {
  text-overflow: ellipsis; 
  white-space: nowrap;
  overflow: hidden;
}

overflow-hidden only: Play with the slider to see what happens at the end of the line

white-space: nowrap, overflow: hidden: Play with the slider to see what happens at the end of the line

text-overflow: ellipsis; white-space: nowrap; and overflow: hidden: Play with the slider to see what happens at the end of the line

Needs nowrap and overflow:hidden (anything other than visible) to work.

word-wrap: breakword

word-wrap:  normal | break-word
Despite the old adage, smiles is not longer than supercalifragilisticexpialidocious.

calc()

.colA {
  width:50%;
  margin-right: 1em;
}
.colB {
  width: calc(50% - 1em);
}
+, -, *, /, mod, min, and max operators.

rem

html {
    font-size: 62.5%;
}
p {
    font-size: 13px;
    font-size: 1.3rem;
}
small {
    font-size: 11px;
    font-size: 1.1rem;
}

viewport width

vw | vh | vmin | vmax

5vw = 5% of the width of the viewport
7vh = 7% of the height of the viewport
4vmin = 4% of the viewport height or width, whichever is smaller
8vmax = 8% of the viewport height or width, whichever is larger

under consideration

vi
1% of containing block, in the direction of the root 
element’s inline axis.

vb 
1% of the containing block, in the direction of the root 
element’s block axis.

pointer-events: none;

Can the element be clicked?!?!

.animatedElement {
  pointer-events: none;
}

Did you note that you could change the transforms examples even when the example was covering the code?

-webkit-user-modify

Related to contentEditable: Determines whether content of an element is editable. 

-webkit-user-modify: read-only | read-write | read-write-plaintext-only;
-moz-user-modify: read-only | read-write | write-only;
read-only
The content is read-only.
read-write
The content can be read and written.
write-only (moz only)
The user is able to edit the content, but not to read it.
read-write-plaintext-only (webkit)
The content can be read and written, but any rich formatting of pasted text is lost.

Links

The End

Home ➹