Link Search Menu Expand Document

CSS Cheat Sheet

Ressources

  • CSS Layouts Introduction
  • JSFiddle - Javascript Online IDE
  • Standard Clearfix

      .clearfix::after {
        content: "";
        clear: both;
        display: table;
      }
    
  • External Link Indicators

      // Set for all links
      .content a[href^="//"]:after, 
      .content a[href^="http://"]:after, 
      .content a[href^="https://"]:after {
          content: url(/images/Icon_External_Link.png);
          margin: 0 0 0 5px;
      }
    
      // Exclude local links
      .content a[href^="//lzone.de/"]:after, 
      .content a[href^="http://lzone.de/"]:after, 
      .content a[href^="https://lzone.de/"]:after {
          content: '';
          margin: 0;
      }
    
  • Image Inlining

      <img src="data:image/png;base64,[IMAGE_DATA_STRING]" />
    
  • CSS Pre-Processors

Advanced CSS Style Overview

CSS 1No Wrapping
white-space: nowrap;
CSS 1Inline Block Layout
display: inline-block;
CSS 2Max Width
max-width: 1024px;
CSS 2Table - Border Collapse
border-collapse: collapse
CSS 2Insert Before/After
p.chapter:before { content: 'something'; }

a.href[href^="http://"]:after {
   content: url(/images/Icon_External_Link.png);
}
CSS 3nth Child
tr:nth-child(odd) { }
tr:nth-child(even) { }
tr:nth-child(5) { }       // just the 5th
tr:nth-child(2n+3) { }    // every 2nd starting at 3
tr:nth-child(-n+4) { }    // first 4
CSS 3Media Queries
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
@media (min-width: 400px) { }
@media (max-width: 600px) { }
@media (max-width: 600px) and (orientation: landscape) { }
@media screen and (min-aspect-ratio: 16/9) { }
@media print and (min-resolution: 300dpi) { }
</pre>
CSS 3View Port
<meta name="viewport" content="width=320" />

@-viewport { width: 640px; }

@-ms-viewport { width: device-width }

@media (max-width: 699px) and (min-width: 520px) {
  @-viewport {
    width: 640px;
  }
}

@viewport {
    width: 980px;
    min-zoom: 0.25;
    max-zoom: 5;
    orientation: landscape;
}
CSS 3Background Gradient
background: -webkit-linear-gradient(#444, #000);
background: -o-linear-gradient(#444, #000);
background: -moz-linear-gradient(#444, #000);
background: linear-gradient(#444, #000);
CSS 3Border Radis
border-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; 
CSS 3div - Colum Count
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
CSS 3Animations
animation-name: spin; 
animation-duration: 5s;
animation-iteration-count: infinite; 
animation-timing-function: linear;
CSS 3Circle Drawing Circles are done using a 50% border radius
border-radius:50%;
DraftFlexbox
display: flex;
flex-direction: <row | row-reverse | column | column-reverse>;
flex-wrap: <nowrap | wrap | wrap-reverse>;
...
CSS 3Font Smoothing
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}