Janet-Lu
Janet-Lu
/ dabblet.css
Created
August 24, 2016 09:41
— forked from csssecrets/dabblet.css
Animation along a circular path - Solution 2
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
| /** | |
| * Animation along a circular path - Solution 2 | |
| */ | |
| @keyframes spin { | |
| /*from { | |
| transform: translate(50%, 50px) | |
| rotate(0turn) | |
| translate(-50%, -50px) | |
| translate(50%,50%) |
Janet-Lu
/ dabblet.css
Last active
August 24, 2016 06:19
— forked from csssecrets/dabblet.css
Smooth state animations
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
| /** | |
| * Smooth state animations | |
| * Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709 | |
| */ | |
| @keyframes panoramic { | |
| to { background-position: 100% 0; } | |
| } | |
| .panoramic { |
Janet-Lu
/ dabblet.css
Created
August 24, 2016 06:08
— forked from csssecrets/dabblet.css
Typing animation
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
| /** | |
| * Typing animation | |
| */ | |
| @keyframes typing { | |
| from { width: 0 } | |
| } | |
| @keyframes caret { | |
| 50% { border-right-color: transparent; } |
Janet-Lu
/ dabblet.css
Last active
August 24, 2016 06:07
— forked from csssecrets/dabblet.css
Blinking
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
| /** | |
| * Blinking | |
| */ | |
| p { | |
| padding: 1em; | |
| background: gold; | |
| } | |
| @keyframes blink-smooth { to { color: transparent } } |
Janet-Lu
/ dabblet.css
Created
August 24, 2016 03:53
— forked from csssecrets/dabblet.css
Frame-by-frame animations
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
| /** | |
| * Frame-by-frame animations | |
| */ | |
| @keyframes loader { | |
| to { background-position: 800px 0; } | |
| } | |
| .loader { | |
| width: 100px; height: 100px; |
Janet-Lu
/ dabblet.css
Last active
August 24, 2016 03:08
— forked from csssecrets/dabblet.css
Bouncing animation
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
| /** | |
| * Bouncing animation | |
| */ | |
| @keyframes bounce { | |
| 60%, 80%, 90%, 95%, to { | |
| transform: translateY(400px); | |
| animation-timing-function: ease; | |
| } | |
| 70% { transform: translateY(300px); } |
Janet-Lu
/ dabblet.css
Created
August 23, 2016 10:15
— forked from csssecrets/dabblet.css
Sticky footer with fixed height
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
| /** | |
| * Sticky footer with fixed height | |
| */ | |
| main { | |
| min-height: calc(100vh - 5em - 7em); | |
| } | |
| /* Toggle checkbox to alternate between short/long content */ | |
| #contents:checked ~ p { display: none } |
Janet-Lu
/ dabblet.css
Created
August 23, 2016 10:14
— forked from csssecrets/dabblet.css
Sticky footer with flexible height
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
| /** | |
| * Sticky footer with flexible height | |
| */ | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } |
Janet-Lu
/ dabblet.css
Last active
August 23, 2016 10:11
— forked from csssecrets/dabblet.css
Vertical centering - absolute positioning method
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
| /** | |
| * Vertical centering - absolute positioning method | |
| */ | |
| main { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
Janet-Lu
/ dabblet.css
Created
August 23, 2016 10:03
— forked from csssecrets/dabblet.css
Fluid background, fixed content
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
| /** | |
| * Fluid background, fixed content | |
| */ | |
| header, section, footer { | |
| padding: 1em calc(50% - 500px); /*!!! here*/ | |
| } | |
| footer { | |
| background: #333; |
NewerOlder