CSS Vendor prefixes (or browser prefixes) are a way for browsers to give access to new CSS features not yet considered stable.

By using prefixes, we can use these newer CSS features with the browsers that support them — instead of waiting for all browsers to catch up.

🤓 Want…


CSS Animations are a great way to animate CSS properties from one to another. While we can use transitions to perform single movements, animations give us much finer control.

Some common properties we might animate include colors (color& background-color), and numbers such as height & width.

Check out the full…


In this tutorial, we’re taking a look at how to animate components using CSS transitions!

A transition occurs when we tell a CSS property value to change, over a specified period of time.

We do this with the transition property, which is a shorthand of the following properties:

  • transition-property
  • transition-duration


As developers, we want our HTML elements to look the same way regardless of which browser is being used to view our pages. Unfortunately, this isn’t the case due to the way browsers run.

Each browser has its own default stylesheet, which specifies some minimal rules that apply to elements.


The transform property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.

For example:

.element {   
width: 30px;
height: 30px;
transform: scale(10);
}

Despite our height and width declarations, the transform scales our element to ten times its original size!

Transforms are especially fun when combined…


CSS Filters are an extremely useful way to apply visual effects to elements.

Tasks that might usually be performed with Photoshop or other photo editing software, can be done right in CSS!

We can use the filter property to add effects such as blur or saturation, or change the opacity…


Feature Queries are used in CSS for precise feature detection. And they’re now supported by all the modern browsers!

We use the @supports keyword. For example:

@supports (height: 100vh) {
.container {
height: 100vh;
}
}

Here we’re checking if the vh unit is supported. …


Media queries are a CSS technique that we can utilize when making our pages responsive.

We use @media to create a CSS rule that only executes if a specified condition is true.

For example, if the device browser window is 600px or smaller, set the background-color to orange:

@media only…


Custom Properties (commonly known as CSS Variables) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript, Python, etc, you’ll know that variables are extremely useful.

A variable is a name that refers to a value, and by using variables in CSS we greatly reduce…


Centering in CSS has traditionally been a cause for frustration. It’s an everyday task yet there are so many possible solutions! The approach you take will differ depending on whether you’re centering horizontally, vertically or both!

In this tutorial, we’ll look at which methods are best in each scenario.

🤓…

Timothy Robards

Web Developer & tech writer. Join my newsletter to stay up to date with web dev! https://easeout.eo.page 🎉

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store