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

Travis build: 407

Browse Source
This commit is contained in:
30secondsofcode
2019-08-26 10:03:49 +00:00
parent 2776b342dd
commit 983bc086c1
57 changed files with 376 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
README.md
View File

@ -173,9 +173,6 @@ Note: `1rem` is usually `16px`.
- https://caniuse.com/#feat=css-animation
<br>[⬆ Back to top](#contents)
### Button border animation
@ -281,9 +278,6 @@ Creates a donut spinner that can be used to indicate the loading of content.
- https://caniuse.com/#feat=css-animation
- https://caniuse.com/#feat=transforms2d
<br>[⬆ Back to top](#contents)
### Easing variables
@ -341,7 +335,7 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
#### Explanation
- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document.
- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document.
- In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
@ -351,9 +345,6 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
- https://caniuse.com/#feat=css-variables
<br>[⬆ Back to top](#contents)
### Height transition
@ -393,7 +384,9 @@ el.style.setProperty('--max-height', height + 'px')
2. `overflow: hidden` prevents the contents of the hidden element from overflowing its container.
3. `max-height: 0` specifies that the element has no height initially.
4. `.target:hover > .el` specifies that when the parent is hovered over, target a child `.el` within it and use the `--max-height` variable which was defined by JavaScript.
---
1. `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element.
2. `el.style.setProperty(...)` sets the `--max-height` CSS variable which is used to specify the `max-height` of the element the target is hovered over, allowing it to transition smoothly from 0 to auto.
@ -411,9 +404,6 @@ el.style.setProperty('--max-height', height + 'px')
- https://caniuse.com/#feat=css-variables
- https://caniuse.com/#feat=css-transitions
<br>[⬆ Back to top](#contents)
### Hover shadow box animation
@ -462,9 +452,6 @@ Creates a shadow box around the text when it is hovered.
- https://caniuse.com/#feat=transforms3d
- https://caniuse.com/#feat=css-transitions
<br>[⬆ Back to top](#contents)
### Hover underline animation
@ -524,9 +511,6 @@ Creates an animated underline effect when the text is hovered over.
- https://caniuse.com/#feat=transforms2d
- https://caniuse.com/#feat=css-transitions
<br>[⬆ Back to top](#contents)
---
@ -566,9 +550,6 @@ Makes the content unselectable.
- https://caniuse.com/#feat=user-select-none
<br>[⬆ Back to top](#contents)
### Popout menu
@ -618,9 +599,6 @@ Reveals an interactive popout menu on hover and focus.
100.0%
<br>[⬆ Back to top](#contents)
### Sibling fade
@ -660,9 +638,6 @@ span {
- https://caniuse.com/#feat=css-sel3
- https://caniuse.com/#feat=css-transitions
<br>[⬆ Back to top](#contents)
---
@ -716,9 +691,6 @@ html {
- https://caniuse.com/#feat=css3-boxsizing
<br>[⬆ Back to top](#contents)
### Clearfix
@ -762,9 +734,6 @@ Ensures that an element self-clears its children.
<span class="snippet__support-note">⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).</span>
<br>[⬆ Back to top](#contents)
### Constant width to height ratio
@ -805,9 +774,6 @@ Given an element of variable width, it will ensure its height remains proportion
100.0%
<br>[⬆ Back to top](#contents)
### Display table centering
@ -859,9 +825,6 @@ Vertically and horizontally centers a child element within its parent element us
- https://caniuse.com/#search=display%3A%20table
<br>[⬆ Back to top](#contents)
### Evenly distributed children
@ -901,9 +864,6 @@ Evenly distributes child elements within a parent element.
- https://caniuse.com/#feat=flexbox
<br>[⬆ Back to top](#contents)
### Fit image in container
@ -985,9 +945,6 @@ Horizontally and vertically centers a child element within a parent element usin
- https://caniuse.com/#feat=flexbox
<br>[⬆ Back to top](#contents)
### Ghost trick
@ -1032,9 +989,6 @@ p {
- https://caniuse.com/#feat=inline-block
<br>[⬆ Back to top](#contents)
### Grid centering
@ -1069,9 +1023,6 @@ Horizontally and vertically centers a child element within a parent element usin
- https://caniuse.com/#feat=css-grid
<br>[⬆ Back to top](#contents)
### Last item with remaining available height
@ -1171,9 +1122,6 @@ A bulletproof way to completely hide an element visually and positionally in the
- https://caniuse.com/#search=clip
<br>[⬆ Back to top](#contents)
### Transform centering
@ -1220,9 +1168,6 @@ Vertically and horizontally centers a child element within its parent element us
- https://caniuse.com/#feat=transforms2d
<br>[⬆ Back to top](#contents)
### Truncate text multiline
@ -1276,9 +1221,6 @@ If the text is longer than one line, it will be truncated for `n` lines and end
- https://caniuse.com/#feat=css-gradients
<br>[⬆ Back to top](#contents)
### Truncate text
@ -1316,9 +1258,6 @@ If the text is longer than one line, it will be truncated and end with an ellips
- https://caniuse.com/#feat=text-overflow
<br>[⬆ Back to top](#contents)
---
@ -1358,9 +1297,6 @@ The function calc() allows to define CSS values with the use of mathematical exp
- https://caniuse.com/#feat=calc
<br>[⬆ Back to top](#contents)
### Custom variables
@ -1403,9 +1339,6 @@ CSS variables that contain specific values to be reused throughout a document.
- https://caniuse.com/#feat=css-variables
<br>[⬆ Back to top](#contents)
---
@ -1444,9 +1377,6 @@ Creates a circle shape with pure CSS.
- https://caniuse.com/#feat=border-radius
<br>[⬆ Back to top](#contents)
### Counter
@ -1498,9 +1428,6 @@ li::before {
- https://caniuse.com/#feat=css-counters
<br>[⬆ Back to top](#contents)
### Custom scrollbar
@ -1560,9 +1487,6 @@ There are many other pseudo-elements that you can use to style scrollbars. For m
- https://caniuse.com/#feat=css-scrollbar
<br>[⬆ Back to top](#contents)
### Custom text selection
@ -1600,9 +1524,6 @@ in any specification.</span>
- https://caniuse.com/#feat=css-selection
<br>[⬆ Back to top](#contents)
### Dynamic shadow
@ -1658,9 +1579,6 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
- https://caniuse.com/#feat=css-filters
<br>[⬆ Back to top](#contents)
### Etched text
@ -1695,9 +1613,6 @@ Creates an effect where text appears to be "etched" or engraved into the backgro
- https://caniuse.com/#feat=css-textshadow
<br>[⬆ Back to top](#contents)
### Focus Within
@ -1744,9 +1659,6 @@ If no link is provided, it defaults to 99+%. -->
- https://caniuse.com/#feat=css-focus-within
<br>[⬆ Back to top](#contents)
### Fullscreen
@ -1808,9 +1720,6 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
- https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
- https://caniuse.com/#feat=fullscreen
<br>[⬆ Back to top](#contents)
### Gradient text
@ -1846,9 +1755,6 @@ Gives text a gradient color.
- https://caniuse.com/#feat=text-stroke
<br>[⬆ Back to top](#contents)
### Hairline border
@ -1905,9 +1811,6 @@ very sharp and crisp.
\*Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both.
<br>[⬆ Back to top](#contents)
### Mouse cursor gradient tracking
@ -1982,9 +1885,6 @@ btn.onmousemove = function(e) {
- https://caniuse.com/#feat=css-variables
<br>[⬆ Back to top](#contents)
### :not selector
@ -2033,9 +1933,6 @@ li:not(:last-child) {
- https://caniuse.com/#feat=css-sel3
<br>[⬆ Back to top](#contents)
### Overflow scroll gradient
@ -2103,9 +2000,6 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
- https://caniuse.com/#feat=css-gradients
<br>[⬆ Back to top](#contents)
### Pretty text underline
@ -2153,9 +2047,6 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
- https://caniuse.com/#feat=css-textshadow
- https://caniuse.com/#feat=css-gradients
<br>[⬆ Back to top](#contents)
### Reset all styles
@ -2194,9 +2085,6 @@ Resets all styles to default values with one property. This will not affect `dir
- https://caniuse.com/#feat=css-all
<br>[⬆ Back to top](#contents)
### Shape separator
@ -2242,9 +2130,6 @@ Uses an SVG shape to separate two different blocks to create more a interesting
- https://caniuse.com/#feat=svg
<br>[⬆ Back to top](#contents)
### System font stack
@ -2284,9 +2169,6 @@ Uses the native font of the operating system to get close to a native app feel.
100.0%
<br>[⬆ Back to top](#contents)
### Toggle switch
@ -2390,9 +2272,6 @@ Creates a triangle shape with pure CSS.
100.0%
<br>[⬆ Back to top](#contents)
### Zebra striped list