andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
snippets/dynamic-shadow.md
View File

@ -33,31 +33,6 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__dynamic-shadow"></div>
</div>
<style>
.snippet-demo__dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.snippet-demo__dynamic-shadow::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
</style>
#### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.