andersdn

## flippin-bars-with-css-variables-webkit-only.markdown

      
              5 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                andersdn
                / flippin-bars-with-css-variables-webkit-only.markdown
            
            
              Created
              April 27, 2017 16:09
            
              
                flippin' bars with CSS variables (WebKit only)
              
          
    flippin' bars with CSS variables (WebKit only)

Watch me code this in9 minutes (you can also speed it up if you feel I'm typing/ speaking too slow). WebKit only! Firefox and Edge don't support calc() as an animation-delay value and Firefox doesn't support calc() in rgb() either. If you like this demo in particular and my demos in general, please consider one of the following:


getting me something from my Amazon WishList


or this t-shirt  (size S) that I couldn't find on Amazon, but I absolutely love


or at least supportting the implementation of the cool features showcased here: using calc() for any values, not just lengths - bugs 956573, [984021](https://bugzilla.mozilla.org/show_bug.cgi?id=98


## index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TITLE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    <body>

        <div id="container">

## _tlp-dashboard.html
<html>
<body>
<h1>Foo is <%= foo %></h1>
<% _.each(baz,function(value,index){ %>
  <h2>Baz <%= index %> is <%= value %>
<h2>
<% }) %>
</body>
</html>

## Font Awesome Colored - Brand And Social Icons.markdown

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                andersdn
                / Font Awesome Colored - Brand And Social Icons.markdown
            
            
              Created
              October 30, 2015 13:38
            
              
                Font Awesome Colored - Brand And Social Icons
              
          
    Font Awesome Colored - Brand And Social Icons

Font Awesome Brand and social Icons with brand color
A Pen by Amey Raut on CodePen.
License.

  
## index.html
<div class="holoform dark">
  <span class="checkbox">
	    <label for="check1">This is the label</label>
    	<span>
	    <input type="checkbox" name="check1" id="check1">
    	<label data-on="ON" data-off="OFF"></label>
        </span>
	</span>
	<span class="checkbox">
	    <label for="check2">This one is already checked</label>

## index.html
<div class="holoform dark">
  <span class="checkbox">
	    <label for="check1">This is the label</label>
    	<span>
	    <input type="checkbox" name="check1" id="check1">
    	<label data-on="ON" data-off="OFF"></label>
        </span>
	</span>
	<span class="checkbox">
	    <label for="check2">This one is already checked</label>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>TITLE</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	</head>
	<body>

	<div id="container">
	<html>
	<body>
	<h1>Foo is <%= foo %></h1>
	<% _.each(baz,function(value,index){ %>
	<h2>Baz <%= index %> is <%= value %>
	<h2>
	<% }) %>
	</body>
	</html>
	<div class="holoform dark">
	<span class="checkbox">
	<label for="check1">This is the label</label>
	<span>
	<input type="checkbox" name="check1" id="check1">
	<label data-on="ON" data-off="OFF"></label>
	</span>
	</span>
	<span class="checkbox">
	<label for="check2">This one is already checked</label>