CodePen multi-button challenge
CodeMyUI CodeMyUI
CodeMyUI
/ editable-neumorphic-text.markdown
Created
February 16, 2020 22:58
Editable Neumorphic Text
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
| <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> | |
| <g id="whole"> | |
| <g id="togglePanel"> | |
| <path d="M331.5,328.5a45.5,45.5,0,0,1,0-91h115a45.5,45.5,0,0,1,0,91Z" fill="#f2f2f2"/> | |
| <path d="M446.5,241a42,42,0,0,1,0,84h-115a42,42,0,0,1,0-84h115m0-7h-115a49.14,49.14,0,0,0-49,49h0a49.14,49.14,0,0,0,49,49h115a49.14,49.14,0,0,0,49-49h0a49.14,49.14,0,0,0-49-49Z" fill="#f4f9f6"/> | |
| </g> | |
| <line id="fillLine2" x1="331" y1="283" x2="446" y2="283" fill="none" stroke="#ED4D6E" stroke-linecap="round" stroke-linejoin="round" stroke-width="84"/> | |
| <line id="fillLine1" x1="331" y1="283" x2="446" y2="283" fill="none" stroke="#A0CA4C" stroke-linecap="round" stroke-linejoin="round" stroke-width="84"/> | |
| <g id="dragger"> | |
| <ellipse cx="330" cy="283" rx="40.5" ry="41" fill="#fcfcfc"/> |
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"> | |
| <div class="box box-1"> | |
| <div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-893bc9989a52eba0.png" alt=""></div> | |
| <button><div></div></button> | |
| </div> | |
| <div class="box box-2"> | |
| <div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-964edcf0f07211b0.png" alt=""></div> | |
| <button><div></div></button> | |
| </div> | |
| <div class="box box-3"> |
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
| <h1>Responsive eCommerce layout using CSS Grid</h1> | |
| <h3><a href="https://codepen.io/collection/DapBxW" target="_blank">More CSS Grid layouts</a></h3> | |
| <ul id="productGrid"> | |
| <li class="product"> | |
| <div class="details"> | |
| <h2>NMD_R1</h2> | |
| <p class="price">£109.95</p> | |
| </div> | |
| <div class="logo"> | |
| <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' /> |
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
| <h1>VHS Filter</h1> | |
| <div class="wrapper"> | |
| <img src="https://source.unsplash.com/200x200/?i" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/200x200/?got" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/200x200/?love" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/200x200/?for" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/420x200/?those" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/200x200/?who" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/200x200/?were" class="js-vhs-filter" /> | |
| <img src="https://source.unsplash.com/200x200/?born" class="js-vhs-filter" /> |
Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element
A Pen by Ryan Mulligan 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
| - var text = "Loading..."; | |
| - var rings = 2; | |
| - var ringSectors = 30; | |
| .preloader | |
| - for (let r = 0; r < rings; ++r) { | |
| .preloader__ring | |
| - for (let s = 0; s < ringSectors; ++s) { | |
| .preloader__sector=text[s] || "" | |
| - } |
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
| <button class="button" type="button"> | |
| <span class="print print--under"> | |
| <svg viewBox="0 0 98 109" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="m95.42 60.221c0.33333-4.6667 0.33333-10.667 0-18-0.5-11-8.5-26.5-24-34.5-15.5-8-38-9.5-55.5 8-11.667 11.667-16 25.5-13 41.5l0.65525 4.3683c0.38693 2.5791 2.7914 4.3563 5.3705 3.9695 2.5664-0.38496 4.3413-2.7687 3.9742-5.3378-1-7-6-22 10-38 14.554-14.554 38.15-14.554 52.704 0 4.5444 4.5444 7.8364 10.187 9.5562 16.379 0.5744 2.0681 0.98766 3.9417 1.2398 5.6209 2.4899 16.582-2.9979 37.051-6 53" pathLength="1"/> | |
| <path d="m15.42 76.221c5.3333-3.6667 7.3333-10.167 6-19.5-0.23862-1.551-0.44877-3.0902-0.63044-4.6174-1.8313-15.395 9.1641-29.359 24.559-31.191 1.268-0.15084 2.5448-0.21497 3.8216-0.19197 15.616 0.28138 28.07 13.129 27.864 28.747-0.089675 6.8105-0.29443 11.895-0.61426 15.253-1.2042 12.644-2.9364 21.532-7 37" pathLength="1"/> | |
| <path d="m19.92 85.221c7-5.3333 10.5-13.333 10.5-24v-12.5c0-10.217 8.2827-18.5 18.5-18.5 10.287 0 18.636 8.3235 18.666 18.611 0.01 |