Update snippet structure
This commit is contained in:
Angelos Chalaris
@ -1,4 +1,7 @@
|
||||
### Bouncing loader
|
||||
---
|
||||
title: Bouncing loader
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Creates a bouncing loader animation.
|
||||
|
||||
@ -67,4 +70,5 @@ Note: `1rem` is usually `16px`.
|
||||
|
||||
- https://caniuse.com/#feat=css-animation
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Box-sizing reset
|
||||
---
|
||||
title: Box-sizing reset
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.
|
||||
|
||||
@ -45,4 +48,5 @@ html {
|
||||
|
||||
- https://caniuse.com/#feat=css3-boxsizing
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Button border animation
|
||||
---
|
||||
title: Button border animation
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Creates a border animation on hover.
|
||||
|
||||
@ -56,5 +59,6 @@ Use the `:before` and `:after` pseduo-elements as borders that animate on hover.
|
||||
|
||||
#### Browser support
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
<!-- date: 2018-10-30 -->
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Calc()
|
||||
---
|
||||
title: Calc()
|
||||
tags: other,intermediate
|
||||
---
|
||||
|
||||
The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.
|
||||
|
||||
@ -50,4 +53,5 @@ So now it's possible using calc():
|
||||
|
||||
- https://caniuse.com/#feat=calc
|
||||
|
||||
<!-- tags: other -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Circle
|
||||
---
|
||||
title: Circle
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Creates a circle shape with pure CSS.
|
||||
|
||||
@ -32,4 +35,5 @@ values will create an ellipse.
|
||||
|
||||
- https://caniuse.com/#feat=border-radius
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Clearfix
|
||||
---
|
||||
title: Clearfix
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Ensures that an element self-clears its children.
|
||||
|
||||
@ -41,4 +44,5 @@ 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>
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Constant width to height ratio
|
||||
---
|
||||
title: Constant width to height ratio
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion
|
||||
(i.e., its width to height ratio remains constant).
|
||||
@ -40,4 +43,5 @@ This method also allows content to be placed inside the element normally.
|
||||
|
||||
#### Browser support
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Counter
|
||||
---
|
||||
title: Counter
|
||||
tags: visual, other,intermediate
|
||||
---
|
||||
|
||||
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
|
||||
|
||||
@ -52,4 +55,5 @@ You can create a ordered list using any type of HTML.
|
||||
|
||||
- https://caniuse.com/#feat=css-counters
|
||||
|
||||
<!-- tags: visual, other -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Custom scrollbar
|
||||
---
|
||||
title: Custom scrollbar
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
|
||||
|
||||
@ -56,4 +59,5 @@ There are many other pseudo-elements that you can use to style scrollbars. For m
|
||||
|
||||
- https://caniuse.com/#feat=css-scrollbar
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Custom text selection
|
||||
---
|
||||
title: Custom text selection
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Changes the styling of text selection.
|
||||
|
||||
@ -34,4 +37,5 @@ in any specification.</span>
|
||||
|
||||
- https://caniuse.com/#feat=css-selection
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Custom variables
|
||||
---
|
||||
title: Custom variables
|
||||
tags: other,intermediate
|
||||
---
|
||||
|
||||
CSS variables that contain specific values to be reused throughout a document.
|
||||
|
||||
@ -41,4 +44,5 @@ Reuse variables throughout the document using the `var(--variable-name)` functio
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
<!-- tags: other -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Disable selection
|
||||
---
|
||||
title: Disable selection
|
||||
tags: interactivity,intermediate
|
||||
---
|
||||
|
||||
Makes the content unselectable.
|
||||
|
||||
@ -31,4 +34,5 @@ Makes the content unselectable.
|
||||
|
||||
- https://caniuse.com/#feat=user-select-none
|
||||
|
||||
<!-- tags: interactivity -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Display table centering
|
||||
---
|
||||
title: Display table centering
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).
|
||||
|
||||
@ -48,4 +51,5 @@ The outer parent ('.container' in this case) must have a fixed height and width.
|
||||
|
||||
- https://caniuse.com/#search=display%3A%20table
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Donut spinner
|
||||
---
|
||||
title: Donut spinner
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Creates a donut spinner that can be used to indicate the loading of content.
|
||||
|
||||
@ -44,4 +47,5 @@ serve as the loading indicator for the donut. Use `animation` to rotate the elem
|
||||
- https://caniuse.com/#feat=css-animation
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Dynamic shadow
|
||||
---
|
||||
title: Dynamic shadow
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
|
||||
|
||||
@ -52,4 +55,5 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
|
||||
|
||||
- https://caniuse.com/#feat=css-filters
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Easing variables
|
||||
---
|
||||
title: Easing variables
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Variables that can be reused for `transition-timing-function` properties, more
|
||||
powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
|
||||
@ -63,4 +66,5 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Etched text
|
||||
---
|
||||
title: Etched text
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Creates an effect where text appears to be "etched" or engraved into the background.
|
||||
|
||||
@ -35,4 +38,5 @@ of the background.
|
||||
|
||||
- https://caniuse.com/#feat=css-textshadow
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Evenly distributed children
|
||||
---
|
||||
title: Evenly distributed children
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Evenly distributes child elements within a parent element.
|
||||
|
||||
@ -36,4 +39,5 @@ Alternatively, use `justify-content: space-around` to distribute the children wi
|
||||
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Fit image in container
|
||||
---
|
||||
title: Fit image in container
|
||||
tags: layout, visual,intermediate
|
||||
---
|
||||
|
||||
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property.
|
||||
|
||||
@ -42,5 +45,6 @@ Changes the fit and position of an image within its container while preserving i
|
||||
|
||||
- https://caniuse.com/#feat=object-fit
|
||||
|
||||
<!-- tags: layout, visual -->
|
||||
|
||||
|
||||
<!-- date: 2018-10-31 -->
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Flexbox centering
|
||||
---
|
||||
title: Flexbox centering
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Horizontally and vertically centers a child element within a parent element using `flexbox`.
|
||||
|
||||
@ -33,4 +36,5 @@ Horizontally and vertically centers a child element within a parent element usin
|
||||
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Focus Within
|
||||
---
|
||||
title: Focus Within
|
||||
tags: visual, interactivity,intermediate
|
||||
---
|
||||
|
||||
Changes the appearance of a form if any of its children are focused.
|
||||
|
||||
@ -45,4 +48,5 @@ If no link is provided, it defaults to 99+%. -->
|
||||
|
||||
- https://caniuse.com/#feat=css-focus-within
|
||||
|
||||
<!-- tags: visual, interactivity -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Fullscreen
|
||||
---
|
||||
title: Fullscreen
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
|
||||
|
||||
@ -58,4 +61,5 @@ 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
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Ghost trick
|
||||
---
|
||||
title: Ghost trick
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Vertically centers an element in another.
|
||||
|
||||
@ -41,4 +44,5 @@ Use the style of a `:before` pseudo-element to vertically align inline elements
|
||||
|
||||
- https://caniuse.com/#feat=inline-block
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Gradient text
|
||||
---
|
||||
title: Gradient text
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Gives text a gradient color.
|
||||
|
||||
@ -33,4 +36,5 @@ Gives text a gradient color.
|
||||
|
||||
- https://caniuse.com/#feat=text-stroke
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Grid centering
|
||||
---
|
||||
title: Grid centering
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Horizontally and vertically centers a child element within a parent element using `grid`.
|
||||
|
||||
@ -31,4 +34,5 @@ Horizontally and vertically centers a child element within a parent element usin
|
||||
|
||||
- https://caniuse.com/#feat=css-grid
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Hairline border
|
||||
---
|
||||
title: Hairline border
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Gives an element a border equal to 1 native device pixel in width, which can look
|
||||
very sharp and crisp.
|
||||
@ -54,4 +57,5 @@ 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.
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Height transition
|
||||
---
|
||||
title: Height transition
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Transitions an element's height from `0` to `auto` when its height is unknown.
|
||||
|
||||
@ -62,4 +65,5 @@ el.style.setProperty('--max-height', height + 'px')
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Hover shadow box animation
|
||||
---
|
||||
title: Hover shadow box animation
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Creates a shadow box around the text when it is hovered.
|
||||
|
||||
@ -45,4 +48,5 @@ Creates a shadow box around the text when it is hovered.
|
||||
- https://caniuse.com/#feat=transforms3d
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Hover underline animation
|
||||
---
|
||||
title: Hover underline animation
|
||||
tags: animation,intermediate
|
||||
---
|
||||
|
||||
Creates an animated underline effect when the text is hovered over.
|
||||
|
||||
@ -60,4 +63,5 @@ Creates an animated underline effect when the text is hovered over.
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: animation -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Last item with remaining available height
|
||||
---
|
||||
title: Last item with remaining available height
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.
|
||||
|
||||
@ -50,5 +53,6 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f
|
||||
|
||||
- https://caniuse.com/#feat=flexbox
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
<!-- date: 2018-09-30 -->
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Mouse cursor gradient tracking
|
||||
---
|
||||
title: Mouse cursor gradient tracking
|
||||
tags: visual, interactivity,intermediate
|
||||
---
|
||||
|
||||
A hover effect where the gradient follows the mouse cursor.
|
||||
|
||||
@ -72,4 +75,5 @@ _TODO_
|
||||
|
||||
- https://caniuse.com/#feat=css-variables
|
||||
|
||||
<!-- tags: visual, interactivity -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### :not selector
|
||||
---
|
||||
title: :not selector
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
The `:not` psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.
|
||||
|
||||
@ -46,4 +49,5 @@ the `:last-child`.
|
||||
|
||||
- https://caniuse.com/#feat=css-sel3
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Offscreen
|
||||
---
|
||||
title: Offscreen
|
||||
tags: layout, visual,intermediate
|
||||
---
|
||||
|
||||
A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility ([ADA](https://adata.org/learn-about-ada)) development when more context is needed for visually-impaired users. As an alternative to `display: none` which is not readable by screen readers or `visibility: hidden` which takes up physical space in the DOM.
|
||||
|
||||
@ -43,4 +46,5 @@ A bulletproof way to completely hide an element visually and positionally in the
|
||||
|
||||
- https://caniuse.com/#search=clip
|
||||
|
||||
<!-- tags: layout, visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Overflow scroll gradient
|
||||
---
|
||||
title: Overflow scroll gradient
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
|
||||
|
||||
@ -66,4 +69,5 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
|
||||
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Popout menu
|
||||
---
|
||||
title: Popout menu
|
||||
tags: interactivity,intermediate
|
||||
---
|
||||
|
||||
Reveals an interactive popout menu on hover and focus.
|
||||
|
||||
@ -46,4 +49,5 @@ Reveals an interactive popout menu on hover and focus.
|
||||
|
||||
#### Browser support
|
||||
|
||||
<!-- tags: interactivity -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Pretty text underline
|
||||
---
|
||||
title: Pretty text underline
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
A nicer alternative to `text-decoration: underline` or `<u></u>` where descenders do not clip the underline.
|
||||
Natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.
|
||||
@ -51,4 +54,5 @@ 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
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Reset all styles
|
||||
---
|
||||
title: Reset all styles
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Resets all styles to default values with one property. This will not affect `direction` and `unicode-bidi` properties.
|
||||
|
||||
@ -35,4 +38,5 @@ The `all` property allows you to reset all styles (inherited or not) to default
|
||||
|
||||
- https://caniuse.com/#feat=css-all
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Shape separator
|
||||
---
|
||||
title: Shape separator
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
|
||||
|
||||
@ -42,4 +45,5 @@ Uses an SVG shape to separate two different blocks to create more a interesting
|
||||
|
||||
- https://caniuse.com/#feat=svg
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Sibling fade
|
||||
---
|
||||
title: Sibling fade
|
||||
tags: interactivity,intermediate
|
||||
---
|
||||
|
||||
Fades out the siblings of a hovered item.
|
||||
|
||||
@ -37,4 +40,5 @@ span {
|
||||
- https://caniuse.com/#feat=css-sel3
|
||||
- https://caniuse.com/#feat=css-transitions
|
||||
|
||||
<!-- tags: interactivity -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### System font stack
|
||||
---
|
||||
title: System font stack
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Uses the native font of the operating system to get close to a native app feel.
|
||||
|
||||
@ -37,4 +40,5 @@ falls back to the next if it cannot find the font (on the system or defined in C
|
||||
|
||||
#### Browser support
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Toggle switch
|
||||
---
|
||||
title: Toggle switch
|
||||
tags: visual, interactivity,intermediate
|
||||
---
|
||||
|
||||
Creates a toggle switch with CSS only.
|
||||
|
||||
@ -67,5 +70,6 @@ This effect is styling only the `<label>` element to look like a toggle switch,
|
||||
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
<!-- tags: visual, interactivity -->
|
||||
|
||||
|
||||
<!-- date: 2018-10-03 -->
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Transform centering
|
||||
---
|
||||
title: Transform centering
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
|
||||
|
||||
@ -43,4 +46,5 @@ Note: Fixed height and width on parent element is for the demo only.
|
||||
|
||||
- https://caniuse.com/#feat=transforms2d
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Triangle
|
||||
---
|
||||
title: Triangle
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Creates a triangle shape with pure CSS.
|
||||
|
||||
@ -34,4 +37,5 @@ Experiment with the `px` values to change the proportion of the triangle.
|
||||
|
||||
#### Browser support
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Truncate text multiline
|
||||
---
|
||||
title: Truncate text multiline
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade.
|
||||
|
||||
@ -51,4 +54,5 @@ If the text is longer than one line, it will be truncated for `n` lines and end
|
||||
|
||||
- https://caniuse.com/#feat=css-gradients
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Truncate text
|
||||
---
|
||||
title: Truncate text
|
||||
tags: layout,intermediate
|
||||
---
|
||||
|
||||
If the text is longer than one line, it will be truncated and end with an ellipsis `…`.
|
||||
|
||||
@ -36,4 +39,5 @@ If the text is longer than one line, it will be truncated and end with an ellips
|
||||
|
||||
- https://caniuse.com/#feat=text-overflow
|
||||
|
||||
<!-- tags: layout -->
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
### Zebra striped list
|
||||
---
|
||||
title: Zebra striped list
|
||||
tags: visual,intermediate
|
||||
---
|
||||
|
||||
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
|
||||
|
||||
@ -34,5 +37,6 @@ Note that you can use it to apply different styles to other HTML elements like d
|
||||
|
||||
https://caniuse.com/#feat=css-sel3
|
||||
|
||||
<!-- tags: visual -->
|
||||
|
||||
|
||||
<!-- date: 2018-10-31 -->
|
||||
|
||||
Reference in New Issue
Block a user