Material design styled counter
A Pen by Lucas Bebber on CodePen.
Michael S Rose MichaelSRose
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| font-family: Arial, sans-serif; | |
| font-size: 15px; | |
| background: white; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body { | |
| font-family: Arial, sans-serif; | |
| font-size: 15px; | |
| background: white; |
CSS version of this gif from Bees & Bombs :
Works in IE !!! (wow !)
A little morphing animation to represent different devices.
A Pen by Chris Gannon on CodePen.
MichaelSRose
/ CSS background change on scroll.markdown
Created
September 28, 2015 07:48
CSS background change on scroll
Fixed element appears to change color when entering different sections. Uses duplicated elements for every section.
Now with blend-mode magic for added effect.
Inspired by Marco Fugaro's Pen Changing color when hover another section.
In trying to decipher how Nikolay Talanov's Pen Crazy lines was working, I almost stumbled on this. Refined it a bit and I think it's mesmerizing!
A Pen by Nora Brown on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // THREE.JS variables | |
| var globalW = 600, | |
| globalH = 600, | |
| fov = 45, | |
| far = 1000, | |
| container = document.body, | |
| renderer = new THREE.WebGLRenderer(), | |
| scene = new THREE.Scene(), | |
| cam = new THREE.PerspectiveCamera(fov,globalW/globalH,1,far), | |
| mainLight = new THREE.PointLight(0xd29553), |
MichaelSRose
/ Overview of the available positioning types.markdown
Created
October 27, 2015 05:43
Overview of the available positioning types
MichaelSRose
/ Little-known thing #1 - Positioning elements with absolute positioning type.markdown
Created
October 27, 2015 05:47
Little-known thing #1 - Positioning elements with absolute positioning type
OlderNewer