Are text-align and align-items the same when it comes to text alignment in CSS?
In the age of flexbox and grid, text alignment may seem simpler than ever, but there are a few things you should be aware of.
CSS Articles
The CSS article collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as articles for handling user interactions.
-
CSS · -
CSS · How can I ensure the footer is always at the bottom of the page?
Make sure the footer stays at the bottom of the page, instead of floating up when the content is too short.
-
CSS · Content-aware height transition
Dynamically transition an element's height, based on its content.
-
CSS · Centering content with CSS
Centering content with CSS might often feel difficult. Here are 4 easy ways you can do it.
-
CSS · 25 CSS gradients for your next project
I hand picked 25 of my favorite CSS gradients from uiGradients for your next design. Get them now!
-
CSS · Isometric card
Learn how to create an isometric card using CSS.
-
CSS · Dynamic shadow
Learn how to create a shadow similar to
box-shadow, but based on the colors of the element itself. -
CSS · Hide element offscreen
Hide an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
-
CSS · Animate box shadow on hover
Create an animated shadow box around the text when it is hovered.
-
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 · Shake input field when invalid, using CSS
Inform your users of invalid input by shaking the input field.
-
CSS · Horizontal or vertical scroll snap in CSS
Create a horizontally or vertically scrollable container that will snap on elements when scrolling.
-
CSS · Navigation list item hover & focus effect
Create a custom hover and focus effect for navigation items, using CSS transformations.
-
CSS · CSS Button Transitions
Add some life to your buttons with these simple CSS transitions.
-
CSS · How can I create a custom responsive favicon for dark mode?
Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.
-
CSS · What are CSS pseudo-classes?
Learn how to use CSS pseudo-classes to style an element based on changes to its state.
-
CSS · CSS inherited properties cheatsheet
A quick reference for inherited CSS properties.
-
CSS · Hover underline animation
Create an animated underline effect when the user hovers over some text.
-
CSS · How to clear floats with a clearfix
Eliminate the need for non-semantic markup to clear floats.
-
CSS · Define a system font stack in CSS
Learn how to leverage the native fonts of the operating system to get close to a native app feel.
-
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 · Display a fallback for images that fail to load
Having trouble loading an image? Display a fallback message instead!
-
CSS · Using the inset CSS property
The inset shorthand property makes element positioning in CSS easier. Learn how to use it effectively in your projects.
-
CSS · Style elements when in fullscreen mode
Did you know you can differentiate an element's styles when it's in fullscreen mode? Learn how to do it with this code snippet!