infinityonlinesolutions · July 12, 2024 12:48 · Dec 17, 2013 · Dec 17, 2013 · Dec 6, 2013 · Dec 6, 2013
diff --git a/How to use Images as Radio buttons.md b/How to use Images as Radio buttons.md
@@ -1,5 +1,4 @@
 This code how to replace the traditional radio-buttons, for custom images. You can do the same with checkboxes.
 
 - Demo: http://jsfiddle.net/La8wQ/10/
-
 - A mod: http://jsfiddle.net/La8wQ/22/
diff --git a/How to use Images as Radio buttons.md b/How to use Images as Radio buttons.md
@@ -1,3 +1,5 @@
 This code how to replace the traditional radio-buttons, for custom images. You can do the same with checkboxes.
 
-Demo: http://jsfiddle.net/La8wQ/10/
+- Demo: http://jsfiddle.net/La8wQ/10/
+
+- A mod: http://jsfiddle.net/La8wQ/22/
diff --git a/first-readme.md → How to use Images as Radio buttons.md b/first-readme.md → How to use Images as Radio buttons.md
diff --git a/awesome.css → super-awesome.css b/awesome.css → super-awesome.css
diff --git a/awesome.css b/awesome.css
@@ -0,0 +1,38 @@
+.cc-selector input{
+    margin:0;padding:0;
+    -webkit-appearance:none;
+       -moz-appearance:none;
+            appearance:none;
+}
+.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
+.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}
+
+.cc-selector input:active +.drinkcard-cc{opacity: .9;}
+.cc-selector input:checked +.drinkcard-cc{
+    -webkit-filter: none;
+       -moz-filter: none;
+            filter: none;
+}
+.drinkcard-cc{
+    cursor:pointer;
+    background-size:contain;
+    background-repeat:no-repeat;
+    display:inline-block;
+    width:100px;height:70px;
+    -webkit-transition: all 100ms ease-in;
+       -moz-transition: all 100ms ease-in;
+            transition: all 100ms ease-in;
+    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
+       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
+            filter: brightness(1.8) grayscale(1) opacity(.7);
+}
+.drinkcard-cc:hover{
+    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
+       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
+            filter: brightness(1.2) grayscale(.5) opacity(.9);
+}
+
+/* Extras */
+a:visited{color:#888}
+a{color:#444;text-decoration:none;}
+p{margin-bottom:.3em;}
diff --git a/first-readme.md b/first-readme.md
@@ -0,0 +1,3 @@
+This code how to replace the traditional radio-buttons, for custom images. You can do the same with checkboxes.
+
+Demo: http://jsfiddle.net/La8wQ/10/
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<form>
+    <p>Previously:</p>
+    <div>
+        <input id="a1" type="radio" name="a" value="visa" />
+        <label for="a1">Visa</label><br/>
+        <input id="a2" type="radio" name="a" value="mastercard" />
+        <label for="a2">Mastercard</label>
+    </div>
+    <p>Now, with CSS3: </p>
+    <div class="cc-selector">
+        <input id="visa" type="radio" name="credit-card" value="visa" />
+        <label class="drinkcard-cc visa" for="visa"></label>
+        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
+        <label class="drinkcard-cc mastercard"for="mastercard"></label>
+    </div>
+</form>
+<small><a href="https://github.com/rcotrina94/icons">
+    &copy; Icons by @rcotrina94 on Github</a></small>
diff --git a/useful.js b/useful.js
@@ -0,0 +1 @@
+// Just, joking... Why use Javascript? You already have CSS3 :)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This code how to replace the traditional radio-buttons, for custom images. You can do the same with checkboxes.

		Demo: http://jsfiddle.net/La8wQ/10/
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// Just, joking... Why use Javascript? You already have CSS3 :)