8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Next-Gen App & Browser Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

(https://accounts.lambdatest.com/login/google)
Start free with Google Start free with Email (https://accounts.lambdatest.com/register)

Web Development (https://www.lambdatest.com/blog/category/web-development/)

18 Advanced CSS Tricks And Tips [2024]

Mythili Raju
(https://www.lambdatest.com/blog/author/mythiliraju273/)
Posted On: March 18, 2024
174856 Views
17 Min Read

Home (https://www.lambdatest.com/) > Blog (https://www.lambdatest.com/blog/) > 18 Advanced CSS Tricks And Tips [2024]

(/#facebook) (/#twitter) (/#linkedin)

CSS describes how HTML elements should be presented on the web page. It provides colors, positions to the HTML elements, etc., create

animations, and amplify your web page. Developers and web designers are intrigued by ways to try out cool CSS tricks and tips and contribute to
Start Free Testing -> (https://accounts.lambdatest.com/register)
improving what CSS can do.

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 1/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

As CSS is becoming more dominant, there are many opportunities developers and designers can use to create engaging and browser-compatible

websites (https://www.lambdatest.com/blog/complete-guide-on-creating-browser-compatible-html-and-css/).
(https://www.lambdatest.com)

In this CSS tutorial, explore some advanced CSS tricks and tips to help you master your modern web design

(https://www.lambdatest.com/blog/20-elements-of-modern-web-design/) and development skills in 2024.

TA B L E O F C O N T E N T S

Benefits of Advanced CSS Tricks

Best Advanced CSS tricks and Tips

Frequently Asked Questions

Benefits of Advanced CSS Tricks

CSS tricks can provide many benefits, including improved design and layout of web pages, enabling developers to create more complex responsive
web applications. Overall, advanced CSS tricks can help create more polished and cross-functional websites and web applications.

Several responsive and lightweight CSS frameworks (https://www.lambdatest.com/blog/responsive-lightweight-css-frameworks/)

are frequently in use by developers and designers that make it simpler to add visual elements like forms, buttons, panels, breadcrumbs, etc., and

implement functions. It simplifies the process of creating websites. Regardless of the browser versions, these websites will work efficiently. As a

result, there will be less chance of coding errors during cross browser testing (https://www.lambdatest.com/online-browser-testing).

The availability of ready-made style sheet frameworks substantially speeds up project implementation and simplifies web development. Users may
accomplish the required activities by spending little time studying and immersing themselves in CSS code.

Another benefit is the ability to create a user interface that is both user-friendly and aesthetically pleasing, with the flexibility to change it during
project updates without having to start from scratch.

Best Advanced CSS Tricks and Tips

Let’s start with our list of the cool CSS tricks and tips for 2024.

1. Responsive CSS Grids

While taking care of the responsive design (https://www.lambdatest.com/learning-hub/responsive-design), you need to ensure the grid is

responsive. Responsive CSS grid (https://www.lambdatest.com/blog/css-grid/) is one of the best CSS tricks and tips that offer different ways

of creating a customizable grid, irrespective of the device. The most reliable thing is that the CSS grid operates with equal or unequal column sizes.

Code:

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 2/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
1 <div class="grid">
2 <div class="grid-item"></div>
3 <div class="grid-item"></div>
(https://www.lambdatest.com)
4 <div class="grid-item"></div>
5 <div class="grid-item"></div>
6 <div class="grid-item"></div>
7 <div class="grid-item"></div>
8 <div class="grid-item"></div>
9 <div class="grid-item"></div>
10 <div class="grid-item"></div>
11 <div class="grid-item"></div>
12 <div class="grid-item"></div>
13 <div class="grid-item"></div>
14 <div class="grid-item"></div>
15 <div class="grid-item"></div>
16 <div class="grid-item"></div>
17 <div class="grid-item"></div>
18 <div class="grid-item"></div>
19 <div class="grid-item"></div>
20 <div class="grid-item"></div>
21 <div class="grid-item"></div>
22 <div class="grid-item"></div>
23 <div class="grid-item"></div>
24 <div class="grid-item"></div>
25 <div class="grid-item"></div>
26 <div class="grid-item"></div>
27 <div class="grid-item"></div>
28 <div class="grid-item"></div>
29 <div class="grid-item"></div>
30 <div class="grid-item"></div>
31 <div class="grid-item"></div>
32 <div class="grid-item"></div>
33 <div class="grid-item"></div>
34 <div class="grid item"></div>

Output:

After making the CSS grid responsive, test it for responsiveness. For that, you can leverage LT Browser 2.0, a Chromium-based mobile-friendly

tester (https://www.lambdatest.com/mobile-friendly-tester), to test your CSS grid’s responsiveness to ensure it is automatically adjusted to
different device viewports.

With LT Browser 2.0, you can try the responsiveness of the CSS grid across 50+ pre-installed devices like mobiles, tablets, desktops, and laptops
and leverage some of its features like side-by-side comparison, generate performance reports powered by Google Lighthouse, get JavaScript error
reports, etc.

With this tutorial, you will get a comprehensive overview of the features and functionalities of LT Browser 2.0, a next-gen browser to build, test &
debug mobile websites.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 3/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

LT Browser 2.0 is a chromium based dev browser for faster responsive testing .

Let’s evaluate the browser compatibility of the Responsive CSS Grid property on different desktop and mobile browsers.

2. Vertically Align with Flexbox

There are very few CSS tricks available to vertically center elements in CSS. It has been a pain point for many developers. Vertically aligned with

CSS Flexbox (https://www.lambdatest.com/blog/css-flexbox-tutorial/) is one of the best CSS tricks by which developers can align
effortlessly with the align-items, align-self, and justify-content properties.

Code:

1 <div class="align-vertically">
2 Demonstrating Vertically Align CSS Property!
3 </div>
4
5 .align-vertically {
6 background:black;
7 color: #eff542;
8 display: flex;
9 align-items: center;
10 height: 200px;
11 }

Output:

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 4/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Let’s evaluate the browser compatibility of the Vertically Align with Flexbox property on different desktop and mobile browsers.

3. SVG for Icons and Logos

SVGs means Scalable Vector Graphics, an XML-based image format for vector graphics on the web. Using SVGs is one of the advanced CSS tricks

that offers benefits over PNGs images like higher resolution, faster speed, and better animation quality.

As SVGs are supported by all new browsers and scale across all resolutions, it’s recommended not to incorporate .jpg or .gif images for icons and

logos.

Syntax:

1 .element
2 background-image: url(/images/image.svg);
3 }

Output:

Let’s evaluate the browser compatibility of the SVG for Icons and Logos property on different desktop and mobile browsers.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 5/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

4. Masking

Let’s say you want to use an image but only want to show certain parts of it. You can achieve this using the mask-image property. CSS masking is

among the advanced CSS tricks that allow you to define a mask shape applied to the image. Anything that appears outside the mask shape is cut
out, and the rest is presented. It works pretty much the same as masking in Photoshop.

Anything 100% black in the image mask will be displayed entirely, whereas anything 100% transparent will be completely hidden, and anything in-

between will be partially masked in the image.

You can perform Masking using two ways.

1. Using Gradients (Linear and Radial)

2. Masking with images

Example of Linear Gradient Masking:

1 #masked{
2 -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
3 mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
4 }

The left side is the image’s original image, and the right side is a masked image with a linear-gradient.

Source (https://fineartamerica.com/featured/sunset-on-the-tree-bess-hamiti.html)

Example of Radial Gradient Masking:

1 }#masked{
2 -webkit-mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
3 mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);

In the below image, the left side is the original image, and the right side is a masked image with radial-gradient.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 6/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Example of Masking with Images:

1 #masked{
2 -webkit-mask-image: url(https://images.png);
3 mask-image: url(https://images.png);
4 }

In the below example, a background image is used to mask an image in the selected camera cutout shape.

Source (https://codepen.io/abbeyjfitzgerald/pen/MEGbQO)

Let’s evaluate the browser compatibility of the mask-image property on different desktop and mobile browsers.

5. Shape Outside

Shape-outside is a CSS trick that lets you change the shape of the items wrapped around it instead of being restricted to a rectangular box.

The shape-outside property allows shaping the content to fit the image. It takes a basic shape and applies a shape function to the item. This

property works only for floated elements.

Syntax:

1 shape-outside: values;

Code:

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 7/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
1 <section class="shape-outside">
2 <div class="shape-outside__circle">
3 </div>
(https://www.lambdatest.com)
4 <h2>Shape Outside CSS Property</h2>
5 <p>
6 Morbi tincidunt lectus non feugiat tristique. In blandit ornare odio sit amet cursus. In mollis dictum mollis. Suspendisse sed sagittis
7 </p>
8 </section>
9
10 body {
11 display: flex;
12 }
13
14 .shape-outside {
15 padding-right: 10px;
16 width: 50%;
17 }
18
19 .shape-outside__circle {
20 height: 150px;
21 width: 150px;
22 border-radius: 50%;
23 background-color: #DC143C;
24 margin: 25px 25px 5px 0;
25 float: left;
26 shape-outside: circle();
27 }

Output:

Let’s evaluate the browser compatibility of the shape-outside property on different desktop and mobile browsers.

6. Zoom on Hover

Zoom on hover is a CSS trick that makes web pages more attractive. The zoom-on-hover effect can be used in galleries, selling products where you
need to enlarge the image to have a better view.

The CSS transform (https://www.lambdatest.com/blog/css-transforms-and-transitions-property/) property is used to enlarge images

with your selected scale amount.

Syntax:

1 transform: scale [transition-duration] [transition-timing-function] [transition-delay];

Example:

1 img:hover {
2 transform: scale(1.1);
3 }

Output:

In the below example, the image zooms in on hovering.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 8/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
EDIT ON
HTML CSS Result

(https://www.lambdatest.com)
<div class="wrapper">
<div class="zoom-effect-container">
<div class="image-card">
<img src="https://superdevresources.com/wp-content/uploads/2014/12/lions.jpg"/>
</div>
</div>
<div class="zoom-effect-container">
<div class="image-card">
<img src="https://superdevresources.com/wp-content/uploads/2015/12/peacock.jpg"/>
</div>
</div>
<div class="zoom-effect-container">
Resources

Let’s evaluate the browser compatibility of the zoom property on different desktop and mobile browsers.

7. Scroll Snapping

CSS Scroll Snap (https://www.lambdatest.com/blog/complete-guide-to-css-scroll-snap-for-awesome-ux/) is another CSS trick that

allows the developer to create well-controlled scroll experiences. This property can be used in the gallery section of the web page. Page scrolling in
CSS is controlled by setting a scroll-snap-type property on a container element. The scroll-snap-type decides scrolling has to be done, i.e., either

x or y.

Syntax:

1 scroll-snap-type: [none | x | y] [mandatory | proximity];

In the above syntax, ‘mandatory’ means the browser has to snap to a snap point whenever the user stops scrolling. The proximity is less strict. It
allows the browser to a snap point if it seems appropriate.

Example:

1 .y-scrolling {
2 scroll-snap-type: y mandatory;
3 }

The above example shows scroll-snap-type along the Y-axis with mandatory value.

Code:

1 <!DOCTYPE html>
2 <html lang="en-US">
3 <head>
4 <title>Scroll-snap-type</title>
5 <link href="snap.css" rel="stylesheet">
6 </head>
7 <style>
8 .y-scrolling {
9 scroll-snap-type: y mandatory;
10 }
11 </style>
12 <body>
13 <div class="box y-scrolling">
14 <div>Eat</div>
15 <div>Sleep</div>
16 <div>Code</div>
17 <div>Repeat</div>
18 </div>
19 </body>
20 </html>

Output: Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 9/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
EDIT ON
HTML CSS Result

(https://www.lambdatest.com)
<div class="no-support">
<p>Heads up: It doesn't look like your browser supports scroll snapping! Check <a href="https://caniuse.com/#feat=css-snappoints">Can
I use</a> for current browser support. Maybe try opening this CodePen in a different browser, like Chrome?</p>
</div>
<div class="example-wrapper">
<p>On all examples, scroll slowly to "feel" the snap points.</p>

<p><code>scroll-snap-type: x mandatory;</code></p>

<div class="container x-scroll x-mandatory">

<div class="wrapper">
<div class="element">1</div>
Resources

Let’s evaluate the browser compatibility of the scroll-snap-type property on different desktop and mobile browsers.

8. Variable Fonts

Variable fonts (https://www.lambdatest.com/blog/variable-fonts-cross-browser-compatibility/) are the built-in latest upfront. It’s a

single file comprising every font version a user will need to view the design. While there are only a few lists of variable fonts to work with, it is
growing, and this is where we are going with typing on the web.

We must select a font that supports the feature and a browser that has implemented the font-variation-settings property to implement variable fonts.

Syntax:

1 @font-face {
2 font-family: 'Roboto Flex';
3 src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
4 url('RobotoFlex-VF.woff2') format('woff2-variations');
5 font-weight: 100 1000;
6 font-stretch: 25% 151%;
7 }

Code:

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 10/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
1 <h1>variable<span>fonts</span></h1>
2 $green: #ff0080;
3 $purple: #6e1f58;
(https://www.lambdatest.com)
4 $pink: #ff8c00;
5 body {
6 background: #23074d;
7 overflow: hidden;
8 }
9 @font-face {
10 font-family: "Gingham Variable";
11 src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2")
12 format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff")
13 format("woff");
14 font-weight: 300 700;
15 font-stretch: 1% 150%;
16 }
17 h1 {
18 position: absolute;
19 top: 50%;
20 transform: translate(0, -50%);
21 margin: 0;
22 width: 100%;
23 font-size: 18vw;
24 font-family: "Gingham Variable", BlinkMacSystemFont, sans-serif;
25 font-weight: 700;
26 font-stretch: 150%;
27 color: $pink;
28 white-space: nowrap;
29 text-align: center;
30 transition: font-weight 250ms ease-out, font-stretch 250ms ease-out;
31 text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple,
32 1px 1px 0 $purple, 1px 0px 0px $green, 0px 1px 0px $green, 2px 1px 0px $green,
33 1px 2px 0px $green, 3px 2px 0px $green, 2px 3px 0px $green, 4px 3px 0px $green,
34 3px 4px 0px $green 5px 4px 0px $green 3px 5px 0px $purple

Output:

EDIT ON
HTML SCSS JS Result

<h1>variable<span>fonts</span></h1>

Resources

Let’s evaluate the browser compatibility of the variable fonts on different desktop and mobile browsers.

9. Generate Text Animation

CSS Animation (https://www.lambdatest.com/blog/css-animations-tutorial/) is one of the popular advanced CSS tricks and tips that can
bring creativity, grab the user’s attention, and convey things quickly while improving usability. The way users read and interact with text elements is
Start Free Testing -> (https://accounts.lambdatest.com/register)
changing due to CSS, from hover tweaks to words that float in or scroll on the page.

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 11/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
What was previously a static element can now have a dynamic display. It’s also a relatively popular option for websites with few other creative
elements to draw users. Some of the most popular text animations are
(https://www.lambdatest.com)
Dropping Text.

Typing Text.

Neon Text.

Floating Text.

Rotate Text.

Example:

EDIT ON
HTML CSS Result

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700">

<div class="container">
<div class="typewriter">I'm Front end Developer</div>
</div>

Resources

Let’s evaluate the browser compatibility of the CSS animation on different desktop and mobile browsers.

10. Initial Letter

Initial letter is a CSS trick that selects the first letter of the paragraph and mentions the number of lines occupied by the letter. Usually, it is used to
grab the attention of print media and information sites, news sites, where the first letter of the paragraph is much larger or higher than the rest of the

content.

The initial-letter CSS property spontaneously adjusts the number of lines needed to create the stylized drop and the font size.

The initial-letter property uses the following values:

< number >: refers to the number of lines the letter uses not to accept negative values.

Normal: it is useful only if you want to reset the value if it could be inherited from the cascade and no scaling effect is applied to
the initial letter.

< integer >: determines how many lines should sink when the letter size is preset. The values must be greater than zero; if the
value is not specified, the size value is duplicated and floored to the nearest positive whole number.

Syntax:

1 initial-letter: normal | <number> | <integer>;

Code:
Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 12/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
1 $body-fontsize: calc(80% + 0.35vw);
2 $cap-fallback: calc(1100% + 0.35vw);
3 .intro::first-letter {
(https://www.lambdatest.com)
4 font-size: $cap-fallback;
5 float: left;
6 line-height: 1;
7 margin-top: .2rem;
8 margin-left: -.5rem;
9 @supports (initial-letter: 7) or (-webkit-initial-letter: 7) {
10 -webkit-initial-letter: 7;
11 initial-letter: 7;
12
13 color: hsl(41, 68%, 51%);
14 margin-left: unset;
15 }
16 }
17 main,
18 header {
19 margin: 0 auto;
20 max-width: 68vw;
21 }
22 main {
23 column-count: 2;
24 column-gap: 3vw;
25 }
26 .excerpt {
27 font-size: 1.3rem;
28 font-weight: 600;
29 line-height: 1.8;
30 margin: 0 0 1.5rem;
31 }
32 h1 {
33 font-size: 6.4rem;
34 font weight: 200;

Output:

Let’s evaluate the browser compatibility of the initial-letter property on different desktop and mobile browsers.

11. Logical Properties and Values

Logical Properties and Values is a CSS trick and technique that brings in logical properties and values that help make it possible to manage the look

through logical directions and dimension mappings. Logical properties and values use terms such as “block” and “inline” to express the direction in
which they flow.

The Logical Properties and Values specification identifies mappings for physical values in their logical relations.

The inline dimension is defined along a text line and is written in the type of writing used. So, in any English file, the narrative is horizontal. From left

to right, in an Arabic document, writing is also horizontal but from right to left. If we consider a Japanese file, the inline dimension is now vertical,
and the writing mode runs vertically.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 13/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
The block dimension relates to the sequence in which the blocks are seen on the page. In English and Arabic, they are executed vertically, while in
any vertical writing mode, they are run horizontally.
(https://www.lambdatest.com)
Syntax:

1 Block-size: values;
2 Inline-size: values;

Code:

1 <div class="controls">
2 <select id="writingMode">
3 <option value="horizontal-tb">horizontal-tb</option>
4 <option value="vertical-lr">vertical-lr</option>
5 <option value="vertical-rl">vertical-rl</option>
6 </select>
7 </div>
8 <div id="container">
9 <div class="box logical">
10 The block-size is 100 pixels, and inline-size 200px.
11 </div>
12 <div class="box physical">
13 The block height is 100 pixels,and width is 200px.
14 </div>
15 </div>
16 * { box-sizing: border-box; }
17 html {
18 font: 1.2em Helvetica, sans-serif;
19 }
20 body {
21 padding: 40px;
22 background-color: #fff;
23 color: rgb(108,91,123);
24 }
25 .controls {
26 background-color: rgba(0,0,0,.1);
27 padding: 10px;
28 border-radius: .5em;
29 border: 1px solid rgba(0,0,0,.2);
30 margin: 0 0 2em 0
31 }
32 .controls select {
33 font-size: .9em;
34 }

Output:

Let’s evaluate the browser compatibility of the Logical properties on different desktop and mobile browsers.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 14/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

12. CSS Subgrids

(https://www.lambdatest.com)
Next technique in our list of advanced CSS tricks is CSS Subgrids (https://www.lambdatest.com/blog/what-is-css-subgrid/). It means that

in addition to the direct children of a grid, the container becomes a grid item, and we will be able to create a grid on a grid item and have it use the

column and row paths of the parent. For example, you could create a multiple-column grid for your page and use that to line up items nested in the
markup.

Syntax:

1 .grid
2 {
3 display: grid; grid-template-columns: 1fr 2fr 1fr 2fr; }
4 .item { grid-column: 2 / 5; display: grid; grid-template-columns: subgrid;
5 }

In the above CSS syntax, the parent element is set to display: grid, which means there is a four-column grid. The child item with a class of items is
placed on the grid from column line 2 to column line 5, which means it occupies three tracks of the parent grid.

Using the value subgrid in place of a tracklisting for grid-template-columns on the child item, we tell its grid to use the tracks from the parent.
Therefore, any child of an item will use the sizing of column tracks as defined on the parent grid.

Code:

1 <div class="wrapper">
2 <div class="box a">A</div>
3 <div class="box b">B</div>
4 <div class="box c">C</div>
5 <div class="box d">
6 <div class="box e">E</div>
7 <div class="box f">F</div>
8 <div class="box g">G</div>
9 </div>
10 </div>
11 body {
12 margin: 40px;
13 }
14 .wrapper {
15 display: grid;
16 grid-gap: 10px;
17 grid-template-columns: repeat(4, 1fr ) ;
18 grid-template-rows: repeat(3, auto);
19 background-color: #fff;
20 color: #444;
21 }
22 .box {
23 background-color: #444;
24 color: #fff;
25 border-radius: 5px;
26 padding: 20px;
27 font-size: 150%;
28 }
29 .box .box {
30 background-color: #ccc;
31 color: #444;
32 }
33 .a {
34 grid column: 1 / 3;

Output:

EDIT ON
HTML CSS Result

<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
</div>
</div>

Resources

Let’s evaluate the browser compatibility of CSS Subgrids on different desktop and mobile browsers.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 15/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

13. Smart Quotes in HTML/CSS

Smart quotes is an another CSS trick that aids in modern web design by increasing readability and delivering a great user experience.

Code:

1 <q>Smart quotes is the new trend in 2021!</q>

2
3 q {
4 quotes: "“" "”";
5 font-size: 2rem;
6 }

Output:

14. Comma-Separated Lists

Comma-separated lists are an advanced CSS trick and technique to represent the data in bullet point format, which helps to display the content in an

organized way. Nowadays, it is used by many developers.

The CSS code below will add commas on every item of an unordered list, excluding the last one. It can be done by using the property :not(:last-

child) to ensure that a comma will not be applied to the last element.

Syntax:

1 ul > li:not(:last-child)::after
2 {
3 content: ",";
4 }

Code:

1 <ul>
2 <li>LambdaTest</li>
3 <li>Advanced CSS Tricks</li>
4 <li>in 2023</li>
5 </ul>
6
7 body{
8 font-family: Nurito;
9 font-size:22px;
10 }
11
12 ul > li:not(:last-child)::after {
13 content: ",";
14 }

Output:

To test the browser compatibility of your Comma-Separated Lists, there are several cloud-based testing platforms available in the market. One such
Start Free Testing -> (https://accounts.lambdatest.com/register)
platform is LambdaTest.

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 16/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
LambdaTest is an AI-powered test orchestration and execution platform that lets you run manual and automated tests at scale on over 3000 real

devices , browsers, and OS combinations. It enables you to check CSS across browsers seamlessly over desktop and mobile by performing cross
(https://www.lambdatest.com)
browser compatibility (https://www.lambdatest.com/learning-hub/cross-browser-compatibility) testing.

(https://accounts.lambdatest.com/register)

15. Feature Query

CSS has even created a method to test its browser support of CSS (https://www.lambdatest.com/blog/detailed-guide-to-css-supports-

in-browsers/) features with Feature Queries. A Feature Query is a CSS trick that usually acts the same way as a Media Query, except for a few
things like instead of asking the browser something related to the device being used to view the site.

A Feature Query questions the browser if it supports a particular CSS feature. Thereby making it easier to use new features in a better, increasingly

enhanced way.

Let’s evaluate the browser compatibility for CSS feature queries on different desktop and mobile browsers.

In the below screenshots, we will implement different CSS properties over the Netlify platform and try to access them on other browsers.

Google Chrome(Non-compatible):

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 17/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Firefox (Compatible):

16. Background Repeat

CSS background is one of the most used advanced CSS tricks; however very rarely used by developers. Using multiple backgrounds still needs to be
well-known among all developers.

The background-repeat property sets how a background image will be repeated. It is used in conjunction with the background-image property. We

can repeat the background image along the horizontal axis or vertical axis or not repeat it at all.

By default, a background image is repeated both vertically and horizontally.

Syntax:

1 background-repeat: value;

Property Values:

Value Description
Start Free Testing -> (https://accounts.lambdatest.com/register)
repeat The background image will be repeated both vertically and horizontally.

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 18/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

repeat-x The background image will be repeated horizontally only.

(https://www.lambdatest.com)
repeat-y The background image will be repeated vertically only.

space The background image will be repeated as many times as it will fit, but it is not clipped.

round The background image will stretch or shrink to avoid clipping and to remove gaps.

no-repeat The background image will not be repeated.

initial Set this property to its default value.

CSS Example:

1 body {
2 background-image: url("images.png");
3 background-repeat: repeat;
4 }

Code:

1 <!DOCTYPE html>
2 <html lang="en-US">
3 <head>
4 <title>background-repeat property</title>
5 <link href="repeatCase.css" rel="stylesheet">
6 </head>
7 <body>
8 <h2>background-repeat: repeat; </h2>
9 <div id="repeat"></div>
10
11 <h2>background-repeat: repeat-x;</h2>
12 <div id="repeat-x"></div>
13
14 <h2>background-repeat: repeat-y;</h2>
15 <div id="repeat-y"></div>
16
17 <h2>background-repeat: space;</h2>
18 <div id="space"></div>
19
20 <h2>background-repeat: round;</h2>
21 <div id="round"></div>
22
23 <h2>background-repeat: no-repeat;</h2>
24 <div id="no-repeat"></div>
25
26 <h2>background-repeat: initial;</h2>
27 <div id=""></div>
28 </body>
29 </html>

Output:

Let’s evaluate the browser compatibility of the background-repeat property on different desktop and mobile browsers.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 19/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

17. CSS Gradients

CSS Gradients (https://www.lambdatest.com/blog/complete-guide-to-cross-browser-compatible-css-gradients/) are considered one

of the advanced CSS tricks. Back in the day, web designers could only create gradient backgrounds using Photoshop and then display them on

websites using the background-image property.

With CSS Gradients, you can create gradients in HTML/CSS, resulting in fewer resources, faster loading times, and a better user experience.

Syntax:

1 body{
2 margin: 0;
3 padding: 0;
4 height: 100vh;
5 background-image: linear-gradient(-225deg,#3498db 0,#9b59b6 29%,#e74c3c 67%,#f1c40f 100%);
6 background-size: 500% 500%;
7 animation: bg 8s linear infinite;
8 }
9 @keyframes bg {
10 50%{
11 background-position: 100% 100%;
12 }
13 }

Example:

EDIT ON
HTML CSS JS Result

<div class="d-flex flex-column justify-content-center w-100 h-100">

<div class="d-flex flex-column justify-content-center align-items-center">

<h1 class="fw-light text-white m-0">Pure CSS Gradient Background Animation</h1>
<div class="btn-group my-5">
<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-
background-animation.zip" class="btn btn-outline-light" aria-current="page"><i class="fas fa-file-download me-2"></i> SOURCE CODE</a>
<a href="https://codepen.io/P1N2O/full/pyBNzX" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a>
</div>
<a href="https://manuel.pinto.dev" class="text-decoration-none">
<h5 class="fw-light text-white m-0">— Pen by Manuel Pinto —</h5>
</a>
Resources

Let’s evaluate the browser compatibility of the CSS Gradients property on different desktop and mobile browsers.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 20/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

18. Truncate Strings

(https://www.lambdatest.com)
It is a common problem encountered by web designers and front-end web developers when the text is too large for its container. Truncate Strings is

yet another advanced CSS trick to solve this problem.

Syntax

1 .truncate {
2 width: 250px;
3 white-space: nowrap;
4 overflow: hidden;
5 text-overflow: ellipsis;
6 }

The above .truncate class defines a fixed width and prevents the text from overflowing the container. Further, the text-overflow: ellipsis;

automatically adds an ellipsis at the end of the text to indicate that it has been truncated.

Output:

EDIT ON
HTML CSS Result

<h1>
This little piggy went to market and this little piggy stayed home.
</h1>

Resources

Wrapping up
And that’s a wrap for our tutorial on CSS advanced tricks and techniques. It’s awesome to play around with CSS and learn new advanced tricks.Hope
these cool CSS tricks and tips will certainly help you create mind-blowing websites. In case you are intrigued to learn more about CSS and its

properties, check out this CSS Cheat Sheet (https://www.lambdatest.com/learning-hub/css-cheat-sheet).

If you like the advanced CSS tricks and seek knowledge on others that haven’t been mentioned above, feel free to share them with us in the

comment section below.

(https://accounts.lambdatest.com/register)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 21/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)
Frequently Asked Questions (FAQs)

What are the properties of advanced CSS?

Flexbox and CSS Grid are the two essential properties of advanced CSS. In a nutshell, Flexbox and CSS Grid are
layout systems that make it easy to adapt to various devices and screen sizes, organize web pages, and control
where objects are placed and aligned.

What are CSS tricks?

CSS tricks help developers and designers enhance website and web pages’ visual appearance and layout.
Some common CSS tricks include CSS Grid, CSS Flexbox, Masking, and more.

What are the five capabilities of CSS?

CSS can independently define color, font, text alignment, size, borders, spacing, layout, and many other
typographic features for on-screen and printed views.

How can I improve my CSS?

Here are some tips for improving your webpage CSS:

1. Concentrate on maintaining efficient organization in your CSS to enhance your website. To make it simpler to understand
and update, use comments and put relevant styles together.

2. To further increase structure and effectiveness, think about utilizing a CSS preprocessor like SASS or LESS. Use CSS
frameworks like Foundation or Bootstrap to assure uniformity and save time.

Author’s Profile

Start Free Testing -> (https://accounts.lambdatest.com/register)

(https://www.lambdatest.com/blog/author/mythiliraju273/)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 22/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

Mythili Raju
Mythili R works as a content writer
(https://www.lambdatest.com) and digital marketing executive at LambdaTest. Having been previously trained in Content and Social Media
Marketing, she loves delving into the latest tech trends and sharing her insights.

Blogs: 18 (https://twitt
(https://www.linked
raju-
903b88200?
miniProfileUrn=urn

Got Questions? Drop them on LambdaTest Community.

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 23/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 24/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

(https://www.airmeet.com/e/8bf33740-41e6-11ee-a420-4b6bb1bf5f61)

Related Articles

(https://www.lambdatest.com/blog/collaboration-tools/)

43 Best Collaboration Tools & Software For Teams [2024] (https://www.lambdatest.com/blog/collaboration-

tools/)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 25/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Salman Khan
August 19, 2024

(https://www.lambdatest.com/blog/author/salmankhan/)

127271 Views
51 Min Read

Web Development (https://www.lambdatest.com/blog/category/web-development/) | Cross Browser Testing (https://www.lambdatest.com/blog/category/cross-browser-

testing/) |

(https://www.lambdatest.com/blog/css-grid-best-practices/)

CSS Grid Best Practices: Guide With Examples (https://www.lambdatest.com/blog/css-grid-best-practices/)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 26/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Tahera Alam
August 13, 2024

(https://www.lambdatest.com/blog/author/taheraalam/)

88439 Views
13 Min Read

Web Development (https://www.lambdatest.com/blog/category/web-development/) | LambdaTest Experiments (https://www.lambdatest.com/blog/category/lambdatest-

experiments/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) |

(https://www.lambdatest.com/blog/mobile-website-design/)

23 Best Mobile Website Design Examples and Best Practices (https://www.lambdatest.com/blog/mobile-

website-design/)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 27/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Nazneen Ahmad
August 8, 2024

(https://www.lambdatest.com/blog/author/nazneenahmad/)

38635 Views
15 Min Read

Web Development (https://www.lambdatest.com/blog/category/web-development/) |

(https://www.lambdatest.com/blog/css-sibling-selectors/)

Understanding CSS Sibling Selectors: A Beginner’s Guide (https://www.lambdatest.com/blog/css-sibling-

selectors/)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 28/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Vincent Chosen
July 30, 2024

(https://www.lambdatest.com/blog/author/vincentchosen/)

161466 Views
14 Min Read

LambdaTest Experiments (https://www.lambdatest.com/blog/category/lambdatest-experiments/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) | Web

Development (https://www.lambdatest.com/blog/category/web-development/) |

(https://www.lambdatest.com/blog/css-multiple-transform/)

How to Apply CSS Multiple Transform Properties (https://www.lambdatest.com/blog/css-multiple-transform/)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 29/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Ken Anele Marvel

July 25, 2024

(https://www.lambdatest.com/blog/author/ken-anele-marvel/)

185432 Views
22 Min Read

LambdaTest Experiments (https://www.lambdatest.com/blog/category/lambdatest-experiments/) | Tutorial (https://www.lambdatest.com/blog/category/tutorial/) | Web

Development (https://www.lambdatest.com/blog/category/web-development/) |

(https://www.lambdatest.com/blog/accessibility-vs-usability/)

Accessibility vs Usability: Key Differences (https://www.lambdatest.com/blog/accessibility-vs-usability/)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 30/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Nazneen Ahmad
July 19, 2024

(https://www.lambdatest.com/blog/author/nazneenahmad/)

87615 Views
11 Min Read

Web Development (https://www.lambdatest.com/blog/category/web-development/) | Accessibility Testing (https://www.lambdatest.com/blog/category/accessibility-

testing/) | Usability Testing (https://www.lambdatest.com/blog/category/usability-testing/) |

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

(https://accounts.lambdatest.com/login/google)
Start free with Google Start free with Email (https://accounts.lambdatest.com/register)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 31/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)

Products & Features

Automation Testing Cloud Cross Browser Testing Real Device Cloud Mobile App Testing
(https://www.lambdatest.com/automation- (https://www.lambdatest.com/cross-
(https://www.lambdatest.com/real-
(https://www.lambdatest.com/mobile-
cloud) Kane browser-testing) device-cloud) app-testing)
AI - (https://www.lambdatest.com/kane-
Testing ai)
Agent

AI-Powered Testing LT Browser LT Debug Local Page Testing

(https://www.lambdatest.com/ai- HyperExecute (https://www.lambdatest.com/lt- (https://www.lambdatest.com/lt- (https://www.lambdatest.com/local-
testing) (https://www.lambdatest.com/hyperexecute)
browser) debug) page-testing)

Automated Screenshots Geo-Location Testing Accessibility Testing Responsive Testing Localization Testing
(https://www.lambdatest.com/automated-
(https://www.lambdatest.com/geolocation-
(https://www.lambdatest.com/accessibility-
(https://www.lambdatest.com/responsive-
(https://www.lambdatest.com/localizat
screenshot) testing) testing) test-online) testing)

Visual Regression Testing Test Analytics

(https://www.lambdatest.com/visual-
Integrations (https://www.lambdatest.com/test-
regression-testing) (https://www.lambdatest.com/integrations)
analytics) Professional (https://www.lambdatest.com/professional-
Services services)

Test on

List of Browsers Internet Explorer Firefox Chrome

(https://www.lambdatest.com/list-(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
iPhone (https://www.lambdatest.com/test-
of-browsers) on-internet-explorer-browsers) on-firefox-browsers) on-chrome-browsers)
15 on-iphone-15)

Safari Browser Online Microsoft Edge Opera Yandex Mac OS

(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
on-safari-browsers) on-edge-browsers) on-opera-browsers) on-yandex-browsers) on-macos-browsers)

Mobile Devices iOS Simulator Android Emulator Browser Emulator

(https://www.lambdatest.com/test-
(https://www.lambdatest.com/test-
(https://www.lambdatest.com/android-
(https://www.lambdatest.com/browser-
on-mobile-devices) on-ios-devices) emulator-online) emulator-online)

Browser Automation

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 32/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest
Selenium Testing Selenium Grid Cypress Testing Playwright Testing Puppeteer Testing
(https://www.lambdatest.com/selenium-
(https://www.lambdatest.com/selenium-
(https://www.lambdatest.com/cypress-
(https://www.lambdatest.com/playwright-
(https://www.lambdatest.com/puppete
automation) grid-online)
(https://www.lambdatest.com) testing) testing) testing)

Taiko Testing
(https://www.lambdatest.com/taiko-
automation)

Mobile App Automation

Appium Testing Espresso Testing XCUITest Testing

(https://www.lambdatest.com/appium-
(https://www.lambdatest.com/espresso-
(https://www.lambdatest.com/xcuitest-
mobile-testing) automation-testing) app-testing)

Resources

Product Updates
Blogs Community Certifications (https://www.lambdatest.com/blog/cat
TestMu (https://www.lambdatest.com/blog/)
(https://community.lambdatest.com)
(https://www.lambdatest.com/certifications/)
updates/)
(https://www.lambdatest.com/testmuconf-
2025
2025)
Conference

FAQ Web Technologies

Newsletter Webinars Videos (https://www.lambdatest.com/support-
(https://www.lambdatest.com/web-
(https://www.lambdatest.com/newsletter/)
(https://www.lambdatest.com/webinar/)
(https://www.lambdatest.com/video/)
faq) technologies)

Automation Testing Advisor Software Testing [Glossary] Free Online Tools Mobile Testing Advisor
(https://www.lambdatest.com/automation-
(https://www.lambdatest.com/learning-
(https://www.lambdatest.com/free-
(https://www.lambdatest.com/mobile-
Sitemap
testing-advisor) hub/glossary) online-tools) testing-advisor/) (https://www.lambdatest.com/sitemap.

Status
(https://status.lambdatest.io)

Company

About Us Careers Customers Press

(https://www.lambdatest.com/about)
(https://www.lambdatest.com/career)
(https://www.lambdatest.com/customers/)
(https://www.lambdatest.com/press/)
Achievements (https://www.lambda

Open Source Write for Us

Reviews Community & Support Partners (https://www.lambdatest.com/open-
(https://www.lambdatest.com/lambdate
(https://www.lambdatest.com/reviews)
(https://www.lambdatest.com/community)
(https://www.lambdatest.com/partners/)
source) write-for-us)

Become an Affiliate Terms of service

(https://www.lambdatest.com/affiliate-
(https://www.lambdatest.com/legal/terms-
Privacy Policy Trust Team
program-partnership) of-service) (https://www.lambdatest.com/legal/privacy)
(https://www.lambdatest.com/trust)
(https://www.lambdatest.com/team)

Contact Us
(https://www.lambdatest.com/contact-
us)

Learning Hub

Cypress Tutorial
Selenium Tutorial (https://www.lambdatest.com/learning-
Playwright Tutorial Appium Tutorial Jest Tutorial
(https://www.lambdatest.com/selenium)
hub/cypress-tutorial) (https://www.lambdatest.com/playwright)
(https://www.lambdatest.com/appium)
(https://www.lambdatest.com/jest)

More Learning Hubs

(https://www.lambdatest.com/learning-
hub)

What’s New

Changelog
(https://changelog.lambdatest.com)

July'24 Updates
(https://www.lambdatest.com/blog/july-
Coding Jag - Issue 205
Future Test Test on 2024-updates/) (https://www.lambdatest.com/newslett
of QA (https://www.lambdatest.com/future-of-quality-assurance-survey?
on (https://www.lambdatest.com/test-
Samsung
(https://www.lambdatest.com/test-
Survey utm_source=navbar_CTA&utm_medium=organic&utm_campaign=dec_06&utm_term=sk&utm_content=survey_report)
iPhone on-iphone-15) Galaxy
on-samsung-galaxy-s24)
Report 15 S24
Series

ExpectedConditions In Selenium
[Blog]
(https://www.lambdatest.com/blog/expected-
Python Assert [Hub] Appium 101 [Certification]
Kayak [Case Study] conditions-in-selenium- (https://www.lambdatest.com/learning-
(https://www.lambdatest.com/certifications/appium-
(https://www.lambdatest.com/customers/kayak)
examples/) hub/python-assert) 101)

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 33/34
8/26/24, 7:31 PM 18 Advanced CSS Tricks And Tips [2024] | LambdaTest

(https://www.lambdatest.com)
Deliver unparalleled digital experience with our Next-Gen, AI-powered testing cloud platform. Ensure exceptional user experience across all devices and
browsers.

(https://accounts.lambdatest.com/login/google)
Start free with Google Start free with Email (https://accounts.lambdatest.com/register)

LambdaTest is #1 choice for SMBs and Enterprises across the globe.

© 2024 LambdaTest. All rights reserved

Cross Browser Testing Cloud Built With For Testers

Start Free Testing -> (https://accounts.lambdatest.com/register)

https://www.lambdatest.com/blog/advanced-css-tricks-and-techniques/ 34/34