##Sketching with css
This challenge is simple: Push the limits of CSS and make something beautiful and hacky1.
###Competition. If you would like to submit an entry, comment on this Gist or Ping me on StackOverflow and I will add your creating to the collection on codepen.
An average father gives his average son a ping pong table for his 12th birthday, and to his surprise the son loves ping pong. Plays it every day and night, and when no friends or family wants to play a round with him the kid sets up the table against a wall and pracices with himself.
After a few years the father notices that his son is playing ping pong less and less, He asks him about this and the son replies, "Can't. No more ping pong balls". The father looks and just like his son had told him there were no longer any balls left on the table. "OK", he thought, he lost them. No big deal.
| #Stack Overflow Pro-Forma comments | |
| ###[A]Answers just to say Thanks! | |
| Please don't add "thanks" as answers. Invest some time in the site and you will gain sufficient privileges to upvote answers you like, which is the community way of saying thank you. | |
| ###[Q]Nothing but a URL (and isn't spam) | |
| Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. | |
| ###[A]OP adding a new question as an answer | |
| If you have another question, please ask it by clicking the [Ask Question](http://stackoverflow.com/questions/ask) button. |
| /* Rotates the page 180deg when the user hovers over the body. | |
| Only works for webkit browsers */ | |
| (function() { | |
| var s = document.createElement('style'); | |
| s.textContent = '.trololol:hover{-webkit-transform: rotate(180deg);'; | |
| document.head.appendChild(s); | |
| document.body.classList.add('trololol'); | |
| }()); |
| window.onload = function() { | |
| var cvs = document.getElementById("cvs"); | |
| var ctx = cvs.getContext("2d"); | |
| var h, w, speed = 10; | |
| this.onresize = function() { | |
| h = window.innerHeight, w = window.innerWidth; | |
| cvs.setAttribute("height", h); | |
| cvs.setAttribute("width", w); | |
| }; | |
| this.onresize.call(); |
| // ==UserScript== | |
| // @name rlInput box | |
| // @author Robert Lemon | |
| // @version 0.1 | |
| // @namespace http://rlemon.com | |
| // @description Produces a small input area for you to execute Javascript on the page. Saves scripts in LocalStorage and executes on page load. | |
| // @include * | |
| // ==/UserScript== | |
| (function () { | |
| function init() { |
| <?php | |
| /* Gets individual core information */ | |
| function GetCoreInformation() { | |
| $data = file('/proc/stat'); | |
| $cores = array(); | |
| foreach( $data as $line ) { | |
| if( preg_match('/^cpu[0-9]/', $line) ) | |
| { | |
| $info = explode(' ', $line ); | |
| $cores[] = array( |
| <button class="cybr-btn"> | |
| Cyber<span aria-hidden>_</span> | |
| <span aria-hidden class="cybr-btn__glitch">Cyber_</span> | |
| <span aria-hidden class="cybr-btn__tag">R25</span> | |
| </button> | |
| <button class="cybr-btn"> | |
| Buttons<span aria-hidden>_</span> | |
| <span aria-hidden class="cybr-btn__glitch">Buttons_</span> | |
| <span aria-hidden class="cybr-btn__tag">R25</span> | |
| </button> |
| function store_data(data, key) { | |
| if (!window.localStorage || !window.JSON || !key) { | |
| return; | |
| } | |
| localStorage.setItem(key, JSON.stringify(data)); | |
| } | |
| function get_data(key) { | |
| if (!window.localStorage || !window.JSON || !key) { | |
| return; |