Create a gist now

Instantly share code, notes, and snippets.

@abernier /README.md
Last active Aug 29, 2015

What would you like to do?
CSS cheat sheet

responsive images

div {
  background-image:url("thekase-community-monkey-bg_320x.png");
  @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
    background-image:url("thekase-community-monkey-bg_640x.png");
    
  @media (min-width:480px)
    background-image:url("thekase-community-monkey-bg_480x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_960x.png");
      
  @media (min-width:768px)
    background-image:url("thekase-community-monkey-bg_768x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_1536x.png");
      
  @media (min-width:1024px)
    background-image:url("thekase-community-monkey-bg_1024x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_2048x.png");
      
  @media (min-width:1400px)
    background-image:url("thekase-community-monkey-bg_1400x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_2800x.png");
}

transitionend

var $el = $(document.getElementById('foo'));

function dosomethingAfterOpacityTransition(e) {
  if (!(e.originalEvent.target === this.$el[0] && e.originalEvent.propertyName === 'opacity')) {
    return;
  }

  // Opacity transition has ended here! Do something...
  
  this.$el.off('webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend', dosomethingAfterOpacityTransition);
  e.originalEvent.stopPropagation();
}

$el.on('webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend', dosomethingAfterOpacityTransition);

wide technique

<div style="padding:10px;">
  <div class="wide">cancel parent padding</div>
</div>

<style>
.wide {margin-left:-10px;margin-right:-10px; width:calc(100%+20px);}
</style>
// see: http://codepen.io/bradfrost/full/HvBLc
sourceorder()
display:table;width:100%; caption-side:top;
.sourceorder-switch
display:table-caption;
float:none; //float is not allowed
// see: http://www.w3.org/TR/CSS2/sample.html
br-after()
&:after
content:"\A"; white-space:pre-line;
vcenter()
height:100%; white-space:nowrap;word-spacing:-.25em;
&:before
content:"";display:inline-block;vertical-align:middle; width:0;height:100%;
>*
display:inline-block;vertical-align:middle; white-space:normal;word-spacing:normal;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment