Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Added SCSS version #3

Merged
merged 1 commit into from over 2 years ago

2 participants

Oldřich Vetešník Christian Heilmann
Oldřich Vetešník

Hello, good work, wanted to contribute a bit :>

Added SCSS version b0f4b00
Oldřich Vetešník

Actually I made a typo, if you mean Twitter accounts in the comment header, then it's not @ollie but @vetesnik, realized it too late. :/

Christian Heilmann codepo8 merged commit 9456883 into from
Christian Heilmann codepo8 closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Sep 07, 2011
Added SCSS version b0f4b00
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 57 additions and 0 deletions. Show diff stats Hide diff stats

  1. 57  rainbows.scss
57  rainbows.scss
... ...
@@ -0,0 +1,57 @@
  1
+/*
  2
+ * CSS animated rainbow dividers of awesome 
  3
+ * by Chris Heilmann @codepo8 and Lea Verou @leaverou and unicorn @ollie
  4
+ **/
  5
+@-moz-keyframes charlieeee {
  6
+	from { background-position: top left; } 
  7
+	to   { background-position: top right; }
  8
+}
  9
+@-webkit-keyframes charlieeee { 
  10
+	from { background-position: top left; }  
  11
+	to   { background-position: top right; }  
  12
+}
  13
+@-o-keyframes charlieeee { 
  14
+	from { background-position: top left; }  
  15
+	to   { background-position: top right; }  
  16
+}
  17
+@-ms-keyframes charlieeee { 
  18
+	from { background-position: top left; }  
  19
+	to   { background-position: top right; }  
  20
+}
  21
+@-khtml-keyframes charlieeee { 
  22
+	from { background-position: top left; }  
  23
+	to   { background-position: top right; }
  24
+}
  25
+@keyframes charlieeee { 
  26
+	from { background-position: top left; }
  27
+	to   { background-position: top right; }
  28
+}
  29
+
  30
+.catchadream{
  31
+	$gradient: left, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red;
  32
+	background-image: -webkit-linear-gradient($gradient);
  33
+	background-image:    -moz-linear-gradient($gradient);
  34
+	background-image:      -o-linear-gradient($gradient);
  35
+	background-image:     -ms-linear-gradient($gradient);
  36
+	background-image:  -khtml-linear-gradient($gradient);
  37
+	background-image:         linear-gradient($gradient);
  38
+
  39
+	$animation: charlieeee 2.5s forwards linear infinite;
  40
+	-moz-animation:    $animation;
  41
+	-webkit-animation: $animation;
  42
+	-o-animation:      $animation;
  43
+	-khtml-animation:  $animation;
  44
+	-ms-animation:     $animation;
  45
+	-lynx-animation:   $animation;
  46
+	animation:         $animation;
  47
+
  48
+	background-size: 50% auto;
  49
+}
  50
+
  51
+#tongue { position: cheek; }
  52
+/* ^ OMG! An ID! That kills performance! */
  53
+
  54
+/*
  55
+  .catchadream:after { content: '廌' }
  56
+*/
  57
+/* ^ uncomment to add unicorn */
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.