Max West maxw3st
maxw3st
/ dabblet.css
Created
July 12, 2013 16:59
— forked from LeaVerou/dabblet.css
Attempt for Chrome-style progress-indicator with SVG and CSS animations
This file contains 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
| /** | |
| * Attempt for Chrome-style progress-indicator with SVG and CSS animations | |
| */ | |
| @keyframes spin { | |
| to { | |
| stroke-dashoffset: -148; | |
| } | |
| } |
maxw3st
/ slider.html
Last active
December 19, 2015 02:19
A CodePen by maxw3st. Sliced Image Slider - A modified version of the tutorial slider set (of 4) by Mary Lou @ Codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/
This file contains 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
| <!-- Kudos to Mary Lou on codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ for coming up with this. | |
| In order to retask her slider the banner text and button positioning were removed or altered to produce a different look and feel. | |
| You are encouraged to visit her tutorial and demo on Codrops for a view of the original 4 versions of this slider. ---> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
| <title>Sliced Image Slider Template</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" /> |
maxw3st
/ index.html
Created
June 28, 2013 04:53
A CodePen by maxw3st. Sliced Image Slider - A modified version of the tutorial slider set (of 4) by Mary Lou @ Codrops: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/
This file contains 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
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Sliced Image Slider Template</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="CSS3 Sliding Image Panels for COT Index Charts" /> | |
| <meta name="keywords" content="sliding, background-image, css3, panel, images, slider, fx majors, cot index charts" /> | |
| <meta name="author" content="maxw3st via Codrops & Mary Lou" /> | |
| <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Merriweather+Sans"> |
maxw3st
/ dabblet.css
Created
May 24, 2013 15:19
— forked from LeaVerou/dabblet.css
“Body Border, Rounded Inside” without images or extra elements
This file contains 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
| /** | |
| * “Body Border, Rounded Inside” without images or extra elements | |
| Modified from Lea Verou: http://dabblet.com/gist/5377617 for soft inner edge. | |
| */ | |
| div { | |
| width: 10em; | |
| height: 5em; | |
| padding: 1em; | |
| border-radius: 1em; |
maxw3st
/ dabblet.css
Created
May 24, 2013 15:11
— forked from LeaVerou/dabblet.css
“Body Border, Rounded Inside” without images or extra elements by Lea Verou
This file contains 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
| /** | |
| * “Body Border, Rounded Inside” without images or extra elements by Lea Verou | |
| */ | |
| div { | |
| width: 10em; | |
| height: 5em; | |
| padding: 1em; | |
| border-radius: 10px; | |
| margin: 100px; |
maxw3st
/ index.html
Created
March 23, 2013 17:00
A CodePen by Chris Coyier. Animated back-to-top button - I used this form constructed with CSS3 as a separator between different sections of a one-pager and discovered that I could use a litte hover-effect to make it a back-to-top button.
This file contains 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
| <a href="#top" class="diamond-wrap"><span class="diamond">back to top</span></a> |
maxw3st
/ anti-keygrabber.user.js
Last active
December 15, 2015 06:08
— forked from rodneyrehm/anti-keygrabber.user.js
This file contains 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
| // ==UserScript== | |
| // @name anti key-grabber | |
| // @version 1 | |
| // ==/UserScript== | |
| // original script by @codepo8 Christian Heilman | |
| document.addEventListener('keydown', function(e) { | |
| // only if Command key is pressed | |
| if (!e.metaKey) { | |
| return; |
maxw3st
/ index.html
Created
March 18, 2013 16:56
A CodePen by maxw3st. Share Bar reveal - Hover over the "Share" text or "cover" area to reveal svg social media icons. This can be resized for any sized icons. All code, no http requests until the user clicks an icon to trigger a share link. Easily resized using just height and width declarations in three CSS rules (see comments in CSS).
This file contains 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
| <head> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> | |
| <meta name="description" content="SVG fully scalable social icon set with animated hover effects" /> | |
| <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> | |
| <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> | |
| <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> | |
| <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> | |
| <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> | |
| <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> | |
| <!--[if IE]> |
maxw3st
/ index.html
Created
December 17, 2012 00:20
A CodePen by Rachel Nabors. Clipping Masquerade - Playing about with CSS clipping masks. Webkit browsers only for now, I'm afraid!
This file contains 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
| <div class="lady"> | |
| </div> | |
| <!-- | |
| You can do it, too: http://css-tricks.com/webkit-image-wipes/ | |
| Theme song: "Hold the Night" by Lyre Le Temps | |
| Still need a name for her. Suggestions welcome! | |
| --> |
This file contains 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
| /* Pounding heart animation */ | |
| @keyframes pound { | |
| to { transform: scale(1.4); } | |
| } | |
| .heart { | |
| display: inline-block; | |
| font-size: 150px; | |
| color: #e00; |