Evenly distributed children
Evenly distribute child elements within a parent element, using Flexbox.
Code Articles
30 seconds of code contains a curated collection of code articles covering a wide range of development needs. The collection spans many topics, ranging from simple coding problems to theoretical concepts and development techniques.
-
CSS · -
CSS · Image gallery with horizontal or vertical scroll
Create a horizontally or vertically scrollable image gallery.
-
CSS · Speech bubbles with CSS
Create a content container with a triangle at the top, much like a speech bubble.
-
CSS · Create a toggle switch using HTML & CSS
A toggle switch is little more than a checkbox with a custom appearance. This article shows you how to create one without using JavaScript.
-
CSS · Dynamic shadow
Learn how to create a shadow similar to
box-shadow, but based on the colors of the element itself. -
CSS · Zebra striped list or table
Use this CSS selector to create a striped list with alternating background colors.
-
CSS · Responsive image mosaic
Create a responsive image mosaic, using CSS grid to create a grid layout and media queries to adjust the layout for different screen sizes.
-
CSS · Animated CSS loaders
Loading indicators are a staple of modern web design. Here are some CSS loaders to keep your users engaged while they wait.
-
CSS · Hide element offscreen
Hide an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
-
CSS · Staggered list animation
Staggered animations can be used to create a more dynamic user experience. Get creative with your lists!
-
CSS · Box-sizing reset
Reset the box-model so that
widthandheightare not affected byborderorpadding. -
CSS · Shake input field when invalid, using CSS
Inform your users of invalid input by shaking the input field.
-
CSS · Input with prefix
Ever wanted to create an input with a visual, non-editable prefix? CSS can help you with that!
-
CSS · List with floating or sticky section headings
Learn how to create a list with floating or sticky headings for each section.
-
CSS · CSS Button Transitions
Add some life to your buttons with these simple CSS transitions.
-
CSS · Fade out siblings on hover
Create a cool effect that fades out the siblings of a hovered item with a few lines of CSS.
-
CSS · Simple Zoom in zoom out animation in CSS
Create a simple zoom in zoom out animation in CSS and elevate your designs.
-
CSS · Hover underline animation
Create an animated underline effect when the user hovers over some text.
-
CSS · Fluid typography with CSS clamp
Learn how to create text that scales according to the viewport width.
-
CSS · How can I fit an image in a container with CSS?
Fit and position an image appropriately inside its container while preserving its aspect ratio with this handy technique.
-
CSS · Horizontal or vertical scroll snap in CSS
Create a horizontally or vertically scrollable container that will snap on elements when scrolling.
-
CSS · Content-aware height transition
Dynamically transition an element's height, based on its content.
-
CSS · What are CSS variables and where can I use them?
Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
-
CSS · Mouse cursor gradient tracking
Create a hover effect where the gradient follows the mouse cursor, with CSS and a little bit of JavaScript.