Learning the latest CSS techniques - (r)

-sidebar-toc>

CSS does not just make websites look beautiful anymore. It's now a tool that can bring websites alive with motions and interaction that used to be believed to be impractical.

As you journey through this guide, you'll gain essential skills to take your website projects above the normal. You'll hopefully walk away with some inspiration, too.

Advanced CSS transitions

Advanced CSS transitions make UI elements interactive, engaging as well as pleasing to the eye. Imagine an icon on your website. It's usually just in the middle, but now with CSS transitions, when someone hovers over it, it smoothly changes color or maybe grows slightly in dimensions.

The idea is based on interpolation as a method of effortlessly transitioning between state of the CSS property.

In order to create the effects you want you will need to know several CSS properties that you need be familiar with

• Transition properties: These include specifying the property you want to animate (like background-color or opacity), setting the duration of the transition, and deciding on the transition-timing-function (like ease-in or linear), which dictates how the transition progresses over its duration.
• Timing functions: These are essential as they regulate the acceleration and deceleration during the transition. One of the most flexible options here are that of the cubic-bezier function. It allows you to create custom speed curves, giving total control over the speed of your transition. It may be difficult at first, however software such as cubic-bezier make it easier to imagine and design these curves.

This is a basic illustration of the way you can incorporate this into your CSS:

.my-element 
 
 transition-property: opacity;
 
 transition-duration: 0.5s;
 
 transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
 
 
 

In this snippet, .my-elementwill change its transparency based on a specific speed curve that is defined by its cubic-bezier function. This curve dictates a specific sort of movement like beginning slow, increasing speed in the middle, then slowing toward the end.

Using transition-timing-function with custom values, you can make your web elements move in a way that feels more natural, more dynamic, or just plain different from the standard. This is a fantastic tool that can bring some character and elegance to your web animations.

In the case of sophisticated techniques, here are a few ideas to think about:

1. Juggling multiple properties: Why settle for animating only one item? CSS lets you line up various properties and then simultaneously animate all of them. This can be useful for adding the layers of your animated.
2. Animations that are synced Also, you can connect different properties so that they be moving at the same speed to create a better coordinated result.
3. Nested Transitions Use transitions on elements in the container. So, when you interact with the container, the child elements behave as they would if you had chosen.

Be sure that these animations do not just look good but also operate smoothly, especially when using devices that aren't as powerful. Utilizing properties such as transform and transparency is an excellent idea because they're easier on your browsers and shouldn't affect the performance of your device too much.

Additionally, sending a warning to your browser with this change-to-will property can help it be ready for the action and ensures that the process runs smooth.

This is a last note to ensure that this is working across all browsers: Browsers are selective. Prefixes from vendors help you ensure that your awesome transitions are compatible across all browsers. This is a little bit of work, but tools such as autoprefixers will take care of this for you, keeping your work easy.

Changes that can be made in CSS

CSS transforms can be a wonderful option to bring more attention to your web designs. They can be used to change the appearance of things, of course, but they also alter the overall look of the web page. This is where the transformation property is the main participant on this page.

It's versatile, and it can move elements around from one place in one direction, such as sliding images across a screen or changing the dimensions - for instance, making things look closer or farther away, just like zooming in or out on the image. If you'd like to make it a little more extravagant, you could make elements spin around.

The most impressive part here is adding 3D transformations to the mix. Utilizing functions such as translate3d, scale3d and rotate3d the elements will leap off the screen to create an engaging experience within the browser.

Consider, for example the effect of flipping cards. It's a neat feature where one side of a card displays specific information then when the card flips and new information is shown on the other side. This feature can draw the attention of customers.

The key to nailing this effect is using the visible-backface property in a way that is effective. This will ensure that the back of the card is unnoticed until the moment it is intended to be seen.

However, why should you not stop here? By combining these changes using animations or transitions you'll get lots more from your CSS. You can have a button that elegantly grows in size upon hovering over it or an icon that playfully shifts around on the screen. These dynamic changes add a smooth and fluid feel to your web elements, making your user experience more enjoyable.

Designmodo offers several beautiful examples of this in action. You can first see the CSS used for 3D transforms separated into smaller pieces. Then, you can watch the code at work:

Container queries

Container queries are a different feature of CSS worth exploring. You can style elements based on the size of their container and not just their screen size. Consider it this way Imagine you have a box, and you want your contents to appear nice no matter how huge or small it is. Container queries are perfect for that.

They're super handy when you want different parts of your site, such as cards or sidebars, changing their design based the amount of space is available. Each element is able to choose its own style and is independent of the other elements on the page.

Let's take a look at what you can do with the following:

• Configure the container: First, specify in CSS the portion of your webpage has an element that is a container. It is possible to do this using property names like container-type or the container's name.
• Write your queries: Just like media queries, but for containers. Write a rule that declares, "Hey, if my container is more than this large, I'll make these style changes."

This is what the basic code for this will have to look like:

@container (min-width 300px) Styles */

In this case, the styles in the .component class will be applied when its container has a size of 300px.

Now, container queries can be utilized in a variety of contexts, like:

• Sidebars and footers that are responsive The size and layout of footers or sidebars based on the size of the container.
• Responsive cards changing the design or layout of cards within a grid or flexbox layout based on the width of their containers.

Container queries are currently used by the major browsers, which include Chrome, Firefox, Safari, and Edge It's a good practice to use the feature as a gradual enhancement. Beginning with simple styles for non-supporting browsers and enhance for those that support container queries.

Making use of Flexbox to align vertically

Flexbox can be an extremely useful tool within CSS, especially when it comes to vertical alignment. Although it's been around for quite some time, it's super relevant, especially when aligning objects along the cross-axis (which, depending on your design, could be horizontal or vertical).

Utilizing align-items to achieve vertical alignment

The align-items property within Flexbox is the most popular option for vertically aligning objects within the container. This is possible when your Flex container is in the flexible direction that is comprised of rows. This feature lets you decide how all children of a flex container are aligned on the cross-axis.

For instance, if you have a bunch of things in a flexible container, and want the entire container to be aligned horizontally, you'll need to use align-items: center;. Below are the main alternatives you'll have to use to use aligning items:

• flex-start aligns the items with the point at which the container begins.
• flex-end: Aligns items to the edge of the container.
• center: Centers items in the container.
• baseline aligns elements according to their baseline.
• stretch stretch: The items are stretched out so that they fill the entire container (default default behavior).

Utilizing align-self to control individual controls

While aligning items is great for aligning the contents of containers, you may would like to align one item differently. This is the reason the reason why align-self is a great option. It lets you alter this align-items value of individual flexible items. It can be used with the same value as align-items.

In this case, for example, you own a flex container that has align-items that are middle; but there's one item you want to align to the start. You can apply the align-self option: flex-start to that specific item. It's a great option to maintain precise control over the positioning of the individual items.

It is beneficial to observe this in action, however.

Let's say you're designing the navigation bar, which includes a logo, some links, and a search bar. It is important for the links to be centered with the logo to be aligned with the top of the page, while the bar to be aligned with the lower part of the.

Here's how to do this:

.nav-container 
 
 display: flex;
 
 flex-direction: row;
 
 align-items: center;
 
 
 
 .logo 
 
 align-self: flex-start;
 
 
 
 .search-bar 
 
 align-self: flex-end;
 
 

In this example this example, it is clear that the .nav-container is a flex container with its items generally centered. The logo and the search bar however differ from this norm, aligning themselves with the beginning and ending of the container, respectively.

Modern color functions in CSS

The modern color features used in CSS have advanced dramatically, providing more advanced methods of defining and manipulating color in web design. Let's look into certain of these features:

1. 1.() and rgba()

The RGB() function is a traditional way to define colors using the Red, Green, and Blue channels. Each channel can be an integer between the 0 to the number 255. The RGBa() variant adds an alpha channel for opacity which is 1 fully transparent and 0 completely transparent.

The design should be similar to this:

.example 
 
 color: rgb(255, 0, 0); /* Red */
 
 background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
 
 

2. hsl() and hsla()

hsl() represents colors by Hue, Saturation, and Lightness. It makes it much more intuitive to select color variations. As with rgba(), HSL() includes an alpha channel to indicate opacity. Similar to this:

.example 
 
 color: hsl(120, 100%, 50%); /* Green */
 
 background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
 
 

3. 3.() and oklab()

oklch() and the oklab() are more recent additions in the CSS colors. They're based in the CIELAB color space, which is designed to provide a uniform perception. That means changes in color values correlate more closely with what is perceived by the human eye.

Now, specifically:

• OKLAB() is used for defining colors in a visually uniform space.
• oklch() is similar however it uses cylindrical coordinates (lightness the chroma value, lightness, as well as hue).

They allow an improved and more efficient color manipulation, particularly for tasks like creating smooth color gradients. Here's what that might appear like in code:

.example 
 
 color: oklch(75%, 0.25, 250); /* A color in oklch */
 
 background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
 
 

Utilizing color schemes that are advanced

By using these functions, specifically the more advanced oklch() and oklab(), you can create complex colors that appear visually appealing and consistent. They offer more control over how the colors are displayed and perceived, ensuring that your designs look appealing and are accessible.

When you combine these color functions along with CSS options like specific properties (CSS variables) as well as calculations You can create dynamic and flexible color systems that adapt to the various states, themes as well as environments.

While web standards and browser support of these functions continue to change, embracing these modern color functions could significantly improve the look and design and user experience of your websites.

Curve text around the images

It lets you define a shape around which inline content is to wrap. This is useful for wrapping text around images in an unrectangular form, resulting in patterns that appear more natural and more visually appealing than standard rectangle text wrapping.

What is the process?

You can define various shapes including ellipses, circles and polygons, or even use an image's alpha channel to determine the form.

The shape-outside property is typically applied to floating objects. If you are floating an image, and then apply a shape-outside that wraps the text around the image according to the defined shape.

Here's a basic illustration of how to use shape-outside using a circle:

.image 
 
 float: left;
 
 shape-outside: circle(50%);
 
 width: 200px;
 
 height: 200px;
 
 margin-right: 15px;
 
 

In this case in this example, in this case, the .image class is used to apply the.image class to an image element. It's floated to the left, and the shape-outside circle(50%); creates a circular shape around which the text is wrapped. Making use of the shape-outside technique effectively, you can create opportunities in your design as it permits text to flow around complex designs, which makes it possible to design magazine-style layouts as well as attractive websites.

CSS Blend Modes

CSS blend modes are a powerful way to mix colors and images, creating distinctive visual effects that enhance your designs as well. Blend modes let users to design engaging text effects, image overlays, and intricate background patterns. To use background-blend-mode, let's talk about what it does first. The property can be used to specify how an element's background images and color should blend together. For example, if there is a background image and a background color, you could blend them with diverse blend options like multiply, screen, overlay, and so on. This is what the code could look in the following format:

.element 
 
 background-image: url('image.jpg');
 
 background-color: blue;
 
 background-blend-mode: multiply;
 
 

Popular blend modes

Here are some of the most popular mix modes that you have to be aware of to utilize this effect properly:

• Multiply The color is multiplied of the blend layer and the base layer, resulting in a darker shade.
• Screen makes the colors more light, which is the opposite of multiplying. It's useful in creating effects of light.
• Overlay: Combines multiplication and screen blend modes. The parts that are light are made lighter while dark parts get darker.
• Darken and lighten Choose the dark or lighter color, respectively.
• The color dodge or burn Darken or lighten the color of the base to reflect the blend color.
• Difference and exclusion: Used for creating creative and artistic colors.

Adapting to user preferences

Being able to accommodate user preferences when it comes to web design is an essential aspect of creating accessible and user-friendly websites. CSS media queries for preferences like prefers-color-scheme and prefers-reduced-motion play a significant role in this process.

Let's take a look at these concepts.

prefers-color-scheme

The media query can be used to find out if the user is requesting the system to select a dark or light hue theme. It's a convenient option to introduce the dark color scheme within a website's design.

It is possible to make use of preferences-color-scheme to define different colors for light and dark modes.

Examples:

/* Default light mode styles */
 
 body 
 
 background-color: white;
 
 color: black;
 
 
 
 /* Dark mode styles */
 
 @media (prefers-color-scheme: dark) 
 
 body 
 
 background-color: black;
 
 color: white;
 
 
 
 

In this example, the standard styles are used for light modes, whereas the designs in the @media query are applied when the user is looking for a darker colour scheme.

prefers-reduced-motion

The purpose of this media query is to determine if a user is requesting the system to limit its amount of animated or motion that it employs. This is essential for those who suffer from motion sickness or suffer from vestibular disorders.

You can use prefers-reduced-motion to reduce or remove animations and transitions:

/* Standard animations */
 
 .animate 
 
 transition: transform 0.3s ease;
 
 
 
 /* Reduced motion */
 
 @media (prefers-reduced-motion: reduce) 
 
 .animate 
 
 transition: none;
 
 
 
 

You'll find that animations can be disabled if the user has indicated a preference for reduced motion.

Incorporating prefers-color-scheme and prefers-reduced-motion into your CSS is a step towards a more inclusive and user-friendly web, ensuring that your site is accessible and comfortable for a wide range of users with different needs and preferences.

Use :is() And  where() pseudo-selectors

The :is() and :where() pseudo-selectors in CSS are powerful tools for managing specificity and simplifying complex selector chains. Let's explore how they work and see some real-world examples.

:is() pseudo-selector

This selector allows you to focus on multiple elements using one rule, and also reduces the number of selectors that are similar to it. The distinctiveness of the () pseudo-class is the() pseudo-class is it's ability to be the most exact selector used within the arguments.

* Chooses any heading, paragraph or paragraph inside an article */
thearticle :is(h1, h2, h3 (p, p) Color: blue;

:where() pseudo-selector

This is similar to the :is(), but it is distinguished by a crucial difference. :where() always has a specificity of zero. It is therefore effective for overriding styles, but without expanding the precision. In use, it might be like this:

* Chooses any paragraph or heading, but with no added specificity */:where(article or section) p 
 
 margin-bottom: 1em;
 
 

Using the syntax of :is() and where(), you can create adaptable and stable style sheets, especially when working with complicated designs. These pseudo-selectors might be beneficial when you have to:

• Simplify nested selectors The HTML0 code can make it easier to understand the nested and grouped selectors. This makes your CSS more readable and easier to manage.
• Override style: :where() is great for creating basic styles that are easily overridden without worrying about particularity.
• Reuse styles These two types of selectors provide to create more modular and reusable styles, as you can group various elements under the same rules.

To see this, think of the navigation menu having distinct sections. The menu can be designed using the :is() to uniformly make all the links appear in the menu regardless of their nesting level such as:

nav :is(ul, ol, div) > > li a 
 
 padding: 10px;
 
 color: white;
 
 

Summary

From the elegance of CSS transformations that make user interfaces more dynamic to the potential of 3D transforms, we hope that you've gained an comprehension of higher-end CSS techniques that are available by the year 2024, and even beyond.

Do you use one of these advanced CSS methods currently? Do you have suggestions for other users to try? Please feel free to share them with us.

Jeremy Holcombe

Content & Marketing Editor , WordPress Web Developer, and Content Writer. Apart from everything WordPress, I enjoy the beach, golf, and movies. I also have tall people issues ;).

•                 Website                                          
•                 LinkedIn