Tulio Cunha tuliopc23
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
| <div class="bg-orbs"> | |
| <div class="orb"></div> | |
| <div class="orb"></div> | |
| <div class="orb"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Liquid Glass</h1> | |
| </div> |
tuliopc23
/ css-only-glass-effect-liquid-glass-lite-version-from-wwdc25.markdown
Created
July 8, 2025 20:59
CSS Only Glass effect (liquid glass 'lite version' from WWDC25)
tuliopc23
/ apple-style-glassmorphism-sidebar.markdown
Created
July 8, 2025 20:59
Apple-Style Glassmorphism Sidebar
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
| <div class="container container--mobile"> | |
| <div class="glass-container glass-container--rounded glass-container--large"> | |
| <div class="glass-filter"></div> | |
| <div class="glass-overlay"></div> | |
| <div class="glass-specular"></div> | |
| <div class="glass-content"> | |
| <div class="player"> | |
| <div class="player__thumb"> | |
| <img class="player__img" src="https://images.unsplash.com/photo-1619983081593-e2ba5b543168?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDk1NzAwNDV8&ixlib=rb-4.1.0&q=80&w=400" alt=""> | |
| <div class="player__legend"> |
Creating a text character "lightning/electricity" effect. Click the text to see.
A Pen by George Hastings on CodePen.
Terminal window animation built using pure CSS.
A Pen by Josh Cummings on CodePen.
Attempt to ”simulate” the IMSAI terminal in the cult movie »WarGames« Made on a party, and could do better with some heavy optimizations to the CSS (works better in Chrome for the moment).
A Pen by Christopher Anderton 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
| <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:200' rel='stylesheet' type='text/css'> | |
| <div class="container"> | |
| <div class="window"> | |
| <div class="handle"> | |
| <div class="buttons"> | |
| <button class="close"> | |
| </button> | |
| <button class="minimize"> | |
| </button> | |
| <button class="maximize"> |
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
| <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|VT323" rel="stylesheet"> | |
| <script>document.documentElement.className = 'js';</script> | |
| </head> | |
| <body class="demo-11"> | |
| <div id="connecting-dots" class="connecting-dots"> | |
| <canvas id="canvas"></canvas> |
OlderNewer