Image for post
Image for post

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 to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

For example, before CSS Transitions were fully supported, you’d have added the prefixes, like so:

.element…


Image for post
Image for post

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 list of animatable CSS properties.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

Creating an animation

An animation consists of both a style rule which…


Image for post
Image for post

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
  • transition-timing-function
  • transition-delay
.element {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay;
}

This is equivalent to:

.element {
transition: property duration timing-function delay;
}

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox? …


Image for post
Image for post

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.

For example: an unstyled <h1> element will often have a slightly different amount of padding, depending on which browser is used.

Most of the time these style defaults are useful. …


Image for post
Image for post

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 with animations.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

Transform functions

We can use the following functions:

  • scale(): scales the size of an…


Image for post
Image for post

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 or brightness, and more!

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

Whilst it’s common to use filter for image effects, it…


Image for post
Image for post

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. If so, the height value is set accordingly.

As you can see they’re structured much like a media query.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page


Image for post
Image for post

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 screen and (max-width: 600px) {
body {
background-color: orange;
}
}

And just like that we have a rule targeting small devices!

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox? …


Image for post
Image for post

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 code repetition & create much more easily maintainable stylesheets.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

Defining a CSS Variable

We define a variable by…


Image for post
Image for post

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.

🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!

Subscribe to my newsletter here → https://easeout.eo.page

Horizontal Centering

Inline Elements

Inline elements like text (and links) are super simple to center horizontally using the text-align

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