Inspiration: https://low-sugar-eye-candy.tumblr.com/post/169354251468/line-girl (I do not know the original source)
conofor
Inspiration: https://low-sugar-eye-candy.tumblr.com/post/169354251468/line-girl (I do not know the original source)
A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with vuejs and also fully responsive.
See on Github: https://github.com/muhammederdem/credit-card-form
A Pen by Muhammed Erdem on CodePen.
A Pen by Kyle Shook on CodePen.
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
| <canvas class="canvas"></canvas> | |
| <div class="twitter"><a target="_blank" href="https://twitter.com/hendrysadrak">@Twitter</a></div> | |
| <div class="src"><a target="_blank" href="https://bitbucket.org/Carmination/blue-text">@BitBucket</a></div> |
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
| .musicControls | |
| input#audiofile(type='file') | |
| //- button.listenButton ...or listen to one of mine // Silly CORS | |
| button.playPauseButton ▶ | |
| label#loading(for="audiofile") Select an audio file... | |
| // This should match the values in the js | |
| - var maxSideNum = 24 | |
| - var maxRectangleNum = 24 |
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="window"> | |
| <h1>Mac launchpad in CSS</h1> | |
| <p>A simple demonstration of the Mac launchpad effect in CSS. JavaScript is used to control when the effect is triggered or removed.</p> | |
| <p> | |
| Made by <a href="http://migueljimenez.co" target="_blank">Miguel Jiménez</a> | | |
| <a target="_blank" href="https://twitter.com/jachinte">@jachinte</a> | |
| </p> | |
| <p>You may also like <a href="https://codepen.io/jachinte/pen/bVNraO" target="_blank">Mission Control in CSS</a></p> | |
| <a title="Click to open" class="open-menu launchpad-icon"></a> | |
| </div> |
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
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css"> | |
| <svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <g id="close-icon"> | |
| <path d="M0.014,1.778L1.79,0.001l30.196,30.221l-1.778,1.777L0.014,1.778z"/> | |
| <path d="M1.79,31.999l-1.776-1.777L30.208,0.001l1.778,1.777L1.79,31.999z"/> | |
| </g> | |
| </svg> | |
| <div class="look">Look Ma! I broke that HTML!</div><a href="https://twitter.com/legomushroom" class="by"></a> | |
| <div id="js-show-modal" class="launch-button">show modal |
Source gif by Ramotion - https://dribbble.com/shots/2121350-Delivery-Card
Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it's not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcoding pixels for this model). Don't forget to click request button inside card.
(Cool)story behind the demo:
when I saw this gif I just wanted to recreate flipping animation. I thought that it will be easy-peasy, because I worked with preserve-3d stuff in CSS before. But, when I started doing nested elements below 2nd level, everything turned to a crazy bugfest. Border-radius crazy bugs in various Chrome versions, z-index and translateZ(0) retarded things in FF and other absolutely random stuff. So when I finished flipping part, I thought that I should continue and do the rest. Oh boy... This decision gave another week of suffering and LOTS of shitty code. I will try to refactor
NewerOlder