{"title":"30 Seconds of Code: CSS","description":"Short code snippets for all your development needs","id":"@30-seconds/css","snippets":[{"title":"Border with top triangle","short_description":"Creates a text container with a triangle at the top.","description":"
Creates a text container with a triangle at the top.
\n\n\n:before
and :after
pseudo-elements to create two triangles.:before
triangle should be the same as the container's border color.:after
triangle should be the same as the container's background color.:before
triangle should be 1px
wider than the :after
triangle, in order to act as the border.:after
triangle should be 1px
to the right of the :before
triangle to allow for its left border to be shown.Creates a bouncing loader animation.
\n\n\n@keyframes
defines an animation that has two states, where the element changes opacity
and is translated up on the 2D plane using transform: translate3d()
. Using a single axis translation on transform: translate3d()
improves the performance of the animation..bouncing-loader
is the parent container of the bouncing circles and uses display: flex
and justify-content: center
to position them in the center..bouncing-loader > div
, targets the three child div
s of the parent to be styled. The div
s are given a width and height of 1rem
, using border-radius: 50%
to turn them from squares to circles.margin: 3rem 0.2rem
specifies that each circle has a top/bottom margin of 3rem
and left/right margin of 0.2rem
so that they do not directly touch each other, giving them some breathing room.animation
is a shorthand property for the various animation properties: animation-name
, animation-duration
, animation-iteration-count
, animation-direction
are used.nth-child(n)
targets the element which is the nth child of its parent.animation-delay
is used on the second and third div
respectively, so that each element does not start the animation at the same time.1rem
is usually 16px
.Resets the box-model so that width
and height
are not affected by border
or padding
.
box-sizing: border-box
makes the addition of padding
or border
s not affect an element's width
or height
.box-sizing: inherit
makes an element respect its parent's box-sizing
rule.Creates a border animation on hover.
\n\n\n:before
and :after
pseudo-elements as borders that animate on hover.Creates a circle shape with pure CSS.
\n\n\nborder-radius: 50%
curves the borders of an element to create a circle.width
and height
must be the same. Differing values will create an ellipse.Ensures that an element self-clears its children.
\n\n\n.clearfix:after
defines a pseudo-element.content: ''
allows the pseudo-element to affect layout.clear: both
indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.float
to build layouts. Please consider using a modern approach with flexbox layout or grid layout. 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).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).
padding-top
on the :before
pseudo-element causes the height of the element to equal a percentage of its width. 100%
therefore means the element's height will always be 100%
of the width, creating a responsive square.Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
\n\n\ncounter-reset
is used to initialize a counter, the name of which is the value of the attribute. By default, the counter starts at 0
. This property can also be used to change its value to any specific number.counter-increment
is used for an element that will be countable. Once counter-reset
is initialized, a counter's value can be increased or decreased.counter(name, style)
displays the value of a section counter. Generally used with the content
property. This function can receive two parameters, the first being the name of the counter and the second one either decimal
or upper-roman
(decimal
by default).counters(counter, string, style)
displays the value of a section counter. Generally used with the content
property. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be decimal
or upper-roman
(decimal
by default).counters()
function, separating text can be inserted between different levels of nested counters.Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
\n\n\n::-webkit-scrollbar
targets the whole scrollbar element.::-webkit-scrollbar-track
targets only the scrollbar track.::-webkit-scrollbar-thumb
targets the scrollbar thumb..custom-scrollbar
to style the document scrollbar.Changes the styling of text selection.
\n\n\n::selection
defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.Select some of this text.
\n\n::selection {\n background: aquamarine;\n color: black;\n}\n\n.custom-text-selection::selection {\n background: deeppink;\n color: white;\n}","extension":"css","tags":["visual","beginner"],"icon":"\n "},{"title":"Disable selection","short_description":"Makes the content unselectable.","description":"Makes the content unselectable.
\n\n\nuser-select: none
specifies that the text cannot be selected.You can select me.
\nYou can't select me!
\n\n.unselectable {\n user-select: none;\n}","extension":"css","tags":["interactivity","beginner"],"icon":"\n "},{"title":"Display table centering","short_description":"Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).","description":"Vertically and horizontally centers a child element within its parent element using display: table
(as an alternative to flexbox
).
display: table
on '.center' allows the element to behave like a <table>
HTML element.display: table-cell
on '.center > span' allows the element to behave like an text-align: center
on '.center > span' centers the child element horizontally.vertical-align: middle
on '.center > span' centers the child element vertically.Creates a donut spinner that can be used to indicate the loading of content.
\n\n\nborder
for the whole element, except one side that will serve as the loading indicator for the donut. Use animation
to rotate the element.Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.
\n\n\n::first-letter
pseudo-element to style the first element of the paragraph, use the :first-child
selector to select only the first paragraph.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.
\nDonec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.
\n\np:first-child::first-letter {\n color: #5f79ff;\n float: left;\n margin: 0 8px 0 4px;\n font-size: 3rem;\n font-weight: bold;\n line-height: 1;\n}","extension":"css","tags":["visual","beginner"],"icon":"\n "},{"title":"Dynamic shadow","short_description":"Creates a shadow similar to `box-shadow` but based on the colors of the element itself.","description":"Creates a shadow similar to box-shadow
but based on the colors of the element itself.
position: relative
on the element establishes a Cartesian positioning context for psuedo-elements.z-index: 1
establishes a new stacking context.:after
defines a pseudo-element.position: absolute
takes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 100%
and height: 100%
sizes the pseudo-element to fill its parent's dimensions, making it equal in size.background: inherit
causes the pseudo-element to inherit the linear gradient specified on the element.top: 0.5rem
offsets the pseudo-element down slightly from its parent.filter: blur(0.4rem)
will blur the pseudo-element to create the appearance of a shadow underneath.opacity: 0.7
makes the pseudo-element partially transparent.z-index: -1
positions the pseudo-element behind the parent but in front of the background.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
.
:root
CSS pseudo-class which matches the root element of a tree representing the document.:root
represents the <html>
element and is identical to the selector html
, except that its specificity is higher.Creates an effect where text appears to be "etched" or engraved into the background.
\n\n\ntext-shadow: 0 2px white
creates a white shadow offset 0px
horizontally and 2px
vertically from the origin position.I appear etched into the background.
\n\n.etched-text {\n text-shadow: 0 2px white;\n font-size: 1.5rem;\n font-weight: bold;\n color: #b8bec5;\n}","extension":"css","tags":["visual","intermediate"],"icon":"\n "},{"title":"Evenly distributed children","short_description":"Evenly distributes child elements within a parent element.","description":"Evenly distributes child elements within a parent element.
\n\n\ndisplay: flex
enables flexbox.justify-content: space-between
evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.justify-content: space-around
to distribute the children with space around them, rather than between them.Item1
\nItem2
\nItem3
\nChanges 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.
object-fit: contain
fits the entire image within the container while preserving its aspect ratio.object-fit: cover
fills the container with the image while preserving its aspect ratio.object-position: [x] [y]
positions the image within the container.Horizontally and vertically centers a child element within a parent element using flexbox
.
display: flex
creates a flexbox layout.justify-content: center
centers the child horizontally.align-items: center
centers the child vertically.Creates a list with floating headings for each section.
\n\n\noverflow-y: auto
to allow the list container to overflow vertically.display: grid
on the inner container (dl
) to create a layout with two columns.dt
) to grid-column: 1
and content (dd
) to grid-column: 2
position: sticky
and top: 0.5rem
to headings to create a floating effect.Changes the appearance of a form if any of its children are focused.
\n\n\n:focus-within
applies styles to a parent element if any child element gets focused. For example, an input
element inside a form
element.The :fullscreen
CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.
:fullscreen
CSS pseudo-element selector is used to select and style an element that is being displayed in fullscreen mode.Click the button below to enter the element into fullscreen mode.
\nI change color in fullscreen mode!
Gives text a gradient color.
\n\n\nbackground: -webkit-linear-gradient(...)
gives the text element a gradient background.webkit-text-fill-color: transparent
fills the text with a transparent color.webkit-background-clip: text
clips the background with the text, filling the text with the gradient background as the color.Gradient text
\n\n.gradient-text {\n background: linear-gradient(#70D6FF, #00072D);\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n font-size: 32px;\n}","extension":"css","tags":["visual","intermediate"],"icon":"\n "},{"title":"Grid centering","short_description":"Horizontally and vertically centers a child element within a parent element using `grid`.","description":"Horizontally and vertically centers a child element within a parent element using grid
.
display: grid
creates a grid layoutjustify-content: center
centers the child horizontally.align-items: center
centers the child vertically.Displays a hamburger menu which transitions to a cross on hover.
\n\n\n.hamburger-menu
container div
which contains the top, bottom, and middle bars.display: flex
) with flex-direction
to be column
and flex-wrap
to be wrap
(alternatively, you can set both properties by a shorthand flex-flow: column wrap
).justify-content: space-between
.rotate(45deg)
), and the middle bar fading away by setting opacity: 0
.transform-origin
is set to left
so the bars rotate around the left point.transition all 0.5s
so that both transform
and opacity
properties are animated for half a second.Transitions an element's height from 0
to auto
when its height is unknown.
transition: max-height: 0.5s cubic-bezier(...)
specifies that changes to max-height
should be transitioned over 0.5 seconds, using an ease-out-quint
timing function.overflow: hidden
prevents the contents of the hidden element from overflowing its container.max-height: 0
specifies that the element has no height initially..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.el.scrollHeight
is the height of the element including overflow, which will change dynamically based on the content of the element.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.Creates a scrollable container that will snap on elements when scrolling.
\n\n\ndisplay: gird
and grid-auto-flow: column
to create a horizontal layout.scroll-snap-type: x mandatory
and overscroll-behavior-x: contain
to create a snap effect on horizontal scroll.scroll-snap-align
with either start
, stop
or center
to change the snap alignment.Creates a card that displays additional content on hover.
\n\n\noverflow: hidden
on the card to hide elements that overflow vertically.:hover
and :focus-within
pseudo-class selectors to change the card's styling as necessary when it's hovered or it or its contents are focused.transition: 0.3s ease all
to create a transition effect on hover/focus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link to source\n
Creates a shadow box around the text when it is hovered.
\n\n\ndisplay: inline-block
to set width and length for p
element thus making it an inline-block
.transform: perspective(1px)
to give element a 3D space by affecting the distance between the Z plane and the user and translate(0)
to reposition the p
element along z-axis in 3D space.box-shadow:
to set up the box.transparent
to make box transparent.transition-property
to enable transitions for both box-shadow
and transform
.:hover
to activate whole css when hovering is done until active
.transform: scale(1.2)
to change the scale, magnifying the text.Box it!
\n\n.hover-shadow-box-animation {\n display: inline-block;\n vertical-align: middle;\n transform: perspective(1px) translateZ(0);\n box-shadow: 0 0 1px transparent;\n margin: 10px;\n transition-duration: 0.3s;\n transition-property: box-shadow, transform;\n}\n\n.hover-shadow-box-animation:hover,\n.hover-shadow-box-animation:focus,\n.hover-shadow-box-animation:active {\n box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);\n transform: scale(1.2);\n}","extension":"css","tags":["animation","intermediate"],"icon":"\n "},{"title":"Hover underline animation","short_description":"Creates an animated underline effect when the text is hovered over.","description":"Creates an animated underline effect when the text is hovered over.
\n\n\ndisplay: inline-block
makes the block p
an inline-block
to prevent the underline from spanning the entire parent width rather than just the content (text).position: relative
on the element establishes a Cartesian positioning context for pseudo-elements.:after
defines a pseudo-element.position: absolute
takes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 100%
ensures the pseudo-element spans the entire width of the text block.transform: scaleX(0)
initially scales the pseudo element to 0 so it has no width and is not visible.bottom: 0
and left: 0
position it to the bottom left of the block.transition: transform 0.25s ease-out
means changes to transform
will be transitioned over 0.25 seconds with an ease-out
timing function.transform-origin: bottom right
means the transform anchor point is positioned at the bottom right of the block.:hover:after
then uses scaleX(1)
to transition the width to 100%, then changes the transform-origin
to bottom left
so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.Hover this text to see the effect!
\n\n.hover-underline-animation {\n display: inline-block;\n position: relative;\n color: #0087ca;\n}\n\n.hover-underline-animation:after {\n content: '';\n position: absolute;\n width: 100%;\n transform: scaleX(0);\n height: 2px;\n bottom: 0;\n left: 0;\n background-color: #0087ca;\n transform-origin: bottom right;\n transition: transform 0.25s ease-out;\n}\n\n.hover-underline-animation:hover:after {\n transform: scaleX(1);\n transform-origin: bottom left;\n}","extension":"css","tags":["animation","advanced"],"icon":"\n "},{"title":"Menu on image hover","short_description":"Displays a menu overlay when the image is hovered.","description":"Displays a menu overlay when the image is hovered.
\n\n\nfigure
to wrap the img
element and a div
element that will contain the menu links.opacity
and right
attributes to animate the image on hover, to create a sliding effect.left
attribute of the div
to the negative of the element's width
and reset it to 0
when hovering over the parent element to slide in the menu.display: flex
, flex-direction: column
and justify-content: center
on the div
to vertically center the menu items.Creates a rotate effect for the image on hover.
\n\n\nscale
and rotate
when hovering over the parent element (a figure
) to animate the image, using the transition
property.overflow: hidden
on the parent container to hide the excess from the image transformation.Creates a responsive image mosaic.
\n\n\ndisplay: grid
to create an appropriate responsive layout.grid-row: span 2 / auto
and grid-column: span 2 / auto
to create items that span two rows or two columns respectively.Displays an image overlay effect on hover.
\n\n\n:before
and :after
elements for the top and bottom bars of the overlay respectively, setting their opacity
, transform
and transition
to produce the desired effect.figcaption
for the text of the overlay, setting display: flex
, flex-direction: column
and justify-content: center
to center the text into the image.:hover
pseudo-selector to update the opacity
and transform
of all the elements and produce the desired effect.Creates a vertical masonry layout using HTML and CSS.
\n\n\nwidth
(vertical layout) or a fixed height
(horizontal layout), forming a perfect fit. Especially useful when working with images..masonry-container
is the container for the masonry layout. Within that container, there's a div.masonry-columns
, which will automatically put each child element, .masonry-brick
, into the layout..masonry-brick
must be have display: block
to allow the layout to flow properly, while the :first-child
of this class should have a different margin
to account for its positioning.A hover effect where the gradient follows the mouse cursor.
\n\n\n--x
and --y
are used to track the position of the mouse on the button.--size
is used to keep modify of the gradient's dimensions.background: radial-gradient(circle closest-side, pink, transparent);
creates the gradient at the correct postion.Fancy hover and focus effect at navigation items using transform CSS property.
\n\n\n:before
pseudo-element at the list item anchor to create a hover effect, hide it using transform: scale(0)
.:hover
and :focus
pseudo-selectors to transition to transform: scale(1)
and show the pseudo-element with its colored background.z-index: -1
.Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.\nProvides an alternative to display: none
(not readable by screen readers) and visibility: hidden
(takes up physical space in the DOM).
clip
to indicate that no part of the element should be shown.margin: -1px
.Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
\n\n\nposition: relative
on the parent establishes a Cartesian positioning context for pseudo-elements.:after
defines a pseudo element.background-image: linear-gradient(...)
adds a linear gradient that fades from transparent to white (top to bottom).position: absolute
takes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 240px
matches the size of the scrolling element (which is a child of the parent that has the pseudo element).height: 25px
is the height of the fading gradient pseudo-element, which should be kept relatively small.bottom: 0
positions the pseudo-element at the bottom of the parent.pointer-events: none
specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.Reveals an interactive popout menu on hover and focus.
\n\n\nposition: relative
on the reference parent establishes a Cartesian positioning context for its child.position: absolute
takes the popout menu out of the flow of the document and positions it in relation to the parent.left: 100%
moves the the popout menu 100% of its parent's width from the left.visibility: hidden
hides the popout menu initially and allows for transitions (unlike display: none
)..reference:hover > .popout-menu
means that when .reference
is hovered over, select immediate children with a class of .popout-menu
and change their visibility
to visible
, which shows the popout..reference:focus > .popout-menu
means that when .reference
is focused, the popout would be shown..reference:focus-within > .popout-menu
ensures that the popout is shown when the focus is within the reference.A nicer alternative to text-decoration: underline
where descenders do not clip the underline.\nNatively implemented as text-decoration-skip-ink: auto
but it has less control over the underline.
text-shadow
uses 4 values with offsets that cover a 4x4 px area to ensure the underline has a "thick" shadow that covers the line where descenders clip it. Use a color that matches the background. For a larger font, use a larger px
size. Additional values can create an even thicker shadow, and subpixel values can also be used.background-image: linear-gradient(...)
creates a 90deg gradient using the text color (currentColor
).background-*
properties size the gradient as 100% of the width of the block and 1px in height at the bottom and disables repetition, which creates a 1px underline beneath the text.::selection
pseudo selector rule ensures the text shadow does not interfere with text selection.Pretty text underline without clipping descenders.
\n\n.pretty-text-underline {\n display: inline;\n text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;\n background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);\n background-position: bottom;\n background-repeat: no-repeat;\n background-size: 100% 1px;\n}\n\n.pretty-text-underline::-moz-selection {\n background-color: rgba(0, 150, 255, 0.3);\n text-shadow: none;\n}\n\n.pretty-text-underline::selection {\n background-color: rgba(0, 150, 255, 0.3);\n text-shadow: none;\n}","extension":"css","tags":["visual","intermediate"],"icon":"\n "},{"title":"Pulse loader","short_description":"Creates a pulse effect loader animation using the `animation-delay` property.","description":"Creates a pulse effect loader animation using the animation-delay
property.
@keyframes
to define an animation at two points in the cycle, start (0%
), where the two <div>
elements have no width
or height
and are positioned at the center and end (100%
), where both <div>
elements have increased width
and height
, but their position
is reset to 0
.opacity
to transition from 1
to 0
when animating to give the <div>
elements a disappearing effect as they expand..ripple-loader
, which is the parent container, has a predefined width
and height
. It uses position: relative
to position its children.animation-delay
on the second <div>
element, so that each element starts its animation at a different time.Resets all styles to default values with one property. This will not affect direction
and unicode-bidi
properties.
all
property allows you to reset all styles (inherited or not) to default values.\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui\n repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui\n iure, consequatur velit sit?\n
\nCreates a responsive layout with a content area and a sidebar.
\n\n\ndisplay: grid
on the parent container, to create a grid layout.minmax()
for the second column (sidebar) to allow it to take up between 150px
and 20%
.1fr
for the first column (main content) to take up the rest of the remaining space.Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
\n\n\nposition: relative
on the element establishes a Cartesian positioning context for pseudo elements.:after
defines a pseudo element.background-image: url(...)
adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use the URL-encoder for SVG.position: absolute
takes the pseudo element out of the flow of the document and positions it in relation to the parent.width: 100%
ensures the element stretches the entire width of its parent.height: 12px
is the same height as the shape.bottom: 0
positions the pseudo element at the bottom of the parent.Fades out the siblings of a hovered item.
\n\n\ntransition: opacity 0.2s
specifies that changes to opacity will be transitioned over 0.3 seconds..sibling-fade:hover span:not(:hover)
specifies that when the parent is hovered, select any span
children that are not currently being hovered and change their opacity to 0.5
.Creates a staggered animation for the elements of a list.
\n\n\nopacity
to 0
and transform
to translateX(100%)
to make list elements transparent and move them all the way to the right.transition
properties for list elements, except transition-delay
which is specified relative to the --i
custom property.--i
for each list element, which will in turn be used for transition-delay
to create the stagger effect.:checked
selector for the checkbox to appropriately style list elements, setting opacity
to 1
and transform
to translateX(0)
to make them appear and slide into view.Creates a list with sticky headings for each section.
\n\n\noverflow-y: auto
to allow the list container (dl
) to overflow vertically.dt
) position
to sticky
and apply top: 0
to stick to the top of the container.Uses the native font of the operating system to get close to a native app feel.
\n\n\n-apple-system
is San Francisco, used on iOS and macOS (not Chrome however).BlinkMacSystemFont
is San Francisco, used on macOS Chrome.Segoe UI
is used on Windows 10.Roboto
is used on Android.Oxygen-Sans
is used on Linux with KDE.Ubuntu
is used on Ubuntu (all variants).Cantarell
is used on Linux with GNOME Shell."Helvetica Neue"
and Helvetica
is used on macOS 10.10 and below (wrapped in quotes because it has a space).Arial
is a font widely supported by all operating systems.sans-serif
is the fallback sans-serif font if none of the other fonts are supported.This text uses the system font.
\n\n.system-font-stack {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}","extension":"css","tags":["visual","beginner"],"icon":"\n "},{"title":"Image text overlay","short_description":"Display a text on top of an image using an overlay.","description":"Display a text on top of an image using an overlay.
\n\n\nbackdrop-filter
to apply a blur(14px)
and brightness(80%)
effect to make text readable regardless of background image and color.Align items horizontally using display: inline-block
to create a 3-tile layout.
display: inline-block
to create a tiled layout, without using float
, flex
or grid
..tiles
is the container component, .tile
is an item that needs to be displayed inline.width: calc((900px / 3))
to divide the width of the container evenly into 3 columns.font-size: 0;
on .tiles
to avoid whitespace.font-size: 20px
to h2
in order to display the text.em
), using font-size: 0;
to fight whitespace between blocks might cause side effects.Creates a toggle switch with CSS only.
\n\n\n<label>
element to look like a toggle switch, and hiding the actual <input>
checkbox by positioning it offscreen. When clicking the label associated with the <input>
element, it sets the <input>
checkbox into the :checked
state.for
attribute associates the <label>
with the appropriate <input>
checkbox element by its id
..switch:after
defines a pseudo-element for the <label>
to create the circular knob.input[type='checkbox']:checked + .switch:after
targets the <label>
's pseudo-element's style when the checkbox is checked
.transform: translateX(20px)
moves the pseudo-element (knob) 20px to the right when the checkbox is checked
.background-color: #7983ff;
sets the background-color of the switch to a different color when the checkbox is checked
..offscreen
moves the <input>
checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.transition: all 0.3s
specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the <label>
's background-color
and the pseudo-element's transform
property when the checkbox is checked.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
).\nSimilar 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.
position: absolute
on the child element allows it to be positioned based on its containing block.left: 50%
and top: 50%
offsets the child 50% from the left and top edge of its containing block.transform: translate(-50%, -50%)
allows the height and width of the child element to be negated so that it is vertically and horizontally centered.Creates a triangle shape with pure CSS.
\n\n\nborder-*
property. For example, a color on border-top
means the arrow points downward.px
values to change the proportion of the triangle.If the text is longer than one line, it will be truncated for n
lines and end with an gradient fade.
overflow: hidden
prevents the text from overflowing its dimensions (for a block, 100% width and auto height).width: 400px
ensures the element has a dimension.height: 109.2px
calculated value for height, it equals font-size * line-height * numberOfLines
(in this case 26 * 1.4 * 3 = 109.2
).height: 36.4px
calculated value for gradient container, it equals font-size * line-height
(in this case 26 * 1.4 = 36.4
).background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)
gradient from transparent
to #f5f6f9
.\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut\n labore et.\n
\n\n.truncate-text-multiline {\n overflow: hidden;\n display: block;\n height: 109.2px;\n margin: 0 auto;\n font-size: 26px;\n line-height: 1.4;\n width: 400px;\n position: relative;\n}\n\n.truncate-text-multiline:after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 150px;\n height: 36.4px;\n background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);\n}","extension":"css","tags":["layout","intermediate"],"icon":"\n "},{"title":"Truncate text","short_description":"If the text is longer than one line, it will be truncated and end with an ellipsis `…`.","description":"If the text is longer than one line, it will be truncated and end with an ellipsis …
.
overflow: hidden
prevents the text from overflowing its dimensions (for a block, 100% width and auto height).white-space: nowrap
prevents the text from exceeding one line in height.text-overflow: ellipsis
makes it so that if the text exceeds its dimensions, it will end with an ellipsis.width: 200px;
ensures the element has a dimension, to know when to get ellipsisIf I exceed one line's width, I will be truncated.
\n\n.truncate-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 200px;\n}","extension":"css","tags":["layout","beginner"],"icon":"\n "},{"title":"Vertical scroll snap","short_description":"Creates a scrollable container that will snap on elements when scrolling.","description":"Creates a scrollable container that will snap on elements when scrolling.
\n\n\ndisplay: gird
and grid-auto-flow: row
to create a vertical layout.scroll-snap-type: y mandatory
and overscroll-behavior-y: contain
to create a snap effect on vertical scroll.scroll-snap-align
with either start
, stop
or center
to change the snap alignment.Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
\n\n\n:nth-child(odd)
or :nth-child(even)
pseudo-class to apply a different background color to elements that match based on their position in a group of siblings.div
, tr
, p
, ol
, etc.