CSS-only. Inspired by https://dribbble.com/shots/1546247-COSMOS-Identity-GIF
- vw, vh, vmin units for responsiveness
- flexbox to center everything
- multiple box-shadows for the stars
- keyframes animation for the planets
- transform to rotate the planets
merlinfachetti
/ animated-text-with-snapsvg.markdown
Created
October 13, 2023 13:37
Animated text with Snapsvg
Work with this feels like an old good Flash : )
Text remains text and you still can select and copy it.
A Pen by Alden Merlin on CodePen.
merlinfachetti
/ index.html
Created
October 13, 2023 13:37
Vertically rotating text css [FORK] w/ browser prefixes
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
| <head> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="Iam"> | |
| <p>This is</p> | |
| <b> |
merlinfachetti
/ css-text-filling-with-water.markdown
Created
October 13, 2023 13:37
CSS Text filling with water
A text filling with water animation, for preloaders and such.
A Pen by Alden Merlin 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
| main.main | |
| header | |
| h1 Shaded | |
| strong Text | |
| p ...an experiment about animated shadows. | |
| div | |
| div | |
| .svg-text__shaded.hover(x='10%' y='20%' fill='white' text-anchor='start') :hover | |
| svg.svg-text(width='1.5em' height='0.7em' xmlns='http://www.w3.org/2000/svg') | |
| defs |
A Pen by Alden Merlin 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
| <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In --> | |
| <svg id="surface" version="1.1" | |
| xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="387.4px" height="46.2px" viewBox="0 0 387.4 46.2" enable-background="new 0 0 387.4 46.2" | |
| xml:space="preserve"> | |
| <defs> | |
| </defs> | |
| <g class="name"> | |
| <g class="letter"> | |
| <path fill="none" stroke="#384B5F" stroke-width="8.1631" stroke-miterlimit="10" d="M32.1,8c0,0-3.4-2.9-11.6-2.9 | |
| S4.1,10.4,4.1,21.6c0,14.6,11.7,18.9,17.9,18.9s9.9-2.4,9.9-2.4"/> |
A Pen by Alden Merlin on CodePen.
Pure css hipster-ish typographic dashed shadow
A Pen by Alden Merlin 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
| <x-sign> | |
| OPEN | |
| </x-sign> | |
| <x-sign> | |
| Come back soon | |
| </x-sign> | |
| <x-sign> | |
| PBR<br>in cans | |
| </x-sign> | |
| <x-sign> |
NewerOlder