Forem: Alex Anie

How to Handle Dropdowns Using the Cypress .select() Command

Alex Anie — Tue, 03 Jun 2025 14:49:50 +0000

Dropdowns can be challenging to handle due to dynamic options, inconsistent values, or differences between displayed text. In Cypress, you can overcome this challenge using the .select() command.

It allows you to handle (or select) dropdowns by visible text, value, or index. The Cypress .select() command is a built-in function that interacts with and performs tests on the selected elements in a web application.

In this blog, you will learn everything you need to know about using the Cypress .select() command.

What Is Cypress .select() Command?

The Cypress .select() command is a built-in function that is used to select a tag within the WebElement. It retrieves the selected tags and performs tests on them.

.select(value)
.select(values)
.select(value, options)
.select(values, options)

The Cypress .select() command takes in two arguments, the first being value, which can be any of the following; value, index, or text content of the tag.

The second argument is optional but can be specified as a configuration object. For example, (force: true) can be used to undo the default behavior of the .select() command.

HTML:

<select>
 <option value="one">apples</option>
 <option value="two">oranges</option>
 <option value="three">bananas</option>
</select>

JavaScript:

cy.get('select').select(0).should('have.value', 'one')

Here, we get the WebElement and pass in an integer with a value of zero; then, we assert that the selected WebElement should have a value of “one” as a means of validation before test execution.

The Cypress .select() command is used to handle both types of dropdowns: static and dynamic.

How to Handle Static Dropdowns?

Static dropdowns are a type of select control in which the selection content is loaded in the browser as soon as the page loads. They are usually hard-coded into the HTML of the web page.

There are different ways to select static dropdown options using the Cypress .select() command, including selecting by index, value, or text.

Select by Index

Select by index is one of the methods that can be used to select tag within the element. The index refers to an integer that represents the number of tags within the parent element. The first element is identified as 0, and then the second as 1, and so on.

To see this in action, let’s use the LambdaTest eCommerce Playground.

Open the LambdaTest eCommerce Playground on your web browser.
Press the Tab with F12 on your keyboard to launch the DevTools.

#entry_212434 #input-sort-212434

Copy the above CSS selector and press CTRL + F. Then, paste the CSS selector in the find box indicated by the red box.

This should target and select the right WebElement as highlighted in the yellow color below:

After identifying the selected element, run the Cypress test script below to execute the test case:

describe('Select the index', () => {
    it('select the option tag with an of 1', () => {
      cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=9')
      cy.get('#entry_212434 #input-sort-212434').select(1)

    // Wait for the page to update or stabilize
    cy.url().should('include', 'sort=order_quantity')

    // Assert the selected option's text is 'Best sellers'
    cy.get('#entry_212434 #input-sort-212434 option:selected')
      .should('have.text', 'Best sellers')
    })
  })

Your test run should be indicated as shown below:

In the image above, the Best Sellers option is selected in the select control.

Select by Value

Selecting a dropdown by value is very similar to selecting an element by index. Instead of passing integers as value to the .select() command, the value property of the tag is used instead.

describe('Select web element by value', () => {
    it('Select the option element by the value attribute', () => {
      cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=9')
      cy.get('#entry_212434 #input-sort-212434')
      .select('https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=9&sort=p.viewed&order=DESC')
    })
  })

The code above used the .select() command to interact with the WebElement and retrieve the tag with the value Popular text.

Here, the WebElement uses the value to choose the Popular option, which corresponds to the text displayed in the dropdown. The test simulates selecting the most popular items on the Canon product list by interacting with the dropdown element.

Select by Text

To select an element by text, the .select() command received the text content as an argument.

describe('Select web element by Text', () => {
    it('Select the option tag with a Newest', () => {
      cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=9')
      cy.get('#entry_212434 #input-sort-212434')
      .select('Newest')
    })
  })

Here, the text content of the element Newest is passed to the .select() command. This allows Cypress to retrieve the WebElement associated with Newest and then perform a test on it.

From the image above, the select control selected the element with the text content of the Newest element.

How to Handle Dynamic Dropdowns?

Dynamic dropdowns are selection controls in which the options are rendered dynamically depending on the content or user search input.

Initially, the _ _elements are not present when the page first loads. Instead, the dropdown waits for the user’s input or an event to trigger before it loads the options dynamically into the page.

Cypress sends requests by passing text into the input control. It then waits for the content to load on the page before interacting with it.

To handle dynamic dropdowns in Cypress, you can use .contains() and .each() commands.

.contains() Command

The .contains() command in Cypress retrieves the DOM element containing the text passed in. It can take more than one argument.

Syntax:

.contains(content)
.contains(content, options)
.contains(selector, content)
.contains(selector, content, options)

// getting web elements that contain
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

// usage
cy.get('.nav').contains('About') 
cy.contains('Hello')

To demonstrate, we will leverage the Cypress .contains() command to dynamically interact with dropdowns on a web page.

We will use the LambdaTest eCommerce Playground. When a user inputs “iPhone” into the navigation search bar, a list of matching product items is displayed as clickable links within the dropdown.

The Cypress .contains() command is used to assert that the search query is present within the returned product list and, if found, triggers a click action on the corresponding item. This approach is particularly useful for automating the testing of dynamic dropdowns and validating that search functionality behaves as expected.

  describe('Dynamic Dropdown Test', () => {
    it('should select a specific option from a dynamically loaded dropdown', () => {
      // Step 1: Visit the page  cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=common/home');  // Replace with your actual page URL

      // Step 2: Click on the dropdown to trigger the loading of dynamic options
      cy.get('#entry_217822 > div input[placeholder="Search For Products"]').click();  // Adjust selector for the dropdown

      // Step 3: Wait for the dropdown options to be visible (if required)
      cy.get('#entry_217822 > div input[placeholder="Search For Products"]') // Selector for the dropdown options container
        .should('be.visible');

      // Step 4: Optionally filter options by typing in the dropdown's input field
      cy.get('#entry_217822 > div input[placeholder="Search For Products"]').type('iPod Touch'); // Adjust if needed for input

      // Step 5: Select an option dynamically
      cy.contains('#search > div.search-input-group.flex-fill > div.dropdown > ul li', 'iPod Touch') // Adjust selector for dropdown item
        .click();

      // Step 6: Assert that the correct option is selected
      cy.get('#entry_217822 > div input[placeholder="Search For Products"]').should('have.value', 'iPod Touch');
    });
  });

Output:

.each() Command

The .each() command in the dynamic dropdown iterates through the elements that match the specified text and provides an interface to interact with the selected WebElement.

Syntax:

cy.get('ul>li').each(($el, index, $list) => {
 // $el is a wrapped jQuery element
 if ($el.someMethod() === 'something') {
   //Wrap this element so we can
   // use cypress commands on it
   cy.wrap($el).click()
 } else {
   // do something else
 }
})

Here, the below test script loads the specified web address and retrieves the DOM element of the input tag on the navbar.

describe('Dynamic Dropdown Test', () => {
    it('should select a specific option from a dynamically loaded dropdown', () => {
      // Step 1: Visit the page
      cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=common/home');  // Replace with your actual page URL

      // Step 2: Click on the dropdown to trigger the loading of dynamic options and type the text "iPod"
      cy.get('#entry_217822 > div input[placeholder="Search For Products"]').click().clear().type('iPod');  

      // Step 4: iterate over the the returned nodelist and check if "Nano" text exit and click it if Yes
      cy.get('#search > div.search-input-group.flex-fill > div.dropdown > ul li').each(($el, index, $list)=>{
        cy.log($el.text())
        if($el.text() === "Nano"){
            cy.wrap($el).click()
        }
      })
    });
  });

It clicks on the input tag and types the iPod text. Then it iterates over all the dynamic dropdowns and checks if the element that contains iPod matches the content Nano, and if this is true, a click operation is performed.

Advanced Use Cases of Cypress .select() Commands

When handling dropdowns, some WebElements are hidden or disabled by default, making them difficult to retrieve with the .select() command in Cypress.

Let’s look at how to handle disabled and hidden dropdowns.

Disabled Dropdowns

Disabled dropdowns are select controls set to disable using the disabled property in HTML, or :disabled CSS pseudo-class. Disabled elements prevent users from interacting with the specified WebElement.

When elements are set to disabled, it stops functioning as usual and does not respond to mouse input, keyboard events, or any other user-stimulated interaction. However, when using the Cypress .select() command, disabled elements are, by default, turned off as false. This means it cannot be selected with the Cypress .select() command.

To bypass this, the Cypress .select() command provides a second argument called force object. The force object takes in a boolean value as true to enable Cypress to select the disabled element on the DOM.

<section class="iphones" id="iphones">
<h1>Types of iPhone</h1>
<section id="iphone-versions">
    <label for="select-version">Choose an iPhone:</label>
            <select name="iPhones" id="select-version" disabled>
                <option value="">--Please choose an option--</option>
                <option value="iPhone-8">iPhone 8</option>
                <option value="iPhone-XR">iPhone XR</option>
                <option value="iPhone-11" >iPhone 11</option>
                <option value="iPhone-12">iPhone 12</option>
                <option value="iPhone-13">iPhone 13</option>
                <option value="iPhone-14">iPhone 14</option>
            </select>
</section>
</section>

Here, we have a select WebElement with a specified disabled element to prevent user interactions.

The WebElements with a disabled property specified, can not be accessed by Cypress. This is the default behavior in Cypress to fix this.

The Cypress .select() command is set to receive a second argument as {force: true}. When the {force: true} property is applied to an element, Cypress interacts with the element directly without enabling it or removing the disabled property in order to perform a test on it.

describe('Force Select an Element', () => {
    it('Force select a disabled element', () => {
      cy.visit('https://cdpn.io/pen/debug/MYgXLQy?authentication_hash=LQkExWmOvBxA')


      cy.get('#iphone-versions #select-version')


      .select('iPhone 11', {force: true})


      .invoke('val').should('eq', 'iPhone-11')
    })
  })

From the code above, the .select() command received a second argument as force and set its value to true. This enables the Cypress .select() command to interact with the disabled element while it’s still disabled or hidden.

Output:

Hidden Dropdowns

Hidden WebElements are HTML elements styled with display: none in CSS, making them invisible on the web page.

In Cypress, hidden elements are typically disabled from interaction. However, to interact with a hidden element, you can use the {force: true} option, allowing Cypress to forcefully interact with the specified element.

<section class="mac-book" id="mac-book">
<h1>Mac Book models released</h1>
<section id="mac-book-models">
    <label for="select-version">Choose a Mac Book:</label>
            <select name="mac-book" id="select-version" style="display: none;">
                <option value="">--Please choose an option--</option>
                <option value="iMac-Pro">iMac Pro (27-inch)</option>
                <option value="MacBook-Air">MacBook Air (Retina, 13-inch)</option>
                <option value="Mac-Pro" >Mac Pro</option>
                <option value="Mac-mini">MacBook Pro</option>
                <option value="Mac-Studio">Mac Studio</option>
                <option value="MacBook-Air">MacBook Air</option>
            </select>
</section>
</section>

The code above demonstrates a element with its display property set to none, which hides both the element and its child tags, preventing them from appearing on the web page.

Here, the element is set to display: none, which automatically removes the element from the DOM. In this case, the element becomes hidden from users and, as a result, stops Cypress from interacting with it.

To stop the behavior, {force: true} option is set to the .select() command, allowing Cypress to interact with the hidden element.

describe('Force Select an Element', () => {

    it('Force select a hidden element', () => {
      cy.visit('https://cdpn.io/pen/debug/dPbjbwK?authentication_hash=nqAwvJdQxbWr')

      cy.get('#mac-book-models #select-version')

      .select('Mac Studio', {force: true})

      .invoke('val').should('eq', 'Mac-Studio')
    })
  })

Output:

Select Multiple Elements

The Cypress .select() command can simultaneously select more than one . This is very useful as it lets you perform multiple test cases on numerous WebElements.

To interact with multiple elements at once, the Cypress .select() command accepts additional arguments in the form of multiple values. These values correspond to the text content of the tags that Cypress needs to select.

describe('Select multiple element', () => {
    it('Select more than one option web element', () => {
      cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=product/manufacturer/info&manufacturer_id=9')
      cy.get('#entry_212434 #input-sort-212434')


      .select(['Default'], ['Best sellers'], ['Popular'])

    })
  })

Output:

The Cypress .select() command selects the options passed as an argument starting from the Default option.

The above Cypress tests for handling dropdowns are run on the local grid. However, for better scalability and reliability, you can harness the capabilities offered by cloud grids such as LambdaTest.

LambdaTest is an AI-native test execution platform that lets you run tests on the Cypress cloud grid. It offers scalability, intelligent debugging, and AI-driven optimizations to streamline test automation.

Conclusion

The Cypress .select() command is a built-in function that interacts and runs tests on the WebElement and dynamic dropdown in the web application. The WebElement or dynamic dropdown are web controls that provide a menu or list of options for users on the web.

The .select() command can interact with dropdowns by their indexes, values, or text content. It can also run tests on multiple WebElements. However, to perform dynamic selection, more advanced techniques are required, such as .contains() and .each() Cypress commands.

35 Best Bootstrap Carousel Examples for 2024

Alex Anie — Fri, 15 Mar 2024 14:40:57 +0000

Liquid syntax error: Tag '{% https://codepen.io/ocxigin/pen/NWoBeGN %}' was not properly terminated with regexp: /\%\}/

Centering an Image in CSS: A Detailed Guide

Alex Anie — Wed, 13 Mar 2024 18:58:07 +0000

Images are widely used on websites and play an important role in helping users understand and find different types of information on the web. Therefore, proper alignment of images on the websites is crucial to avoid issues like overflow or unnecessary scrolling caused by large images.

When it comes to working with images, primarily centering an image in CSS can be a challenging task, especially for beginners. This is due to the fact that the < img > tag works as an internal element; it behaves differently compared to block elements, which complicates the process of centering an image in CSS.

In this guide, we will explore different methods of centering an image in CSS.

This guide will walk you through everything you need to know about automated visual regression testing.

Why Centering an Image in CSS?

Centering an image in CSS is very crucial to the overall layout of the webpage. Depending on the approach used, images can be embedded on the web using an HTML < img > *tag or CSS *background-image property.

When an image is embedded on the web due to its large size or repeats within the parent element. To enable the image to fit well on its defined element, it has to be resized to prevent it from overflowing and to take the size of its parent element.

With this, images can be properly centered and positioned. For example, the illustration below shows how this can be done using three card elements on the web page with the image as a header attached to each element.

Another example can be seen from Etsy, where images are categorized into different sections, each with a fixed width and height of its parent element. This makes it easy to center and position the images across the web page.

The above Etsy website shows good consistency across all elements, contributing to more responsive content, cohesive layout, readability of text, and no overflow of text and images.

From the Amazon website below, you can see good use of CSS grid in centering images around the webpage. This is very useful as it improves the website layout system and aligns the image element in a cohesive and responsive manner.

When images are well-centered, it leads to a structured layout of responsive elements across different viewport sizes. This improves UI aesthetics, cohesive layout, and seamless user experience.

New to visual testing? Discover the essentials in our comprehensive guide. Learn what is visual testing, why it matters, and how to begin.

Techniques for Centering Images Within the Page

Centering images on the web varies depending on the block level of the containing element (parent) of the image you are trying to center.

For example, a website like Walmart uses a CSS flexbox and grid to center multiple images on its platform. This makes it more responsive and allows each image to maintain its aspect ratio within its element.

However, other methods such as CSS position, transform, and margin: auto can also center images across the web page. Depending on how the image is included on the web, such as the < img / > tag or the background-image property, we could use the grid, flexbox, CSS position, margin: auto, or the translate property to center images around the web page.

In the next section of this blog, we will learn different techniques for centering an image in CSS.

Centering an Image in CSS Flexbox

CSS flexbox is a one-dimensional layout system for positioning elements in rows and columns. With flexbox, elements (flex-items) can be positioned within the flex container. The flex container, in this case, refers to the containing element the flex-items are nested in. To position images to the center, justify-content *and *align-items are used on the container.

justify-content and align-items

It is a common practice that images are set to inherit the size of the parent element. This makes it easy to center it across other elements within the webpage.

With justify-content, flex-items can be centered horizontally within the parent element, and with align-items, flex-items can be centered vertically.

Here, we combined*justify-content* and align-items to center the flex-items on the horizontal and vertical axis.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Flexbox -- flex-item</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <main class="container">
        <section>
            <div class="img-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/283794539-fc01d463-7bad-4887-a02a-2b9c3eed891f.jpg" alt="">
            </div>
            <div class="btn">
                <aside>
                    <button>
                        <span">Book a Call</span>
                        <i class="fa-solid fa-envelope"></i>
                    </button>

                    <button>
                        <span>Download Porfolio</span>
                        <i class="fa-solid fa-arrow-down"></i>
                    </button>
                </aside>
            </div>
            <div class="content">
               <p> 
                <strong>Aarav Sharma</strong> is a highly innovative UX designer known for his ability to seamlessly blend user-centered design principles with cutting-edge technology. With a keen eye for detail and a passion for creating intuitive digital experiences, Sharma has played a pivotal role in revolutionizing user interfaces across various platforms.</p>
            </div>
        </section>
    </main>
</body>
</html>

Here, within the HTML tag, the following tags performed the functions below

< main >: With a class of container, this tag serves as the parent tag of the card element on the webpage.
< section >: A nested tag of the < main > tag that serves as a wrapper for both the image, buttons, and content of the card element.
< img >: Here, we parse in a user profile as the hero image of the card element.
< button >: We implement two buttons to serve as a call to action on the card element.
< p >: The paragraph tag contains the content on the page.

These HTML tags are used to structure the page content, while the CSS below is used to style it.

Explore the best 25 automated visual testing tools for a seamless user experience in 2024. Find your perfect tool today with our comprehensive list.

CSS:

 body {
        width: 100vw;
        height: 100vh;
        background-color: var(--gray-1);
    }

    :root {
        --transparent: rgba(1, 1, 1, 0);

        --black-0: #010101;
        --black-1: #111317;
        --black-2: #22262e;
        --black-3: #2b2f39;

        --gray-0: #6e7a92;
        --gray-1: #f4f5f8;
        --gray-2: #d3d7de;
        --gray-3: #a6aebc;

        --gradient-1: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 50%, rgba(0,212,255,1) 100%);
    }

    .container {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .container section {
        position: relative;
        width: 22em;
    }

    .container img {

        border-radius: 10px;
        width: 100%;
        height: auto;
    }

    .container .btn {
        width: 100%;
        position: absolute;
        bottom: 30%;

        left: 0px;
    }

    button {
        display: flex;
        justify-content: space-between;
        padding:3px;
        line-height: 3em;
        background-color: var(--gray-1);
        border: none;
        border-radius: 100px;
        cursor: pointer;
        color: var(--black-1);
        transition: 0.5s all;
    }

    button:last-child {
        background-color: var(--transparent);
        border: 2px solid var(--gray-1);
        color: var(--gray-1)
    }

    button:hover {
        background: var(--black-2);
        color: var(--gray-1);
    }

    i {
        display: inline-block;
        padding: 1em;
        border-radius: 100px;
        line-height: 100%;
        background-color: var(--black-0);
        color: var(--gray-1);
    }

    span {
        display: inline-block;
        padding: 0 10px;
    }

    aside {
        display: flex;
        justify-content: space-around;
    }

    .content p {
        font-family: calibri;
        color: var(--black-3);
    }

To center the card element from the horizontal and vertical axes, we do the following.

The body element is set at a width and height of 100vw and 100vh, respectively, providing enough space for the element to be positioned around the container.
The < main > element with the class container is set to display flex to help center the entire content to the center of the page.
The < section > tag is set to relative and a width of 22em to serve as the width of the children element.
The < img > tag takes a width of 100%> to inherit the parent default width size and height of auto.
The < button > tags are styled as CTA buttons with a transparent background and a background of gray on hover.

Each element within the parent card element is styled to fit into the parent container for easy alignment around the webpage.

flex-self

From the previous example, we learned how justify-content and align-items are used to center flex-items within their container. When in use, justify-content and align-items affect all flex-items within the container.

However, where a particular flex item is required to be repositioned aside from other flex items within the same container, flex-self is used. The flex-self helps reposition each flex item within its flex container.

Boost your testing efficiency with LambdaTest’s Test Intelligence. Gain valuable insights, flaky test trends, and accelerate your release cycles. Try LambdaTest today!

Here each flex item is repositioned using the flex-self property.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Flexbox -- flex-self</title>
</head>

<body>
    <main>
        <aside>
            <!-- Header -->
            <section>                
                <p> Centering Image in CSS: Flexbox -- flex-self</p>
            </section>

            <!-- Body -->
            <section>
                <div>
                    <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                </div>

                <div>
                    <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                </div>

                <div>
                    <img src="https://user-images.githubusercontent.com/78242022/283794566-f2111e6a-b8be-47c0-a12f-d4db30793ebf.jpg" alt="">
                </div>
            </section>

        </aside>
    </main>
</body>
</html>

CSS:

 :root {
        --transparent: rgba(1, 1, 1, 0);

        --black-0: #010101;
        --black-1: #111317;
        --black-2: #22262e;
        --black-3: #2b2f39;

        --gray-0: #6e7a92;
        --gray-1: #f4f5f8;
        --gray-2: #d3d7de;
        --gray-3: #a6aebc;

        --gradient-1: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 50%, rgba(0,212,255,1) 100%);
    }
        body {
            width: 100vw;
            height: 100vh;
            background-color: var(--gray-2);
        }
        aside {
            background-color: var(--gray-1);
            width: 80%;
            margin: 1em auto;
            border-radius: 1em;
            padding-bottom: 2em;
        }

        section:first-child {
            width: 80%;
            border-radius: 1em;
            margin: 3em auto 0;
            line-height: 4em;
            background: var(--gradient-1);
        }

        p {
            color: var(--gray-1);
            text-align: center;
            font-family: calibri;
            font-size: 2em;
        } 

        section:last-child {
            display: flex;
            justify-content: center;
            gap: 3em;
            width: 80%;
            height: 20em;
            margin: 2em auto;
            border-radius: 1em;
            border: 1px solid var(--gray-0);
        }

        div {
            width: 120px;
        }

        img {
            width: 100%;
            border-radius: 10px;
        }

        div:nth-child(1) {
            align-self: start;
        }

        div:nth-child(2) {
            align-self: center;
        }

        div:nth-child(3) {
            align-self: end;
        }

From the code example above, we have a parent container (< section > tag) with three child elements (< img > tags). The parent element is set to a display of flex, and each child element is set to start, center, and end, respectively, within the flex-container.

The black solid border around the parent element (< section > tag) serves as a visual reference to the amount of space within the parent element and how each flex item (images) is positioned with the flex container.

Read through the blog to understand what is test observability and how it can improve your testing process.

Centering an Image in CSS Grid

The CSS grid system is a two-dimensional layout method for positioning elements around the web page. The CSS grid is the most powerful CSS layout system that enables web elements to be positioned between rows and columns at the same instance.

place-content

The CSS grid system comes with lots of properties, such as ways for positioning grid items within the grid container. One of which is the place-content property. The CSS grid place-content property is a short-hand property for align-content and justify-content properties.

This is very useful when you need to set grid items within the grid container. The place-content property aligns the grid items with the grid cells in a horizontal and vertical direction within the grid container.

Here, the grid place-content property is used to position the grid items along the horizontal and vertical axes.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Gird - place-items</title>
</head>

<body>
    <main>
        <section>
            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794558-047ca72b-9fe0-42f7-8d8e-09c77d48d3c0.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794606-8b10b1c2-16e0-431d-88ca-3d6c9fca4839.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/283794613-9a465af6-5635-4a85-badd-42c94a2c4bda.jpg" alt="">
            </div>
        </section>
    </main>
</body>
</html>

CSS:

 :root {
            --neutral-200: rgb(229 229 229);
            --amber-200: rgb(254 243 199);
            --amber-600: rgb(217 119 6);
            --amber-800: rgb(146 64 14);
        }
        body {
            width: 100vw;
        }
        section {
            display: grid;
            grid-template-columns: repeat(4, 200px);
            gap: 5px;
            place-content: center;
            height: 100vh;
        }

        div {
            width: 20em;
            height: 20em;
            position: relative;
            border: 2px dashed var(--amber-800);
            padding: 2px;
            border-radius: 100px;
        }


        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 100px;
        }

        @media screen and (max-width:1160px) {
            div {
            width: 10em;
            height: 10em;
            gap: 20px;

        }
        }

        @media screen and (max-width:800px) {
            section {
            grid-template-columns: repeat(2, 200px);
            }
        }

The code above can be broken into sections as follows.

The section tag is the parent tag, nested inside this tag are four < img > tags. The section tag is set to display a grid and a place-content property to center the content around the webpage.
The image tags are set to a width and height of 20em and position relative to the section tag.

The section tags contain four direct children elements; using the place-content helps align all items around the container.

Discover 58 top QA automation tools in 2024 for powerful and efficient testing solutions.

place-items

The CSS grid place-items property is used to align the grid items in a horizontal and vertical direction within the individual grid cells in a grid container. The place-items property is a shorthand property for justify-items (horizontal alignment) and align-items (vertical alignment) used to control the alignment of grid items within their grid cells.

With the place-item property, each grid item is aligned within its grid cells. The grid cells are single-units of boxes arranged in a row and column layout within the grid container. When a grid is defined as a container, each grid item is assigned a cell. However, the place-items property lets us align the grid items within their cells.

To see a visual reference on place-items alignment on the cell, We can turn on the Chrome DevTools and click on the small grid icon on the element tab as indicated below.

The grid cells are the square boxes around the card elements; from the image above, you can see how each card element is aligned to the center of their grid cells.

HTML:

 :root {
            --neutral-200: rgb(229 229 229);
            --amber-200: rgb(254 243 199);
            --amber-600: rgb(217 119 6);
            --amber-800: rgb(146 64 14);
        }
        body {
            width: 100vw;
        }
        section {
            display: grid;
            grid-template-columns: repeat(4, 200px);
            gap: 5px;
            place-content: center;
            height: 100vh;
        }

        div {
            width: 20em;
            height: 20em;
            position: relative;
            border: 2px dashed var(--amber-800);
            padding: 2px;
            border-radius: 100px;
        }


        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 100px;
        }

        @media screen and (max-width:1160px) {
            div {
            width: 10em;
            height: 10em;
            gap: 20px;

        }
        }

        @media screen and (max-width:800px) {
            section {
            grid-template-columns: repeat(2, 200px);
            }
        }

CSS:

 *,*::after, *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --lt-lightColor: #0ebac5;
            --lt-darkColor: #09777e;
            --gray-03: rgb(229 231 235); 
            --gray-05: rgb(107 114 128);
            --gray-08: rgb(31 41 55);
        }

        body {
            background-color: var(--gray-03);
            display: flex;
            justify-content: center;
        }

       .parent {
            display: grid;
            grid-template-columns: repeat(2, 400px);
            grid-template-rows: 400px;
            gap: 10px;
            place-items: center;

            padding: 10px;

            box-shadow: inset 2px 2px 15px rgba(0, 0, 0, .4);
        }

        .children {
            background-color: white;
            width: 200px;
            height:-moz-fit-content;
            height: -webkit-fit-content;
            height: fit-content;
            padding:10px;
            border-radius: 10px;
        }

        .children h1 {
            font-size: 22px;
            font-family: calibri;
            text-transform: uppercase;
            font-weight: lighter;
            color: var(--lt-lightColor);
        }

        .children .price {
            font-family: calibri;
            font-weight: bold;
            color: var(--lt-darkColor);
            margin: 5px 0;
        }

        .children .description {
            font-family: calibri;
            color: var(--gray-05);
            font-size: 14px;
        }

        .children img {
            aspect-ratio: 1/1;
            width: 100%;
            border-radius: inherit;
        }

        @media screen and (max-width: 800px){
            .parent {
                grid-template-columns: repeat(1, 400px);
            }
        }

From the code sample above, we have four < aside > elements with classes of child1 to child4 and children and an < section > element with a class of parent.

parent: The parent class is set to display a grid to make the element a grid container, then a grid-template-columns is set to repeat(2, 400px) and a grid-template-rows: 400px; this will provide more space for cells within the grid container and split them into a two-column grid. The gap of 10px creates a space between the cells, and the place-items property sets the grid-items to center horizontally and vertically within the grid cell.
children: The children class is the grid-items. It takes a width of 200px each within the grid container.

When centering an image, the place-items align the image within the cells of the grid container, which is very useful for websites with multiple images.

Our JS Obfuscator encrypts your code, making it unreadable to anyone who doesn’t have the key. Protect your code from theft and hacking with just a few clicks.

justify-self

The justify-self property functions the same way as the flex-self property but for the grid system.

With the justify-self property, individual grid items can be re-aligned within the grid container.

From the example above, the first grid item is set to align to the end of its appropriate axis, while the third grid item is set to start from the appropriate axis.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Gird - justify-self</title>
</head>

<body>
    <main>
        <section>
            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007720-d35c5f72-8d64-4ed8-8afc-f539a2a53d7e.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007721-72475fa5-bf2c-4689-85fb-42afc1ac05ae.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007729-f1549eaf-fb3b-4bbb-99c2-a9d51f7e25d0.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007728-51f5c876-537d-4fd7-aaca-cac078ff718b.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007726-7bfc1eaa-4536-480c-a017-4977b5f43fca.jpg" alt="">
            </div>

            <div>
                <img src="https://user-images.githubusercontent.com/78242022/284007732-459ad872-1f92-45d9-aa6a-7b9010f7645b.jpg" alt="">
            </div>
        </section>
    </main>
</body>
</html>

CSS:

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root {
        --teal-400: rgb(45 212 191);
        --teal-500: rgb(20 184 166);
        --teal-600: rgb(13 148 136);
        --teal-700: rgb(15 118 110);
        --teal-800: rgb(17 94 89);
        --teal-900: rgb(19 78 74);
    }
    body {
        width: 100vw;
        height: 100vh;
    }

    section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 300px;
        justify-content: center;
        align-content: center;
        gap: 10px;
    }

    div {
        border: 2px solid var(--teal-900);
        background-color: var(--teal-400);
        transition: all 1s ease-out;
    }

    div:nth-child(1){
        justify-self: end;
    }

    div:nth-child(3){
        justify-self: start;
    }

    div:nth-child(5){
        animation-name: roll;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-direction: alternate;
    }

    img {
        width: 200px;
    }

    @keyframes roll {
        0% {
            justify-self: start;
        }

        50%{
            justify-self: center;
        }

        100% {
            justify-self: end;
        }
    }

@media screen and (max-width: 600px){
    section {
        grid-template-columns: repeat(2, 1fr);
    }
}

Here, < section > *tag serves as the parent tag with six direct *< img > *elements. The *< section > *element is set to a *display of grid and grid-template-column of 3. With these, each grid item is split into 3 columns around the grid-container. With justify-self, individual items are re-aligned within the grid-container.

For example, the div:nth-child(1) is set to justify-self: end to reposition the image to the end position with the grid container.

Streamline your SQL code by removing unnecessary spaces and comments with our SQL minify tool that enhances your code’s readability and reduces size. Try it today!

margin: auto

The margin property can be set to auto to automatically align an image in a block container to the center, based on the size of the parent.

Specified element will occupy the space set by the width property and minus its width from the parent width.

The element will then be positioned in the middle of the page or containing the element, leaving the same proposition of space left and right of the element.

HTML:

<main>
    <section>
       <img src="https://user-images.githubusercontent.com/78242022/285645398-c1c1eec5-4e16-4a68-9216-b555264e7c10.jpg" alt="">
     </section>
 </main>

CSS:

main {
            width: 100vw;
            height: 100vh;
        }

        section {
            width: 50%;
            margin: 0 auto;
        }

        img {
            width: 100%;
        }

The margin: auto is mainly used for block elements. As you can see from the code sample above, the < section > *tag is set to occupy *50% of the parent container within the webpage. A margin: 0 auto is set to push the child element to the center of the page.

position

The position property is an effective way to center an image. With the position property, images or elements can be centered or positioned around the document using the position properties such as left, right, top, and bottom.

position: absolute property changes the stacking context of the document. Adding position: relative can help images or elements be centered around the parent element.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Position</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <main>
        <section>
            <aside class="card">
                <heading>
                    <img src="https://user-images.githubusercontent.com/78242022/286496886-005700e0-daf3-4029-ad07-8d69f94f143a.jpg" alt="">
                </heading>
                <article>
                    <div class="profile">
                        <figure>
                            <img src="https://user-images.githubusercontent.com/78242022/283794643-4cea087e-3214-4331-84f8-fde21a8f22db.jpg" alt="">
                        </figure>
                        <p class="para name">Natalie Lynn</p>

                    </div>

                    <div>
                        <h1 class="heading-post">5 Best Coffee Shops</h1>
                        <p class="para-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat repudiandae modi doloremque harum repellendus ipsam aliquid dolorum architecto dolorem velit!</p>
                    </div>
                    <hr />
                    <div class="reactions">
                        <p class="para view">3k views</p>
                        <p class="para comments">153 comments</p>
                        <p class="para likes">534 <i class="fa-solid fa-heart"></i></p>
                    </div>
                </article>
            </aside>
        </section>
    </main>
</body>
</html>

CSS:

 *, 
        *::before, 
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        main {
            background-color: rgb(161, 99, 5);
            width: 100vw;
            height: 100svh;
            position: relative;
        }

        .card {
            width: 20em;
            background-color: #fff;
            border-radius: 10px;

            position: absolute;
            top: 50%;
            left: 50%;

            transform: translate(-50%, -50%);

            box-shadow: 0px 3px 2px 15px rgba(0, 0, 0, .4);
        }

        heading img {
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        img {
            width: 100%;
        }

        .heading-post {
            font-size: 1.5em;
            font-family: calibri;
            margin: 10px 0;
        }

        .profile {
            display: flex;
            justify-content: start;
            gap: 10px;
        }

        figure {
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
        }

        figure img {
            width: 100%;
            height: 100%;
            object-position: left bottom;
            border-radius: 100px;
        }
        .para-content {
            font-size: 18px;
            font-family: calibri;
            padding-bottom: 20px;
        }

        .para {
            font-size: 14px;
            font-family: calibri;
            color: rgb(94, 94, 94);
        }

        .name {
            transform: translateY(20px);

        }

        .reactions {
            justify-content: space-between;
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        article {
            padding: 0.5em 1em;
        }

        i {
            color: red;
        }

From the above code, the position property effect can be seen from the position: absolute, top: 50%, and left: 50%. This helps reposition the card element at the center of the page relative to the < main > element.

Struggling with messy PHP Beautifier Online scripts? Our PHP Formatter & Beautifier Online tool provides clean and structured formatting. Beautify your code and Improve readability today!

transform: translate

The translate property sets how elements can be repositioned from their initial layout or document flow. For example, we could reposition images or elements around the document. To do this, we use the transform: translate property.

The transform: translate property has both X (horizontal) and Y (vertical) coordinates for horizontal and vertical positioning.

By default, elements are set to translate: 0px, meaning no translation is set. Using the length CSS units like px, em, rem, and %, images can be repositioned around the webpage.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Transform</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <main>
        <section>
            <!-- One -->
            <aside class="card one">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800486-ffbf5777-4874-48c1-a162-31ee0f9ed7c8.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>Fujifilm X-T10 Camera</h1>
                    <p>$350</p>
                    <button>Book Now</button>
                </div>
            </aside>

            <!-- Two -->
            <aside class="card two">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800474-7f5d69c1-1829-414c-a8d3-0479b6b8697c.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>NIKON D7200 Camera</h1>
                    <p>$500</p>
                    <button>Book Now</button>
                </div>
            </aside>

            <!-- Three -->
            <aside class="card three">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800461-933e65ef-705c-42c2-adf5-0e04053bcfec.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>NIKON D810 Camera</h1>
                    <p>$230</p>
                    <button>Book Now</button>
                </div>
            </aside>
        </section>
    </main>
</body>
</html>

CSS:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Transform</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <main>
        <section>
            <!-- One -->
            <aside class="card one">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800486-ffbf5777-4874-48c1-a162-31ee0f9ed7c8.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>Fujifilm X-T10 Camera</h1>
                    <p>$350</p>
                    <button>Book Now</button>
                </div>
            </aside>

            <!-- Two -->
            <aside class="card two">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800474-7f5d69c1-1829-414c-a8d3-0479b6b8697c.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>NIKON D7200 Camera</h1>
                    <p>$500</p>
                    <button>Book Now</button>
                </div>
            </aside>

            <!-- Three -->
            <aside class="card three">
                <div class="img-wrap">
                    <img src="https://user-images.githubusercontent.com/78242022/296800461-933e65ef-705c-42c2-adf5-0e04053bcfec.jpg" alt="">
                </div>
                <div class="content-wrap">
                    <h1>NIKON D810 Camera</h1>
                    <p>$230</p>
                    <button>Book Now</button>
                </div>
            </aside>
        </section>
    </main>
</body>
</html>

From the code sample above, the section element contains three card elements, and each element is set to a transform: translate of 150% on the horizontal axis and 100% on the vertical axis to realign the element around the webpage.

Convert your XML files to JSON format without any hassle using our reliable and efficient XML to JSON converter tool. No installation or download required.

Techniques for Centering an Image in CSS Within Container

Depending on how the image is included on the web, such as the < img /> *tag or the *background-image property we could use object-position or background-position CSS property to center images within its container. The image container refers to the element in which the image is embedded.

In this blog section on centering an image in CSS, we will learn different techniques that can be implemented to center an image within the container of the image using CSS.

background-position

The CSS background-position property is used to position images set by the background-image property within the element container. With the background-position property, we can specify the image’s position within the element container based on the value provided.

These values, however, consist of keywords top, button, left, right, and center — length units like px, em, rem,and %.

Additionally, the background-position property exists on X (horizontal) and Y (vertical) coordinates. With this, images can be positioned on a single coordinate or both (axis).

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Background position property</title>
</head>

<body>
    <main>
        <section>
            <p>Click the button to re-position the image within it container</p>
        </section>
        <section class="container">
            <aside class="btn">
                <button>Top</button>
                <button>Left</button>
                <button>Bottom</button>
                <button>25% 75%</button>
                <button>Right</button>
            </aside>
            <aside class="bg-img">

            </aside>
        </section>
    </main>
</body>
</html>

CSS:

main {
            width: 100vw;
            height: 100svh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .container {
            width: 400px;
            height: 250px;
            border: 4px solid rgb(252, 60, 92);
            display: flex;
        }

        .btn {
            width: 30%;
            height: 100%;
            background: rgb(255, 225, 230);
        }

        button {
            width: 100%;
            line-height: 40px;
            background-color: antiquewhite;
            border: 4px solid rgb(252, 60, 92);
            transition: background 0.5s linear;
        }
        button:hover {
            background-color: rgb(252, 60, 92);
        }
        button:active {
            box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
        }

        .bg-img {
            width: 70%;
            height: 100%;
            background: rgb(255, 169, 183);
            background-image: url("https://user-images.githubusercontent.com/78242022/296800461-933e65ef-705c-42c2-adf5-0e04053bcfec.jpg");
             transition: all 0.5s linear;
            background-repeat: no-repeat;
            background-size: 150px 100px;

            background-position: center;
        }

        p {
            font-family: calibri;
            font-size: 18px;
            color: #8d8989;
        }

JavaScript:

const bgImage = document.querySelector('.bg-img');

        const allButtons = document.querySelectorAll('button');

        allButtons.forEach((button, idx)=> {
            if(idx === 0) {
                button.addEventListener('click', (e)=>{
                    bgImage.style.backgroundPosition = 'top';
                })
            }

            if(idx === 1) {
                button.addEventListener('click', (e)=>{
                    bgImage.style.backgroundPosition = 'left';
                })
            }

            if(idx === 2) {
                button.addEventListener('click', (e)=>{
                    bgImage.style.backgroundPosition = 'bottom';
                })
            }

            if(idx === 3) {
                button.addEventListener('click', (e)=>{
                    bgImage.style.backgroundPosition = '25% 75%';
                })
            }

            if(idx === 4) {
                button.addEventListener('click', (e)=>{
                    bgImage.style.backgroundPosition = 'right';
                })
            }
        })

Here, from the code above, we have the following functions

The bgImage variable is used to store the background element. With this, an element can manipulate the background position of the image parsed to the element.
The allButtons variable is used to store all the button elements.

With the allButtons variable, we added a forEach function to loop through each returned element (node list) and add an eventListener.

Using the if statement to check and change the background position of the element, if the index of the element clicked on is equal to the value parsed in.

**JSON to XML Converter is a simple and fast tool that converts JSON to XML data. Use this tool to convert your JSON documents into valid XML for easy data exchange.**

object-position

When images are included using the < img /> *tag, using the *object-position property can be very useful to reposition the image inside the parent box.

The object position property takes keyword values like; top, bottom, left, right, center, and length units such as px, rem, and em to position the image to a specific area within the parent box. It also takes % values to specify the position of the image relative to the parent width and height.

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <main>
        <section>
            <p>Click the button to re-position the image within it container</p>
        </section>
        <section class="container">
            <aside class="bg-img">
                <img src="https://user-images.githubusercontent.com/78242022/296851660-8ef8d6fc-49a8-40cd-bd99-cc1fc78f0020.jpg" alt="" id="image">
            </aside>

            <aside class="btn">
                <button>Left Top</button>
                <button>Right Bottom</button>
                <button>50% 50%</button>
                <button>25% 75%</button>
                <button>100px</button>
            </aside>
        </section>
    </main>

</body>
</html>

CSS:

  main {
            width: 100vw;
            height: 100svh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .container {
            width: 400px;
            height: 250px;
            border: 4px solid rgb(2, 93, 129);
        }

        .btn {
            display: flex;
            height: fit-content;

        }

        button {
            width: 100%;
            line-height: 40px;
            background: rgb(149, 221, 250);
            border: 4px solid rgb(2, 93, 129);
            transition: background 0.5s linear;
        }
        button:hover {
            background-color: rgb(2, 93, 129));
        }
        button:active {
            box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
        }

        .bg-img {
            height: 100%;
            background: rgb(149, 221, 250);
        }

        p {
            font-family: calibri;
            font-size: 18px;
            color: #8d8989;
        }

        .bg-img img {
            display: block;
            width: 100%;
            object-fit: none;
            object-position: left;
        }

JavaScript:

  const image = document.querySelector('#image');

        const allButtons = document.querySelectorAll('button');

        allButtons.forEach((button, idx)=> {
            if(idx === 0) {
                button.addEventListener('click', (e)=>{
                    image.style.objectPosition = 'left top';
                })
            }

            if(idx === 1) {
                button.addEventListener('click', (e)=>{
                    image.style.objectPosition = 'right bottom';
                })
            }

            if(idx === 2) {
                button.addEventListener('click', (e)=>{
                    image.style.objectPosition = '50% 50%';
                })
            }

            if(idx === 3) {
                button.addEventListener('click', (e)=>{
                    image.style.objectPosition = '25% 75%';
                })
            }

            if(idx === 4) {
                button.addEventListener('click', (e)=>{
                    image.style.objectPosition = '100px';
                })
            }
        })

Simplify the process of converting JSON to YAML with our online JSON to YAML converter tool to convert JSON files to YAML. No sign-up required. Get started now!

Tips for Centering an Image in CSS

CSS properties play a huge role in how images are centered and positioned around the webpage or within the element container. However, other factors such as the image container, image size, scaling, and image data determine how images are positioned on the web page.

In this section, we’ll explain tips for centering an image in CSS within the containing element to create a structured and responsive layout.

Image Container

The image container plays a huge role in how images are centered on the web. The image container is simply the direct parent element that the < img /> tag is nested in. For example, if you create a < div > tag and place an < img /> tag inside the < div > tag, the < div > is the parent element (image container), not the < img /> tag itself.

However, if you import the image with the background-image CSS property on a < div > tag. The < div > that received the image as its background image is the image container.

From the image above, we have two image containers, the two image containers are centered around the page using flexbox. However, the second image on the right is centered within its container using the background-position property.

HTML:

&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Document&lt;/title>
&lt;/head>

&lt;body>
    &lt;main>
        &lt;section>
            &lt;aside class="card one">
                &lt;div>
                    &lt;img src="https://user-images.githubusercontent.com/78242022/297184236-b744205c-36be-4162-a1d9-e390102dd462.jpg" alt="">
                &lt;/div>
                &lt;p>using the img tag&lt;/p>
            &lt;/aside>

            &lt;aside class="card two">
                &lt;div>
     &lt;!-- we are using the background-image property to import image -->
                &lt;/div>
                &lt;p>using the background-image property&lt;/p>
            &lt;/aside>
        &lt;/section>
    &lt;/main>
&lt;/body>
&lt;/html>

CSS:

     *, *::after, *::before {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        main {
            width: 100vw;
            height: 100svh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .card {
            width: 300px;
            height: 300px;
        }

        img {
            width: 100%;
        }

        div {
            border: 2px solid #8d8989;
            width: 100%;
        }

        .card.two div {
            height: 300px;
            width: 300px;

            background-image: url("https://user-images.githubusercontent.com/78242022/297184236-b744205c-36be-4162-a1d9-e390102dd462.jpg");
            background-repeat: no-repeat;
            background-size: 200px 100px;
            background-position: center;

        }

        p {
            font-family: calibri;
            font-size: 18px;
            color: #8d8989;
        }

        @media screen and (max-width: 650px) {
            section {
            margin-top: 2em; 
            flex-direction: column;
        }

        }

Simplify SQL data representation with our user-friendly SQL to XML Converter. Convert query results to XML format effortlessly and enhance data interoperability.

This CSS code includes styling for a responsive layout with flexbox and card dimensions. Each card is styled as follows.

Card one: From the first card element, the width and height *are set to *300px, respectively, and inside this element, we nested a < img > tag and set the width to 100% to inherit the default size of the element.
Card two: From the second element, the width *and *height *are set to *300px, respectively. With the background-image property, we specify an image and set the size using the background-size property. The image is then centered with the background-position property.

The containing element is essential and plays a huge role in centering elements on the web when proper sizing is implemented.

Sizing Images

Images come in large file sizes, making it impossible to center on the web page. Unsized images can lead to unwanted scrollbars and break the page layout. Most images pop out of the element box when it is not size.

The essence of sizing or resizing images in CSS is to ensure consistency across multiple and different elements and for images to take the shape of an element or layout.
CSS itself does not directly handle the content of images, but it does provide properties and rules that allow you to control the size of images within HTML documents.

With the width, max-width, min-width, height, min-height, and max-height properties, we can resize images with CSS to fit within the image container.

From the browser output above, each image is resized to fit into the container of the image element, making it easy to position around the webpage and within the image container.

HTML:

&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
&lt;/head>

&lt;body>
    &lt;main>
        &lt;section>
            &lt;aside class="card card-one">
                &lt;div>
                    &lt;img src="https://user-images.githubusercontent.com/78242022/297385859-05ce3e2a-d20d-4390-a4eb-d2aea03ceb87.jpg" alt="" class="head-img">
                &lt;/div>
                &lt;div>
                    &lt;h1>New York&lt;/h1>
                    &lt;p class="street para">Street&lt;/p>
                    &lt;p class="save para">Travel now&lt;/p>
                    &lt;div class="circle-dots">
                        &lt;span class="circle circle-red">&lt;/span>
                        &lt;span class="circle circle-blue">&lt;/span>
                        &lt;span class="circle circle-orange">&lt;/span>
                        &lt;span class="circle circle-purple">&lt;/span>
                    &lt;/div>
                    &lt;div>
                        &lt;button class="btn">
                            &lt;i class="fa-solid fa-cart-shopping">&lt;/i>
                            &lt;span>add to cart&lt;/span>
                        &lt;/button>
                    &lt;/div>
                &lt;/div>
            &lt;/aside>

            &lt;aside class="card card-two">
                &lt;div>
                    &lt;img src="https://user-images.githubusercontent.com/78242022/297184256-d7d58744-1082-4567-9d1e-3f9569894783.jpg" alt="" class="head-img">
                &lt;/div>
                &lt;div>
                    &lt;h1>New York&lt;/h1>
                    &lt;p class="street para">Street&lt;/p>
                    &lt;p class="save para">take a trip&lt;/p>
                    &lt;div class="circle-dots">
                        &lt;span class="circle circle-red">&lt;/span>
                        &lt;span class="circle circle-blue">&lt;/span>
                        &lt;span class="circle circle-orange">&lt;/span>
                        &lt;span class="circle circle-purple">&lt;/span>
                    &lt;/div>
                    &lt;div>
                        &lt;button class="btn">
                            &lt;i class="fa-solid fa-cart-shopping">&lt;/i>
                            &lt;span>add to cart&lt;/span>
                        &lt;/button>
                    &lt;/div>
                &lt;/div>
            &lt;/aside>
        &lt;/section>
    &lt;/main>
&lt;/body>
&lt;/html>

CSS:

    *, *::after, *::before {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(122, 12, 224);
    }

    main {
        width: 100vw;
        height: 100svh;
    }

    section {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        gap: 20px;
    }

    .card {
        width: 200px;
        background-color: #fff;
        padding: .5em;
        border-radius: 5px;
    }

    .card .head-img {
        width: 100%;
        height: 200px;
        border-radius: 5px;
        object-fit: cover;
    }

    .card-two .head-img {
        border-radius: 100px;
    }

    h1 {
        font-family: calibri;
        margin: 0.2em 0;
    }

    .para {
        font-family: calibri;
        font-size: 18px;
        color: #8d8989;
    }

    .street {
        color: black;
    }

    .circle-dots {
        display: flex;
    }

    .circle {
        border-radius: 100px;
        width: 15px;
        height: 15px;
        margin: .2em .2em;
    }


    .circle-red {
        background-color: red;
    }
    .circle-blue {
        background-color: blue;
    }
    .circle-orange {
        background-color: orange;
    }
    .circle-purple {
        background-color: purple;
    }

    .btn {
        margin-top: .9em;
        background-color: black;
        color: white;
        border-radius: 5px;
        width: 100%;
        padding: .5em;
        border: none;
        cursor: pointer;
        transition: all 0.5s linear;
    }

    .btn:hover {
        background-color: wheat;
        color: black;
    }

    .btn:active {
        transform: translateY(4px);
    }

From the code above, the < img > element with a class of head-img is set to 100% width and 200px height. This enables each image to fit into the parent container. However, the second < img > is set to a border-radius of 100px to round the image to a circle.

Simplify your data export process with our efficient SQL to CSV Converter. Convert SQL queries to CSV format seamlessly and unlock data versatility. Try it now!

Scaling Images

The best way to scale images in CSS is by sizing, but sometimes this is not enough, especially when the image aspect ratio, resolution, or orientation does not correspond to the width and height of the image-container. The image can easily become distorted or compressed.

This is not good for readability purposes as visitors might find it difficult to read the content on the image.

To fix this, CSS provides properties such as object-fit, margin: auto, aspect-ratio, background-size, flex-grow, *and *flex-basis.

These properties are very useful for creating and developing responsive layouts. This ensures images are responsive relative to the device or screen resolution that loads the image.

When the aspect ratio of images is maintained across different viewports, it prevents distortion and leads to more fitting looks on the webpage.

HTML:

&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">

&lt;/head>

&lt;body>
    &lt;main>
        &lt;section class="viewport view-1">
            &lt;aside>
                &lt;img src="https://user-images.githubusercontent.com/78242022/297184256-d7d58744-1082-4567-9d1e-3f9569894783.jpg" alt="">
            &lt;/aside>
        &lt;/section>

        &lt;section class="viewport view-2">
            &lt;aside>
                &lt;img src="https://user-images.githubusercontent.com/78242022/297184256-d7d58744-1082-4567-9d1e-3f9569894783.jpg" alt="">
            &lt;/aside>
        &lt;/section>

        &lt;section class="viewport view-3">
            &lt;aside>
                &lt;img src="https://user-images.githubusercontent.com/78242022/297184256-d7d58744-1082-4567-9d1e-3f9569894783.jpg" alt="">
            &lt;/aside>
        &lt;/section>

        &lt;section class="viewport view-4">
            &lt;aside>
                &lt;img src="https://user-images.githubusercontent.com/78242022/297184256-d7d58744-1082-4567-9d1e-3f9569894783.jpg" alt="">
            &lt;/aside>
        &lt;/section>
    &lt;/main>
&lt;/body>
&lt;/html>

CSS:

    *, *::after, *::before {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(43, 43, 255);
    }

    .viewport {
        width: 100%;
        height: 100svh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .viewport aside {
        width: 50%;
        height: 400px;
        padding: 20px;
        background-color: rgba(240, 248, 255, 0.5);
        border-radius: 10px;
        border: 1px solid #fff;

        backdrop-filter: blur(10px);
        -moz-backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .viewport img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    .view-1 img {
        object-fit: cover;
    }

    .view-2 img {
        object-fit: contain;
    }

    .view-3 aside {
        aspect-ratio: 16 / 9;
        flex-grow: 1;
    }

    .view-3 img {
        object-fit: cover;
    }


    .view-4 aside {
        aspect-ratio: 1 / 1;
        width: 30%;
    }

    .view-4 img {
        object-fit: cover;
    }

From the code above, object-fit cover, object-fit contain, and aspect-ratio *property is used to set the four *< img > elements to scale relative to the parent element, creating a responsive layout across different viewports.

For example, the images below show a good use case using the LT Browser. The scaled images display responsively across different screen sizes for better navigation.

LT Browser is a free, Chromium-based web browser specifically for web developers. It excels at responsive testing and debugging websites and web applications across different screen sizes. This makes it an ideal tool for ensuring your image centering in CSS works flawlessly on all platforms.

Loaded with 53+ pre-installed device viewports, LT Browser includes popular mobiles, tablets, and desktops. It allows you to see how your website reacts across various screen sizes and resolutions. This lets you instantly check if your CSS image centering adapts properly. You can identify issues like images overflowing the content area, cropped unexpectedly, or inconsistent spacing on different devices.

Mobile:

Tablet:

Laptop:

Get to know the different features that LT Browsers offers. Check out the tutorial below:

Catch up on the latest testing tutorials around Selenium automation, Cypress testing, and more. Subscribe to the LambdaTest YouTube Channel for quick updates.

Image Data/Metadata

Image data refers to the data that makes up the content of the actual image, such as pixel information, size, orientation, resolution, RGB color mode, etc. The image data determines how the image in the browser is rendered and how it will be affected or positioned with CSS styling.

However, in the content of the image metadata, which differs from the image data, the image metadata deals with the extra text information that describes what the image is about. For example the name of the image, the date and time it was taken, and the name of the software or camera used to create the image.

The image metadata is very useful and can improve search engine optimization, making images easy to discover and providing accurate details to protect an image against copyright infringement.

Want to convert SCSS to clean, concise CSS? Convert SCSS to CSS like a pro with our intuitive online tool. Get clean, readable code instantly. Start converting today!

Browser Compatibility

Centering images on the web heavily relies on CSS. It provides properties for styling and controlling the appearance and positioning of images on the web. However, due to browser incompatibility with some CSS properties, certain browsers might not load some properties, leading to unexpected image breaking.

To check and fix this, we can use AI-powered test orchestration and execution platforms like LambdaTest to test how the images on our websites are centered across multiple browsers such as Chrome, Firefox, Opera, Safari, Brave, etc. This platform offers an online browser farm of real desktop and mobile environments. Cross browser testing gives visual feedback on how web elements render on the web pages. This makes it easy to visually test and debug web elements on the web page.

Also, CSS properties browser support can be checked via CanIUse to understand when and how to implement such properties for better optimization.

For example, the background-filter used in the last example is partially supported in Safari and requires the use of -webkit- prefix for rendering the background-filter property.

Ensuring CSS properties used in centering images are well-supported or prefixed can help prevent unwanted or poor image rendering.

Conclusion

In this guide, we explained how to center images in CSS and its significance.

We also discussed two techniques of centering an image in CSS: within a page and in a container.

In the technique for centering an image in CSS within the web page, we explained using properties like flexbox, grid, margin: auto, position properties, and transform: translate property and how they can be implemented in centering images around the web page.

And in the technique for centering images in CSS within its container, we highlight the use of background-position and object-position properties as a method for positioning images within the element container.

We also touched upon other important factors that affect centering an image in CSS, such as the image container, sizing, scaling, and browser compatibility.

Frequently Asked Questions (FAQs)

How do I center an image in CSS?

For horizontal centering, wrap your image in a div and set text-align: center for the div. Alternatively, use margin: 0 auto on the image itself, but remember to set a width if needed. The flexbox approach involves setting the container’s display to flex and justify-content to center.

How to position an image in CSS?

The test automation pyramid is a graphical strategy model for automating software testing. The model divides testing types into three layers based on the return on investment (ROI) provided by automating that specific type.

How do I center an absolute image in CSS?

To center an absolute image horizontally, set position: absolute, left: 50%, and transform: translateX(-50%). For vertical centering, add top: 50% and transform: translateY(-50%). Remember, absolute positioning removes the image from the normal document flow, so it won’t interact with other elements as expected.

Building Accessible Carousels: A Step-By-Step Guide

Alex Anie — Mon, 11 Mar 2024 12:03:19 +0000

Carousels are effective in conveying pieces of information in a concise format on the web page. Many organizations find value in using carousels to showcase their product offerings. This feature has proven to be a valuable asset for driving conversions and enhancing user engagement.

Despite being helpful and a great fit for everyday users, carousels come with a lot of accessibility issues, which prevent impaired users from interacting with them. Therefore, it becomes imperative to create accessible carousels that are truly beneficial and inclusive for all users. It’s an investment that pays off in terms of ethics, usability, and overall website performance.

In this article, we will dive deep into accessible carousels, why to use them, the components of carousels, and how to build accessible carousels.

Test native, hybrid, and web apps on any mobile OS with our free online emulator Android . Sign up to optimize app performance.

What are Carousels?

A carousel is a group of individual elements, where each element is called a slide, and each slide is set to overflow horizontally across its containing element.

Ac*cording to beta testing of the multi-destination function on the carousel by X Business, they saw* a 20% increase in click-through rate across single posts of carousel assets and a 25% lift in click-through rate for campaigns that optimize for site visit conversion.

For example, the Airbnb website below contains four elements with header images. Each image within the header serves as a slide.

A slide in a carousel moves horizontally in sequential order; each slide rotates one at a time and hides to provide space for the next slide.

Once again, from the Airbnb website, each slide moves horizontally when the slider control is clicked on, revealing the next slide.

Users can directly interact with each slide by using the carousel controls. These controls enable the user to move the slides back and forth. Some carousels enable the keyboard or drag to scroll to move each slide within its slide container.

The carousel typically displays once the page loads, while the “slide picker controls” indicate which slide is displayed.

We can also see the same method replicated on the Motorola website, where each slide showcases the organization’s products as an ad. These types of carousels are banner carousels.

Test native, hybrid, and web apps on any mobile OS with our free online Android emulator. Sign up to optimize app performance.

Components of Carousels

Before discussing the importance of accessible carousels, let’s explore different carousel components. Carousel slides are content in the form of a slide. Each slide displays different content and loops one after the other.

To ensure a good user experience, carousels typically have controls that enable users to navigate around the carousel content, known as slides. The controls also indicate which side (content) is currently on display.

The following examples are controls or slide controls that can be implemented when creating a carousel element.

Previous slide controls: This is a button element with a left arrow icon for navigating the slides back in sequence.
Next slide controls: This is a button element with a right arrow icon for navigating the slides forward in sequence.
Slide picker controls: These are small groups of button elements, usually at the base of the carousel. These buttons mainly do two things, one of which is to indicate which slides are currently on display and to navigate to a specific slide without using the slide controls.
Pause/play controls: This control button controls the play and pause state of the carousel slides. This is mainly seen in the carousel displayed when the page loads.
Slide: A slide is the individual items that displays in sequence. However, a slide is not a control but can be implemented as a control for drag events, where users can drag a slide to review the next slide.

The Toyota landing page shows how to trigger the animation play state using the play and pause button.

To improve user interaction, keyboards such as spacebars, taps, and arrow keys can be a good control source.

Spacebar: The space bar control works when the pause/play control is implemented. It serves as an alternative to pause/play control.

For example, the MasterClass website shows how to pause and play the slide animation with either the spacebar or the pause/play control.

Array keys: The left and right arrow keys on the keyboard can be handy as an alternative to the “previous slide controls” and “next slide control”.
Tap and Shift keys: The tap or shift + tab key can loop or navigate between slides in sequence.

Test native, hybrid, and web apps on any mobile OS with our free Android online emulator. Sign up to optimize app performance.

Why are Accessible Carousels Needed?

Accessible carousels are very much needed to provide instructions to visually impaired users to enable them to navigate carousel elements on the web page. According to WHO, almost 2.2 billion have a visual impairment in some way, making it difficult for people with visual impairment to access the web.

Accessible carousels are needed for multiple reasons:

They enable visually impaired users to identify components/controls that make up the carousel.
Assistive technology tools such as screen readers, text-to-speech, and refreshable braille display software reads aria Roles, States, and Properties as audible text to visually impaired users. This helps visually impaired users understand how the carousel works and how to use it.
Accessible carousels are also necessary for compliance with accessibility standards such as WCAG 2.0 and Section 508.
With accessible carousels, visually impaired users can navigate carousel components using voice input software and keyboard navigation with the help of accessibility.
Carousel content can be paused with carousel control by users distracted by frequent movement of the content to enable them to listen to carousel content.
Visual-impaired users can determine the state of the carousel if it’s pressed, disabled, checked, or hidden.

Accessible carousels generally provide good semantics in the form of audio/speech for visually impaired users. This helps to determine the landmark area the carousel occupies and its role, its content, and how to navigate it on the web page.

Check out the best iOS emulators for PC you should consider for mobile application testing.

Are Carousels Good for Accessibility?

Despite being implemented across multiple sites by web developers, Carousels have numerous associated issues, which we will split into two parts.

Interactivity

Carousels have unpleasant user experiences, as users rarely interact with them. This might be due to a lack of understanding of interacting with carousels.

A study based on Google Analytics Event recorded the number of interactivity. The report states the percentage of visitors who clicked on a carousel feature is 1%, with the first feature getting the highest clicks or interactivity. In contrast, other features have to share the same or no interaction.

The image above shows click distribution by position. Position 1 is shown to take the highest number, while other positions share the same proposition evenly. This is not good for sites with multiple carousels, as the chances of them being interacted with are low or there is no interaction.

However, to increase the chance of interactivity,

Consider reducing the number of slides to a maximum of four.
Captivating headline titles and images can significantly impact click-through rates.
Content should contain a single idea as it helps users understand what each slide presents.

Since the first slide gets the most attention, the most important slide should be implemented first to encourage user click-through.

A comprehensive end-to-end testing tutorial that covers what E2E testing is, its importance, and how to perform it.

Accessibility

Accessible carousels involve ensuring all users can access the content on each slide and navigate each slide via the slider controls.

However, for visually impaired users, screen-readers, and text-to-speech software (assistive technology tools) are relied upon to report the right content or information to the users. For instance, animated slides with pause/play control can display multiple shows within a slide without proper use of WAI-ARIA Roles, States, and Properties. The screen reader can report this as multiple slides instead of showing within a slide or as a plain HTML tag.

Let’s take the Toyota homepage as an example.

From the Toyota homepage, the first slide has two shows that display before the next slide is displayed. At the bottom left corner is a pause /play control for pausing or playing each show within the slide. Without proper WAI-ARIA for labeling, this might not get the right accessible result from screen readers.

Accessibility plays an excellent role for visually impaired users, and assistive technology tools help convey digital content on the web to visually impaired users by speech synthesis (Text-to-Speech) TTS. For example, when a user clicks or interacts with web elements, the screen readers extract the content and report it as an audible speech.

For assistive technology tools to be effective or detect content, several factors have to be implemented, such as the following.

Alternative text: Mainly referred to as alt text, alternative text is HTML attributes used to write descriptive text to describe the image or content provided within the HTML tag. This attribute is used for content such as images, videos, audio, logos, and web icons. They are helpful for Google search engines and assistive technology tools like screen readers.
Semantic markup: Semantic markup is HTML tags used to describe the role of the content on the page. This enables web browser format and renders content currently on the web page. Screen readers can also detect semantic markup.

For example, when a user interacts with a button on a page, screen readers can produce audio feedback indicating the element is a button that can be clicked.

 <h1>This is a top level 1 heading</h1>
<p>This is a paragraph text</p>
<button>Click here </button>

The < h1 > element shows that the content inside the tag should be treated as a level 1 heading, while the < p > tag shows that the content inside it should be treated as a paragraph text. The < button > element shows that this is a clickable button element.

Captions: Unlike alternative text, captions are displayed directly on the web page. Caption provides a descriptive text that explains what the provided content is about, especially for images. < figcaptions > are used to provide captions in HTML documents. Captions can be very useful for hearing-impaired users.
A beautify picture of blue sky

In the next section, we will see the role of WAI-ARIA in building accessible carousels.

This smoke testing tutorial covers what smoke testing is, its importance, benefits, and how to perform it with real-time examples.

Role of WAI-ARIA in Creating Accessible Carousels

The WAI-ARIA, which stands for Web Accessibility Initiative — Accessible Rich Internet Applications, is a specification developed by W3C to provide semantic meaning to assistive technology tools such as screen readers for ensuring content on the web are interpreted the way they function and appear on the web.

For example, visually impaired users cannot see the carousel on the web or interact with the carousel directly, so the WAI-ARIA Roles, States, and Properties are used by developers to provide additional text based information on the HTML tags that describe what the carousel actually means or how the carousel controls functions.

This enables screen readers to read WAI-ARIA Roles, States, and Properties as audible speech back to visually impaired users as it enables them to navigate and use the website the way it was intended by the developer.

When the HTML document is loaded on the DOM by the User Agent, it creates a parallel structure called an accessibility tree, which is made up of accessibility objects. The accessible objects provide information on the HTML markup based on the Roles, States, and Properties of WAI-ARIA.

Following are the WAI-ARIA Roles, States, and Properties that can be implemented to create accessible carousels:

Roles: The Role defines what the element is meant to do. For example, in a carousel slider, we can add a role=”main” on the carousel-container, indicating that the specified element should be read as the main content of the carousel by screen readers.
States: The State defines the current condition of the element. For example, we can add a aria-disabled to a disabled button to inform the screen reader to read it as a disabled button.
*Properties: **The Properties provide more descriptive information about the element or content on the web page for screen readers. For example, the *aria-describedby can be used to describe the content of the carousel slides for screen readers.

Remember that the Roles, States, and Properties are meant to be read as audible speech and do not have or add any functionality to the carousel or web elements.

Test your native app and website on real iOS and Android device clouds for mobile app testing. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test on real device cloud.

Techniques to Build Accessible Carousels

Several crucial steps are important when building an accessible carousel. This step ensures that all carousel components are accessible, making it easy for visually impaired users to navigate.

How a carousel is structured, or functions should not prevent it from being accessible. The following techniques illustrate how to create accessible carousels.

Auto-Rotation

Auto-rotation carousels are very common in websites today. This type of carousel can also be called a banner carousel, mainly used to display ads that run as soon as the page loads and continues to auto-rotate.

To improve and make the auto-rotating carousel accessible, a few important steps must be taken.

Auto-rotate may be distracting for people with cognitive impairments. A control button (pause/play button) can be implemented to pause the animation to enable the users to concentrate.

WAI-ARIA Roles, States, and Properties: These should be implemented to indicate to screen readers that the carousel has an auto-rotation state.
Pause auto-rotation on hover: Users need time to read content. Implementing pause animation on hover helps visually cognitively impaired users focus on interacting or listening to the carousels.

Test your native app and website on real iOS and Android devices hosted on the cloud. LambdaTest is a mobile testing platform with real devices for running realtime and Automated test on real device cloud.

Visibility

For visually impaired users, visibility means the carousel components are well labeled with the appropriate WAI-ARIA Roles, States, and Properties. This helps to improve the accessibility nature of the carousels.

Here are other aspects that should be considered:

Hidden elements should have a WAI-ARIA state to indicate the element is hidden or disabled.
Carousel components should be labeled according to their functions. This makes it easily accessible.
Buttons with SVGs as content should be labeled and assigned an accessible role to make it accessible to visually impaired users.
Overflow content should be hidden to make it easy to navigate the carousels.
All carousel components should be responsive and easy to navigate on mobile, tablet, and desktop.
Buttons, slides, slider picker controls, play/pause state buttons, and other carousel components should be implemented and labeled accordingly to make them accessible.

Structure, Semantic, and Labeling

Websites require good structure and semantic tags to make websites responsive, SEO friendly, and easy to navigate. This is because browsers can quickly load and render well-structured and semantic websites on the screen.
However, visually impaired users rely heavily on the accessibility of the WAI-ARIA Roles, States, and Properties to determine the structure and semantics of the websites.

In this case, good use of WAI-ARIA should be implemented on semantic tags to let the users know which element holds the main carousel and which element serves as the control.

 <main role="main" aria-label="carousel container">
        <button role="button" aria-label="backward"></button>

        <section role="region" aria-label="carousel">
            <!-- Slides -->
        </section>
        <button role="button" aria-label="forward"></button>
</main>

Landmarks should be implemented to make sections or groups of elements on the page accessible. For example, the main, aside, form, section, article, and div elements can be assigned relevant landmarks that explicitly state their role in the element.

The WAI-ARIA role attribute serves as a way to provide landmarks on the element for accessibility purposes.

Now, let’s see a hands-on demonstration of building accessible carousels.

Explore seamless app test device online on real mobile devices with our hassle-free solutions. Ensure optimal performance across real-world scenarios effortlessly.

Demonstration: Building Accessible Carousels

In this blog section on accessible carousels, we will look at various kinds of carousels and how to implement them in your software projects regarding accessibility as specified in the previous examples. To demonstrate the creation of accessible carousels, we will take three popular carousel examples.

Product Carousels

Product carousels are one of the most common carousels and can be seen on major e-commerce platforms such as Amazon, eBay, Walmart, Best Buy, and Apple Store. They are beneficial in cases where collections or groups of products are to be displayed on the website for easy navigation by the users.

Here is a simple use case from the Apple Store. Each product is grouped based on the product’s items.

A simple example below shows how to implement a group of product items as carousels.

Example:

From the example above, the carousel contains nine images, each image split into three groups called view. Each view contains similar products.

For example, the first view is a display of Apple HomePod, the next is a display of Apple AirPods, and the last is the Apple 15 display.

This example is most useful when we want to display the same kinds of products or items simultaneously and enable users to navigate around different items from similar types in a roll.

HTML:

<div class="group">
<main class="carousel" role="main" aria-label="carousel">

    <button type="button" id="backward" class="btn disabled" role="button" aria-label="backward">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="main-grid-item-icon" fill="none"      stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <polyline points="15 18 9 12 15 6" />
        </svg>
    </button>

    <section class="carousel-sub">
    <!-- View 1 -->
    <section class="img-wrapper" id="view1">
        <span role="img" aria-label="HomePod, AirPods, or select Beats product">
            <img src="https://user-images.githubusercontent.com/78242022/274978352-f0fc35e2-652b-428d-927f-09bf61805dbf.jpeg" alt="HomePod, AirPods, or select Beats product">
        </span>
        <span role="img" aria-label="HomePod - Midnight">
            <img src="https://user-images.githubusercontent.com/78242022/274980258-9f84204f-197f-4e0b-8c0e-5a9511f1db53.jpeg" alt="HomePod - Midnight">
        </span>
        <span role="img" aria-label="HomePod mini - Yellow">
            <img src="https://user-images.githubusercontent.com/78242022/274982370-6c49ff19-7f72-43f0-9592-1861a506fec2.jpeg" alt="HomePod mini - Yellow">
        </span>
    </section>


    <!-- View 2 -->
    <section class="img-wrapper" id="view2">
        <span role="img" aria-label="AirPods Max - Silver">
            <img src="https://user-images.githubusercontent.com/78242022/274973852-afb2d3d0-2748-4612-a07a-b0f583c9d9b7.jpeg" alt="AirPods Max - Silver">
        </span>

        <span role="img" aria-label="AirPods (3rd generation) with Lightning Charging Case">
            <img src="https://user-images.githubusercontent.com/78242022/274973882-7cef7964-66fd-470f-8d5b-e8b3837ffcc9.jpeg" alt=" AirPods (3rd generation) with Lightning Charging Case">
        </span>

        <span  role="img" aria-describedby="Beats Studio Buds + True Wireless Noise Cancelling Earphones in Transparent, with Beats logo, above convenient charging case.
TransparentBlack / GoldIvoryCosmic SilverCosmic Pink">
            <img src="https://user-images.githubusercontent.com/78242022/274973892-a5bdc3c6-ea67-46e2-b8cc-57f9a4f068a2.jpeg" alt="Beats Studio Buds + True Wireless Noise Cancelling Earphones in Transparent, with Beats logo, above convenient charging case.
TransparentBlack / GoldIvoryCosmic SilverCosmic Pink">
        </span>
    </section>


    <!-- view 3 -->
    <section class="img-wrapper" id="view3">
        <span role="img" aria-label="iPhone 15 Pro FineWoven Case with MagSafe - Taupe">
            <img src="https://user-images.githubusercontent.com/78242022/274990709-1e3c4882-778f-49bd-9814-b940648ea4eb.jpeg" alt="iPhone 15 Pro FineWoven Case with MagSafe - Taupe">
        </span>
        <span role="img" aria-label="iPhone FineWoven Wallet with MagSafe - Black">
            <img src="https://user-images.githubusercontent.com/78242022/274990706-ecafd3a0-4a95-4c50-a6f5-69386c548be2.jpeg" alt="iPhone FineWoven Wallet with MagSafe - Black">
        </span>
        <span role="img" aria-label="iPhone 15 FineWoven Case with MagSafe - Pacific Blue">
            <img src="https://user-images.githubusercontent.com/78242022/274990700-6d29a925-9e2a-487f-96c9-7decc3f4fb37.jpeg" alt="iPhone 15 FineWoven Case with MagSafe - Pacific Blue">
        </span>
    </section>
</section>

    <button type="button" id="forward" class="btn" role="button" aria-label="forward">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <polyline points="9 18 15 12 9 6" />
    </svg>
</button>
</main>

<!-- Buttons -->
<div class="picker-wrapper">
    <a href="#view1" class="picker-control active" role="link" aria-label="slide picker control"></a>
    <a href="#view2" class="picker-control" role="link" aria-label="slide picker control"></a>
    <a href="#view3" class="picker-control" role="link" aria-label="slide picker control"></a>
</div>

</div>

From the code above, the entire code is wrapped inside a single div tag of group.

The carousel is split between elements:

Button: The < buttons > element is placed inside the carousel < main > element. This makes it easy to be positioned side by side with the carousel element
Section: The < section > element is a wrapper for each “view” of the carousel items. This makes it easy to style and position each view one at a time
< a >: The < a > element, which is implemented as *picker-control *, is placed at the bottom of the carousel for easy navigation of each carousel view within its container.

Here are the changes to make the carousel more accessible:

Button: The < buttons > elements take a role and aria-label attributes. This is useful in cases where the content of the button element is an SVG icon and not an actual text. Providing a role=”button” of aria-label=”backward” makes the buttons more accessible for screen readers.
Labeling: The < main > element takes a role=”main” and aria-label=”carousel”. The role=”main” indicates where the main content is, while the aria-label=”carousel” indicates that the main element is a carousel.
Span: The < span > element wraps around each image slide and takes a role, aria-label, and aria-describedby (view 2 of the section element). The role *indicates the role of the span as an image. The *aria-label provides what type of image is included in the span while the aria-describedby describes what type of image is included in the span.
< a >: The < a > element takes the role *of link, and *aria-label is set to slide picker control.

The role, aria-label, and aria-describedby attributes enable screen readers to read the value of these attributes as audible speech for visually impaired users.

Experience real-time Android device testing online with our platform. Ensure compatibility and performance on real devices instantly. Start testing now!

CSS:

   *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --bg-color: rgb(229 231 235);
        --font: calibri;
        --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    body {
        background-color: var(--bg-color);
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carousel {
        width: 100%; 
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.carousel-sub {
   width: 70%;
   display: flex;
   overflow-x: scroll;
   scroll-behavior: smooth;
 }

 .img-wrapper {
    transition: all 0.5s ease;
 }

 .carousel .img-wrapper {
     display: flex;
     gap: 20px;
     padding: 10px;
     flex: 0 0 100%;
 }

    .carousel .img-wrapper img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 /1;
        filter: grayscale(100%);
        transition:transform 0.5s;
        border-radius: 10px;
        box-shadow: var(--shadow);
    }

    .carousel-sub::-webkit-scrollbar {
        display: none;
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border:none;
        width: 50px;
        height: 50px;
        background-color: rgba(0,0,0,.23);
        border-radius: 100%;
        cursor: pointer;
        transition: background 0.5s ease;
    }

    .btn:hover {
        background-color: rgba(0,0,0,.5);
    }

    svg{
        display: block;
    }

    .btn svg {
        stroke: #fff;
    }

    .carousel .img-wrapper img:hover {
        filter: grayscale(0);
        cursor: pointer;
        transform: scale(1.1);
    }

    /* picker-wrapper */
    .picker-wrapper {
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    /* Slide Picker Control */
    .picker-control {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: rgba(0,0,0,.23);
        border-radius: 100%;
        transition: all 0.5s ease;
    }

    .picker-control:hover {
        background-color: rgba(0,0,0,.5);
    }

    .active {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .disabled {
        transform: scale(0);
        transition: transform 0.5s ease;
    }

JavaScript:

const carousel = document.querySelector(".carousel-sub"),
            backwardBtn = document.querySelector("#backward"),
            forwardBtn = document.querySelector("#forward");

        const carouselViews = document.querySelectorAll('.img-wrapper')
        const pickerControls = document.querySelectorAll('.picker-control');

        backwardBtn.addEventListener("click", function(e){
            const size = document.querySelector('.carousel-sub').clientWidth;
            carousel.scrollLeft -= `${size}`;

            let i = 0;
            let arr = [...pickerControls];
            let lastIndex = arr.length -1;

            if(carousel.scrollLeft === 0) {
                backwardBtn.classList.add('disabled');
                forwardBtn.classList.remove('disabled')

                arr[i].classList.add('active')
                arr[1].classList.remove('active')
            } 

            else if(carousel.scrollLeft >= 0){
                arr[1].classList.add('active')
                arr[lastIndex].classList.remove('active')

                forwardBtn.classList.remove('disabled')
                backwardBtn.classList.remove('disabled')
            }
        })

        // The forward button for navigating backward
        forwardBtn.addEventListener("click", function(e){
            const size = document.querySelector('.carousel-sub').clientWidth;
            carousel.scrollLeft += `${size}`;

            let i = 0;
            let arr = [...pickerControls];
            let lastIndex = arr.length -1; 

            if(carousel.scrollLeft === 0){
                arr[i].classList.remove('active')
                arr[1].classList.add('active')
                backwardBtn.classList.remove('disabled')

            }

            else if(carousel.scrollLeft >= 0){
                arr[1].classList.remove('active')
                arr[lastIndex].classList.add('active')
                forwardBtn.classList.add('disabled')
            }
        })

        // Carousel Element
        carousel.addEventListener("wheel", function(){
            e.preventDefault();
            carousel.scrollLeft += e.deltaY;
            carousel.style.scrollBehavior = "auto";
        })

        // add active class to picker control

        function eventHandler(index) {
            carouselViews.forEach((view, i)=>{
                pickerControls[i].classList.remove('active')
            })
            pickerControls[index].classList.add('active')
        }

        carouselViews.forEach((view, i)=>{
            pickerControls[i].addEventListener('click', ()=>{
                eventHandler(i)
            })
        })

From the code example above, the code snippet performs the following functions;

The carousel variable is attached to an addEventListener method that listens for the mouse scroll wheel. This enables the carousel to scroll when a user scrolls the mouse wheel.
The forwardBtn variable is attached to an addEventListener method that listens for a click and takes a callback function with a preventDefault() method and scrollLeft property that scrolls the carousel to 900px width when the user clicks the button.
The backwardBtn variable behaves the same way as the forwardBtn variable, but the scrollLeft property is set to minus 900px. This moves the carousel slides backward.
The eventHandler methods remove and add active classes.
The carouselViews is attached to a forEach method that loops through each element (view) of the carouselViews. Then each element of the pickerControls takes an addEventListener of click that returns a callback function of eventHandler.

This enables the slider to add an active class to the pickerControl element to indicate the active element based on the user’s click.

Test your native app and website on real iOS and Android devices hosted on the cloud. LambdaTest is a convenient cloud android device, cost-effective and centralised solution .

Banner Carousels

Banner carousels are types of carousels found primarily on e-commerce platforms. It helps businesses showcase their product in the form of ads.
Unlike other carousels, banner carousels do not require users to navigate through them as they are set to rotate on page load.

The banner carousel sits typically on top of the page and rotates continuously, one slide at a time. For example, a simple banner carousel from eBay sits on top of the site and displays different types of ads in a slideshow manner.

Here, we can see how products are categorized and displayed as ads.

Now, let’s see how to implement a banner carousel. The below example shows how this is done.

From the code sample above, we have three image carousels, each occupying the browser viewport.

Beside these carousel image slides are the Previous Slide Control and Next Slide Control buttons for navigating the image slides back and forth.

Below the image slide are the Slide Picker Controls for navigating to a specific part of the page. Each picker control is set to a background-color of gold for determining which slide is currently active.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel banner </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <main>
        <article>
            <!-- Image Slides -->
            <aside role="banner" aria-label="carousel">
                <div class="image-slides" id="groupImages">
                    <div id="imageOne" class="image I-one" role="img" aria-describedby="A14 Bionic rockets past other smartphone chip iPhone 12 pro">
               <img src="https://user-images.githubusercontent.com/78242022/273443252-b034e050-3d70-48ef-9f0f-2d77ef9b2604.jpg" alt="">
                    </div>

                    <div id="imageTwo" class="image I-two" role="img" aria-describedby="Calling People Easier then ever. Microsoft smartwatch">
                        <img src="https://user-images.githubusercontent.com/78242022/273443248-130249b5-87b7-423d-9281-48d810bcd30d.jpg" alt="">
                    </div>

                    <div id="imageThree" class="image I-three" role="img" aria-describedby="Re-Imagine Optical Excellence with canon DSLR camera">
                        <img src="https://user-images.githubusercontent.com/78242022/273443251-9c210d6f-35ba-4861-885e-9b2e684ab339.jpg" alt="">
                    </div>
                </div>
            </aside>

             <!-- Slider control buttons -->
            <aside>
                <div class="slider-controls">
                    <button id="rightBtn" class="right-Btn icon-btn"></button>
                    <button id="leftBtn" class="left-Btn icon-btn"></button>
                </div>
            </aside>

            <!-- Slide Picker Controls -->
            <aside>
                <div class="picker-controls">
                    <a href="#imageOne" class="picker active"></a>
                    <a href="#imageTwo" class="picker"></a>
                    <a href="#imageThree" class="picker"></a>
                </div>
            </aside>
        </article>
    </main>
<script src="main.js"></script>
</body>
</html>

The code above includes semantic HTML elements, Roles, and ARIA attributes to provide structure and information for assistive technologies.

Using aria-label, aria-describedby, and alt attributes helps provide meaningful information about the carousel to users who rely on screen readers or other assistive technologies.

*< aside >: **The *aside elements serve as a wrapper for the sliders in the carousel. It takes a role=”banner” to indicate that the first < aside > element serves as a banner. The aria-label=”carousel” provides a label for assistive technologies to identify this banner as a carousel.
*Image Slides: **Each *< div > with class image represents a slide in the carousel, and role=”img” indicates that these are images. The aria-describedby provides a description for each image that screen readers can read.
*Slider Control Buttons: **The buttons have *role=”button” to indicate that they are interactive elements and can be read by screen readers. These buttons include the forward and backward buttons for navigation.
Slide Picker Controls: They have a class picker, which suggests they are used to select specific slides. The first link has class active, indicating it’s the currently selected slide.

CSS:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: 0;
}

*,*::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

main {
    display: grid;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.image-slides {
    width: 100vw;
    height: 50%;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.image {
    flex: 0 0 100vw;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    overflow: hidden;
}

.image > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-controls {
    display: flex;
}

.right-Btn, .left-Btn {
    background: none;
    border: none;
    width: 3em;
    height: 6em;
    padding: 2em 10px;
    display: block;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 3em;
    position: absolute;
    bottom: 45%;
    z-index: 6;
}


.right-Btn {
    background-image:url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23fff\' viewBox=\'0 0 8 8\'%3e%3cpath d=\'M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z\'/%3e%3c/svg%3e");
    right: 3em;
}

.left-Btn {
    background-image:url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23fff\' viewBox=\'0 0 8 8\'%3e%3cpath d=\'M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z\'/%3e%3c/svg%3e");
    left: 3em;
}

.right-Btn::after, .left-Btn::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(255, 166, 0, 0.397);
    position: absolute;
    inset: 0;
    transition: background 0.5s linear;
    z-index: 1;
}

.image-slides::-webkit-scrollbar {
        display: none;
    }

.right-Btn:hover::after, .left-Btn:hover::before {
    background-color: rgba(255, 166, 0, 0.568);
}

.picker-controls {
    display: flex;
    justify-content: center;
    gap: 1em;
    transform: translateY(-30px);
}

a {
    text-decoration: none;
    width: 2.5em;
    height: 0.5em;
    background-color: white;
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

a:hover {
    opacity: 1;
}

.active {
    background-color: gold;
    opacity: 1;
}

JavaScript:

const rightBtn = document.querySelector("#rightBtn");
const leftBtn = document.querySelector("#leftBtn");
const imageSlides = document.querySelector(".image-slides");
const images = document.querySelectorAll(".image");

const imageSize = document.querySelector(".image").clientWidth;

const pickerControls = document.querySelectorAll(".picker");

// Control Picker Element
const pickerOne = document.querySelector('[href="#imageOne"]');
const pickerTwo = document.querySelector('[href="#imageTwo"]');
const pickerThree = document.querySelector('[href="#imageThree"]');

rightBtn.addEventListener("click", moveForward);
leftBtn.addEventListener("click", moveBackward);

function moveForward(e) {
  imageSlides.scrollLeft += `${imageSize}`;  

  if (imageSlides === 0) {
    pickerTwo.classList.add("active");
    pickerOne.classList.remove("active");
  } 

  else if (imageSlides.scrollLeft === 1366) {
    pickerThree.classList.add("active");
    pickerTwo.classList.remove("active");
  } 

  else if (imageSlides.scrollLeft === 2732) {
    imageSlides.scrollLeft = 0;
    pickerOne.classList.add("active");
    pickerThree.classList.remove("active");
    console.log(imageSlides.scrollLeft);
  }
}

function moveBackward() {
  imageSlides.scrollLeft -= imageSize;
}

setInterval(moveForward, 1000)

// activating Active Links on Control Picker
function returnActiveLink(index) {
  images.forEach((image, i) => {
    pickerControls[i].classList.remove("active");
  });
  pickerControls[index].classList.add("active");
}

images.forEach((image, i) => {
  pickerControls[i].addEventListener("click", () => {
    returnActiveLink(i);
  });
});

Test your native app and website on real iOS and Android devices hosted on the cloud. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test on cloud device for testing.

From the browser output above, the carousel is set to 100 viewport width on the desktop and positioned to the middle of the page. Shown below is the output on LT Browser on different screen sizes. This will help to check how banner carousels perform in terms of responsiveness on different device viewports like desktops, mobiles, and tablets.

LT Browser is a free, Chromium-based browser for web developers to help them build, test, and debug their websites and web applications across various pre-installed device viewports. It’s a desktop application that offers a variety of features to make responsive testing easier and more efficient.

Here are some of the key features of LT Browser:

50+ pre-installed device viewports: You can test your website on a variety of popular devices, including smartphones, tablets, laptops, and desktops, without having to manually configure each one.
Live interactive testing: You can interact with your website in real-time as you test it on different devices, making it easy to identify and fix any issues.
Network throttling: You can simulate different network conditions, such as slow 4G or offline, to see how your website performs under different circumstances.
Screenshot and bug reporting: You can easily take screenshots of your website on different devices and report bugs directly to your project management tool.
Integrations with popular tools: LT Browser integrates with various tools, such as Jira, Asana, Trello, GitHub, ClickUp, Slack, and Microsoft Teams.

Desktop Preview:

Mobile Preview:

Tablet Preview:

Test your native app and website on real iOS and Android devices hosted the mobile device cloud. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test on real device cloud.

Testimonial Carousels

Adding testimonials to your web page is a great way to instill confidence in a user about your product. This can quickly be done by creating a simple HTML mockup and CSS styling that displays the testimonials on the page.

However, there are cases where there are many testimonials to display. In this case, the testimonials can be implemented as a carousel that displays several testimonials from a single view. For example, Hashnode uses sample slide animation testimonials to display to the users on the home page.

Similar examples can also be seen on CodeSandbox.
Lambdatesting GIFs on GIPHY - Be Animated

Now, let’s see how to implement the above cases on a web page.

Example:

The example above shows how multiple elements can be implemented as a carousel that animates horizontally across the page.

The element animation-iteration-count is set to infinite to enable the animation sequence to keep repeating itself. In contrast, the animation-play-state is set to run to keep the animation going.

However, each animation is set to pause on hover to stop it from running. This is very useful as it lets users pause the animation and read the testimonials.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel Hover</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <main class="main">
        <aside class="card-group g1" role="main" aria-label="carousel">
            <!-- Card One -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">
                    Awesome job you did there <em>@lambdatesting</em> with the LT Browser. It's doing a fantastic job at responsive testing 🔥 see more >
                </p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654602-6b6c4303-587d-48ae-957a-3b88496f1fcc.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Mbaziira Ronald</h4>
                        <p class="at">@MbaziiraRonn</p>
                    </span>
                </div>
            </section>

            <!-- Card Two -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Amazing Test software. I am very satisfied, I think it is excellent software and as the years go by it continues to offer the best service I have ever tried....see more ></p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654585-d0774fd3-5d90-42f0-bc53-7141f7735825.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Elias M.</h4>
                    </span>
                </div>
            </section>

            <!-- Card Three -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Anyone who needs to test their code on different platforms try <em>@lambdatesting</em> Great service from this company!</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013776-40ac50f1-31f8-4250-acb2-05f16d683baa.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Stephan Smuts</h4>
                        <p class="at">spsmuts</p>
                    </span>
                </div>
            </section>

            <!-- Card Four -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">See how <em>@lambdatesting</em> is #Futureready to enable blazing-fast test orchestration seamlessly integrated with organizations' existing CI/CD platforms, using #Microsoft Azure.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654608-d291d9df-439c-4a79-83b1-2f2d71cd25b5.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Microsoft India</h4>
                        <p class="at">@MicrosoftIndia</p>
                    </span>
                </div>
            </section>

            <!-- Card Five -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Amazing Experience. That reduces a large amount of cost as well as manhours which can be used for other better things. In our team we have integrated lambdatest with our automation CI/CD pipeline, this shows how we trust <em>@lambdatesting</em>...see more >.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654585-d0774fd3-5d90-42f0-bc53-7141f7735825.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Padma kumar M.</h4>
                    </span>
                </div>
            </section>

             <!-- Card Six -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial"><em>@lambdatesting</em> Efficient and User-Friendly Cross-Browser Testing with LambdaTest...see more ></p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013732-785b0223-9774-4918-964f-ce75f11138f2.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Ravi Kanth G.</h4>
                    </span>
                </div>
            </section>
        </aside>

        <!-- Group 2 -->
        <aside class="card-group g2">
            <!-- Card One -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Thank you <em>@lambdatesting</em> for providing free open source license to run the web and mobile tests of our open source projects for free on Lambdatest platform.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013783-757ea2d1-e396-4d56-ade8-8b641f78ce71.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Mohammad Faisal Khatri</h4>
                        <p class="at">@faisalkhatri</p>
                    </span>
                </div>
            </section>

            <!-- Card Two -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Super top notch customer support from <em> @lambdatesting</em> - just throwing it out there if you're looking for a decent browser testing platform, they get my full double thumbs up. Thumbs upThumbs up :-) </p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013790-4d674d96-a311-47c3-9b7c-03feaa36c948.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Ben Pritchard</h4>
                        <p class="at">@yesiamben</p>
                    </span>
                </div>
            </section>

             <!-- Card Three -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial"><em> @lambdatesting</em> is fantastic. Cross browser and device testingtesting frustration is minimized. You can't get rid of clients that need ie11 nor can you own every device but lambda test bridge that gap.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013776-40ac50f1-31f8-4250-acb2-05f16d683baa.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Mat Gargano</h4>
                        <p class="at"> @matgargano</p>
                    </span>
                </div>
            </section>

            <!-- Card Four -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">second-day using <em> @lambdatesting</em> and it's already proven itself a lot faster than Cross Browser Testing and BrowserStack, at half the price! bargain</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013762-54201d6a-0923-4969-948c-790dec804253.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Matthew Bryson</h4>
                        <p class="at"> @mbrysonuk</p>
                    </span>
                </div>
            </section>

            <!-- Card Five -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Really superb customer service from Arpit <em>@lambdatesting</em> tricky Automation problem using Selenium in Python and they talked me through it and got me up-and-running. Awesome.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013745-c09f21ff-cb29-49df-9110-d5e90810b5b9.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Michael (Mike) Horne</h4>
                        <p class="at">@recantha</p>
                    </span>
                </div>
            </section>

            <!-- Card Six -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial"><em>@lambdatesting</em> can I just say, your support team are first class. I had the pleasure of talking with Prateek Singh. He went the extra mile and nothing was too much trouble. Clearly your support is also very technically adept, something which I really value. Thank you!</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013732-785b0223-9774-4918-964f-ce75f11138f2.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Timothy Wintle</h4>
                        <p class="at"> @timwintle1979</p>
                    </span>
                </div>
            </section>
        </aside>

        <!-- Group 3 -->
         <aside class="card-group g3">
            <!-- Card One -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Also I recommend using <em> @lambdatesting</em> for testing out in all the devices. I am personally using it for my MERN project testing as well.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654599-4bc5d6e9-da64-47fd-83ae-4cbf109fed16.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Masroor Ejaz</h4>
                        <p class="at">@MasroorEjaz</p>
                    </span>
                </div>
            </section>

            <!-- Card Two -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Checkout LambdaTest -<em>@lambdatesting</em> Perform manual or automated cross browser testing on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser test... see more ></p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654591-2bc192b0-9c97-4fbf-a55c-e60791acc4c6.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Dev Tools</h4>
                        <p class="at">@finddevtools</p>
                    </span>
                </div>
            </section>

            <!-- Card Three -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Browser for Designers & UI Developers Need to Test your App on Multiple Devices ? 🤔 Meet LT Browser by <em>@lambdatesting</em> See more ></p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654594-c037ce6e-6fdc-42f9-a4f6-07419089b689.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Satyam Anand</h4>
                        <p class="at">@IncodeSatx</p>
                    </span>
                </div>
            </section>

            <!-- Card Four -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Quick way to test IE and MAC OS specific issues. Ability to spawn an instance within seconds and start working instantly....see more ></p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654625-985aaf83-2f72-4a57-9eb3-10fbe52d8413.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Syed Haroon P.</h4>
                    </span>
                </div>
            </section>

            <!-- Card Five -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial">Really superb customer service from Arpit <em>@lambdatesting</em> </em> tricky Automation problem using Selenium in Python and they talked me through it and got me up-and-running. Awesome.</p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/266013745-c09f21ff-cb29-49df-9110-d5e90810b5b9.png" alt="">
                    </span>
                    <span class="s2">
                        <h4 role="heading" aria-label="4">Michael (Mike) Horne</h4>
                        <p class="at">@recantha</p>
                    </span>
                </div>
            </section>

            <!-- Card Six -->
            <section class="card c1">
                <p class="text" role="paragraph" aria-label="testimonial"><em>@lambdatesting</em> #TestMuConf 2023 has been interesting so far with lots of quality sessions with industry experts sharing from their wealth of knowledge and experience... Thank you LambdaTest for hosting this conference... see more ></p>
                <div>
                    <span class="s1">
                        <img src="https://user-images.githubusercontent.com/78242022/272654627-1536d3df-c0f2-414c-b631-0bd1159db223.png" alt="">
                    </span>
                    <span class="s2">
                      <h4 role="heading" aria-label="4">WALIU ANUOLUWAPO SANNI</h4>
                        <p class="at">@WALIUANUOLUWAPOSANNI</p>
                    </span>
                </div>
            </section>
        </aside><!-- End of Group 3 -->
    </main>
</body>
</html>

Test your native app and website on real Android devices online. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test on real device cloud.

From the code sample above, the element is broken down into six cards, and each six cards is divided into three groups.

*Cards: **Each card contains a paragraph with a *role=’’paragraph” indicating that it should be read as a paragraph by screen readers, and aria-label=”testimonials” indicating that this paragraph should be read as a testimonial.
**Card numbers and group: **The cards are numbered into six and grouped into three, making it possible for users to interact with each group individually rather than with each card.

CSS:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: 0;
}

body{
    background-color: #EEF5FF;
    overflow-x: hidden;
}

.main {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
}

.card-group{
   display: flex;
   gap: 1em;
}

.card {
    width: 445px;
    height: fit-content;
    padding: 15px 30px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
    -webkit-user-select: none;

    user-select: none;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #aaaaaa;

    transform: translate(-1800px);

        animation-name: moveforward;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 10s;
        animation-play-state: running;
}

.g1 .card, .g3 .card {
    transform: translate(1800px);
    animation-duration: 20s;
    animation-name: movebackword;
}

.g1:hover .card {
    animation-play-state: paused;
}

.g2:hover .card {
    animation-play-state: paused;
}

.g3:hover .card {
    animation-play-state: paused;
}


.card .text {
    font: 14px Arial;
    color: #4a4a4a;
    line-height: 21px;
}

.card h4 {
    font: 16px Arial;
    font-weight: 600;
    color: black;
}

.card .at {
    font: 16px Arial;
    font-weight: 400;
    color: #007bff;
    margin-top: 4px;
}

.card img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.card div {
    display: flex;
    margin: 10px 0 0;
    gap: 10px;
}
em {
    font-style: normal;
    color: #007bff;
}

@keyframes moveforward {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-1800);
    }
}

@keyframes movebackword {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(1800);
    }
}

In the next section of this article, we will look at how to ensure accessible carousels by performing accessibility testing.

**Test on android device online with our platform. Ensure compatibility and performance on real devices instantly. Start testing now!**

How to Test the Accessibility of Carousels?

Ensuring accessible carousels requires screen readers to test different page sections. This is very useful when a carousel element with WAI-ARIA is implemented on each component, such as buttons, slides, slider picker controls, containers, etc.

To test how screen readers read the specified WAI-ARIA Roles, States, and Properties defined on the carousel elements, you can leverage cloud-based accessibility testing platforms to ensure accessible carousels on different combinations of browsers and operating systems.

AI-powered test orchestration and execution platforms like LambdaTest offer accessibility testing of websites and web apps on over 3000+ real browsers and OSes.

We use the LambdaTest screen reader feature on Real Time Browser Testing to run accessibility checks. This will read the WAI-ARIA Roles, States, and Properties specified on the element as audible text, giving the same user experience as a visually impaired user.

Check out the tutorial below that explains how to test websites in Real Time on the LambdaTest platform.

Subscribe to the LambdaTest YouTube Channel to catch up with the latest videos on Selenium testing, automation testing, and more.

To make sure the carousels are accessible to all users, there are a few best practices that must be followed. Let’s look at some of the best practices to create accessible carousels.

**Test on real mobile devices for your native app and website on real iOS and Android devices hosted in the cloud. LambdaTest provides a convenient, cost-effective, and centralized solution for conducting real-time and automated tests on a real device cloud.**

Best Practices for Accessible Carousels

To ensure carousels are well implemented, we can consider the following best practices.

**Easy navigation: **Ensure that the carousel slides are easily navigated by implementing navigation controls and control pickers.
**Image quality and bold text: **Quality images with bold text should be implemented to encourage users to click through the slides.
**Reduce the number of slides: **Avoid multiple carousel slides to maximize engagement.
**Design consistency: **Ensure all elements, slides, and navigation controls, maintain consistent style in appearance such as height, width, colors, fonts, etc.
**Avoid autoplay sounds: **Ensure sounds are disabled to prevent unpleasant sounds. Users should be given the option to enable sounds for a better experience.
**Semantics: **To ensure that carousels are compatible across multiple browsers, developers should write well-semantic mockups and use the appropriate WAI-ARIA Roles, States, and Properties when implementing accessible features on mockups.
**Performance tracking and analytics: **Track the performance of the carousel to understand how users interact with each carousel component.
*Fallback options via vendor prefixes: **Vendor prefixes such as *-webkit-, -moz-, and -ms- just to mention a few, should be used on properties that require vendor prefixes to work well. This will help create a good fallback for legacy browser versions.

Adequate testing should be implemented to ensure the carousel components, such as previous slide control, next slide control, slide picker controls, and pause/play control, are rendered correctly on different browsers for a better user experience.

Test your native app and website on android real device testing. LambdaTest offers a convenient, cost-effective, and centralized solution for running real-time and automated tests on real device cloud.

Conclusion

Carousels help boost users’ engagement and prevent endless scrolling in search of related content or items on the page. However, to create accessible carousels, WAI-ARIA Roles, States, and Properties that enable carousels to be accessible need to be specified within the semantic HTML mockups of the carousel components.

Accessible carousels enable assistive technology tools such as screen readers, text-to-speech, and refreshable braille display software to read WAI-ARIA, Roles, States, and Properties as audible speech for visually impaired users.

Ensure you test each WAI-ARIA Roles, States, and Properties specified on the carousel elements using accessibility testing tools. This will enable you to get real user feedback on how the carousel will be used for visually impaired users.

Frequently Asked Questions (FAQs)

What is the function of the carousel?

Carousels help showcase multiple items in limited space, promote key content, add dynamism, and save space. But remember, accessibility matters: use them wisely and prioritize inclusive design!

Why are carousels not accessible?

While carousels seem visually appealing, they create accessibility issues. Autoplay disrupts impaired users, navigation is often clunky for keyboards and screen readers, and vital information hidden in images is inaccessible. Opt for alternative layouts to ensure everyone can easily access your content.

How do I make an accessible slider?

Make your slider accessible by structuring it clearly with semantic HTML, ensuring keyboard navigation with arrow keys and dedicated shortcuts, offering screen reader compatibility through aria attributes, maintaining good contrast and focus indication, providing text alternatives for non-text content, and avoiding autoplay.

Bonus points for offering keyboard shortcuts, alternative input methods for touchscreens, and thorough testing with assistive technologies! Remember, inclusivity matters.

Try out real-time Android device testing online with our platform. Test android app on multiple devices online, ensure compatibility and performance on real devices instantly. Start testing now!

We can also see the same method replicated on the Motorola website, where each slide showcases the organization’s products as an ad. These types of carousels are banner carousels.

A Complete Guide To CSS Masking

Alex Anie — Tue, 25 Jul 2023 15:39:41 +0000

Since the inception of the web, web design has been a huge part of it. Web designers use different approaches to design web pages, but this comes with some limitations, as only some designs can be implemented on the web, especially when working with media files, image assets, or SVG files.

Things can get complex and, most times, difficult to do. For example, before the introduction of CSS masking, designers used raster graphic editing software like Photoshop to add CSS masking to images before importing them to the web.

This approach can be a herculean task, especially when working with larger or multiple images.

One can not apply CSS masking to 50 or more images before importing them for use on the web. Doing so will lead to a slow and tedious development process, not to mention. There are cases of accessibility, browser compatibility, and color contrast, just to mention a few.

To fix this problem, the CSS masking property has been added to the CSS specification. This enables the smoothness and ease of applying masks to images on the web.

In this blog, we will explore what is CSS masking and how to apply CSS masking to blend images, videos, text, SVGs (Scalable Vector Graphics). We will also look at CSS masking properties and sub-properties, CSS mask border properties, browser compatibility, and other CSS masking properties and their use cases.

Let’s get started!

This article will walk you through the best software automation testing certification that will help boost your career as a test automation engineer.

What is CSS Masking

CSS masking involves partially or fully hiding parts of a visual element, such as images, videos, or SVGs. Applying CSS masking involves using another graphical element, such as images, SVGs, or text, as an alpha or luminance mask.

When using an alpha mask, the object receiving the mask conforms to the shape of the object that is applying the mask. The shape becomes visible while other parts of the element become partially or fully hidden.

Let’s look at an example:

From the illustration above, we have two images, one with a *jpg *and the other with a *png *file extension. The *png *image supports transparency, which is best for CSS masking.

To make the CSS masking technique work, the mask.png *is used as a mask to cover the *image.jpg file revealing only the portion of the mask image shape.

Look at the below image for a clear vision:

Learn why Python is the top choice for automation testing. This comprehensive tutorial provides a step-by-step guide to automation testing using python to help you streamline your testing process.

Contrary to what you would think, CSS masking doesn’t crop out the image; instead, it hides part of the surrounding area of the object leaving only the mask area. This enables us to style the mask using the mask properties.

Real-Life Examples of Websites using CSS Masking

CSS masking has many benefits. It allows web designers and developers to hide parts of an element on the web. This can be either through text, PNG image shapes, or SVG elements. However, masking in CSS is not limited to hiding parts of an element. It can also be used to apply transparency to web elements, making the element blend well with the web page’s background.

Let’s look at real-world examples of where CSS masking has been used on popular websites.

Making Content Text

Here is a simple example of how LambdaTest used CSS masking to hide some parts of the content from the user with an option to reveal upon click (the Read More button). This limited the amount of content exposed to the user when browsing the website.

This technique can be very helpful as it allows users to scroll through multiple options before deciding on the actual top to read.

However, it can also be used to restrict who gets access to particular content, such as exclusive content for subscribers.

Here is a perfect example from the Atlantic.

Here, some parts of the web page are faded for subscribers only. This gives web authors control over who reads the content they publish on their website.

Get started with this comprehensive automation testing using Selenium tutorial. Learn what Selenium is, its architecture, advantages and more for automated cross browser testing.

Linear Gradient Fading

While making content is great and has benefits, Images can also be blended with the page’s background.

This technique is handy, especially with landing pages. The MasterClass is a perfect example of how making images with linear gradients can improve user experience.

As you can see from their website, the CTAs buttons and display text have good color contracts from the background image and the web page’s background.

CSS is masking an image with a linear gradient that works simply. The black in the alpha channel is used to hide some parts of the image. The size or direction of the mask can be specified in the degree to determine how large the mask should grow to cover the selected image.

Browser Compatibility

The browser compatibility for CSS masking is not fully supported in all browsers at the time of writing.

Browsers such as Chrome, Opera, and Edge have partial support and require the use of the -webkit- prefix for the property to function correctly. However, Safari and Firefox fully support specifying the property without vendor prefixes.

Source- caniuse.com

CSS Masking Properties

The CSS masking properties are required when you want to add additional styling to a masking effect. For example, we can create a mask with the mask-image property and reposition it with the mask-position property.

The above image illustrates how to use the mask property in CSS masking.

Prepare to ace your NUnit interviews questions with our thorough set of solutions that will enable you to prove your command of the NUnit testing framework.

mask-image property

The mask-image CSS masking property enables objects that support transparency to be used as a mask for another object or element.

The mask-image CSS masking property uses the url() CSS function to set the URL of the object to be used as a mask. However, in the absence of an image or SVG file, a gradient mask can be applied to the object

Syntax:

 /* Keyword value */
mask-image: none;

 /*   Using gradient     */
-webkit-mask-image: linear-gradient(#000, transparent);
mask-image: linear-gradient(#000, transparent);

/*   Using images */
-webkit-mask-image: url('/img/curved-triangle.svg');
mask-image: url('/img/curved-triangle.svg');

/*   Global Values  */
mask-image: initial;
mask-image: inherit;
mask-image: revert;
mask-image: unset;
mask-image: revert-layer;

Applying a gradient to mask-image

Here, we used the mask-image CSS masking property to apply a gradient mask to a specific element on the web page.

HTML:

<main class="main">
        <!-- Section One -->
        <section class="normal-container">
            <h1>Normal Image</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="normal">
        </section>

        <!-- Section Two  -->
        <section class="masking-container">
            <h1>Gradient Mask</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="masking">
        </section>
</main>

CSS:

 body {
            overflow: hidden;
        }

        .main{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            gap: 10px;
        }

        img {
            width: 100%;
        }

        h1 {
            font-size: 3em;
            font-family: calibri;
            text-transform: uppercase;
            margin: 0;
            background-color: aqua;
            text-align: center;
        }

        .normal {
            mask-image: linear-gradient(#000, transparent);
        }

        .masking {
            -webkit-mask-image: linear-gradient(#000, transparent);
            mask-image: linear-gradient(#000, transparent);
        }

Navigate your Laravel interview with ease! Our guide covers over 190 Laravel interview questions to help you land your ideal tech job.

Chrome Preview:

From the Chrome browser preview, the mask-image: linear-gradient(#000, transparent)
only works on the second image and not the first one; this is because we set only one property on the normal-container element and the -webkit- prefix is omitted.

Firefox Preview:

From the Firefox browser preview, the mask-image: linear-gradient(#000, transparent) works on both images because a browser prefix is unnecessary for the mask-image to function correctly.

The above browser output is run on Firefox with LambdaTest Real Time Testing. LambdaTest is a digital experience testing platform that allows you to check your CSS framework-based web projects across desktop and mobile environments. It lets you perform manual and automated testing on an online browser farm of 3000+ real browsers, devices, and operating systems combinations.

To get the best result when working with the mask-composite property, try using Firefox instead of Chrome due to browser compatibility issues.

Subscribe to LambdaTest YouTube Channel and get detailed tutorials around Selenium automation testing, Cypress testing, and more.

Applying gradient direction to mask-image

We’ve seen how to apply gradients; the next thing to do is use the direction to linear gradients in mask-image.

HTML:

<main class="main">
        <!-- Section One -->
        <section class="normal-container">
            <h1>to top</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="to-top">
        </section>

        <!-- Section Two  -->
        <section class="masking-container">
            <h1>To right</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="to-right">
        </section>

        <!-- Section Two  -->
        <section class="masking-container">
            <h1>to bottom</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="to-bottom">
        </section>

        <!-- Section Two  -->
        <section class="masking-container">
            <h1>to left</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="to-left">
        </section>
</main>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    img {
        width: 100%;
    }

    h1 {
        font-size: 3em;
        font-family: calibri;
        text-transform: uppercase;
        margin: 0;
        background-color: aqua;
        text-align: center;
    }

    /* Fading the image from the bottom to the top */
    .to-top {
        mask-image: linear-gradient(to top, transparent, #000);
        -webkit-mask-image: linear-gradient(to top, transparent, #000);
    }

    /* Fading the Image from left to right */
    .to-right {
        mask-image: linear-gradient(to right, transparent, #000);
        -webkit-mask-image: linear-gradient(to right, transparent, #000);
    }

    /* Fading the image from top to bottom */
    .to-bottom {
        mask-image: linear-gradient(to bottom, transparent, #000);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
    }

    /* Fading the image from right to left */
    .to-left {
        mask-image: linear-gradient(to left, transparent, #000);
        -webkit-mask-image: linear-gradient(to left, transparent, #000);
    }

Output:

Ace your Unit testing interviews with our comprehensive Unit testing interview questions and solutions for unit testing, covering topics from syntax to advanced techniques.

Preview:

Here, we applied a linear gradient to four different directions on four separate elements on the web page.

Applying gradient angle in the degree to mask-image

We can also specify the direction of the mask-image gradient in degrees. This will enable the angle to move in different directions.

HTML:

<main class="main">

        <!-- Section Two  -->
        <section class="masking-container">
            <h1>Side by side masking</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="left-right">
        </section>

        <!-- Section Two  -->
        <section class="masking-container">
            <h1>Top and Bottom Masking</h1>
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="top-bottom">
        </section>
</main>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    img {
        width: 100%;
    }

    h1 {
        font-size: 3em;
        font-family: calibri;
        text-transform: uppercase;
        margin: 0;
        background-color: aqua;
        text-align: center;
    }

    .left-right{
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent 100%);
    }

 .top-bottom{
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 60%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent, #000 20%, #000 60%, transparent 100%);
    }

Output:

This tutorial focuses on mobile ui testing, its significance, benefits, strategies, challenges, and best practices.

Preview:

Here, we specify the mask-image gradient to an angle of 90 deg and 180 deg, respectively.

Applying image to mask-image

Applying images to mask-image is very similar to the linear gradients we explained earlier. The CSS url() function is used to apply images as a mask-image.

HTML:

<main class="main">
        <!-- Section Two  -->
        <section class="masking-container">
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="masking-svg">
        </section>
</main>

CSS:

body {
overflow-x: hidden;
}
.main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
place-items: center;
height: 100vh;
}
img {
width: 100%;
}
.masking-svg {
-webkit-mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
-webkit-mask-size: 100px;
mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
mask-size: 100px;
-webkit-mask-mode: alpha;
}

Output:

Preview:

The mask-image property behaves like the background property, so when you apply a single image, it repeats itself to fill the containing element, as shown above.

To fix this, the mask-repeat is set to no-repeat.

mask-repeat property

The mask-repeat CSS masking property determines the direction in which the mask image should repeat. This could be either vertical or horizontal. It also determines the space between the repeated mask image.

The mask-repeat can be set to no-repeat to stop the mask image from repeating. Like the background-repeat property, the mask-repeat is set by default to repeat.

Syntax:

/* repeat values */
-webkit-mask-repeat: repeat;
-webkit-mask-repeat: no-repeat;
-webkit-mask-repeat: space;
-webkit-mask-repeat: round;
-webkit-mask-repeat: repeat-y;
-webkit-mask-repeat: repeat-x;

/* Specifying the horizontal and Vertical repeat */
-webkit-mask-repeat: space repeat;
-webkit-mask-repeat: no-repeat round;
-webkit-mask-repeat: round space;

/*   Global Values  */
-webkit-mask-image: initial;
-webkit-mask-image: inherit;
-webkit-mask-image: revert;
-webkit-mask-image: unset;
-webkit-mask-image: revert-layer;

Values:

repeat: sets the mask-image to repeat and fill the entire container (tile)
no-repeat: stop the mask-image from repeating
space: sets the distance between the mask-image
round: sets the mask-image to stretch to fit the available space within the container
repeat-y: sets the mask-image to repeat in the y-axis (vertical)
repeat-x: sets the mask-image to repeat in the x-axis (horizontal)

HTML:

<main class="main">

        <!-- Section Two  -->
        <section class="masking-container">
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="masking-svg">
        </section>
</main>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .masking-svg {
        /* Chrome and other webkit browsers */
        -webkit-mask-image:   url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
      /*    Image Credit credit at tympanus.net   */
        -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100px;

        /* Firefox */
        mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        mask-repeat: no-repeat;
    }

Output:

Explore our in-depth guide comparing Protractor vs Selenium to make informed decisions for your test automation needs. Gain valuable insights into the key differences, advantages, and ideal use cases of these widely-used testing frameworks.

Preview:

Here, the no-repea*t values set the *mask-image to stop repeating and display just one image.

mask-size property

The mask-size CSS masking property determines the size of the mask-image. The keyword values can be used to determine a specific size ratio or multiple length values can be specified in one declaration.

Syntax:

/* Keyword values */
-webkit-mask-size: auto;
-webkit-mask-size: contain;
-webkit-mask-size: cover;

/* Length values */
-webkit-mask-size: 500px;
-webkit-mask-size: 15rem;
-webkit-mask-size:   2em;
-webkit-mask-size:   30%;

/* Vertical and Horizontal Axes*/
-webkit-mask-size:   20%  20rem 20%;
-webkit-mask-size:   200px 10em;

/* Global Values  */
-webkit-mask-image: initial;
-webkit-mask-image: inherit;
-webkit-mask-image: revert;
-webkit-mask-image: unset;
-webkit-mask-image: revert-layer;

HTML:

<main class="main">
        <!-- Section Two  -->
        <section class="masking-container">
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="masking-svg">
        </section>
</main>

CSS:

  body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .masking-svg {
          /* Chrome and other webkit browsers */
        -webkit-mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 17em;

        /* Firefox */
        mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        mask-repeat: no-repeat;
        mask-size: 17em;
    }

Output:

Boost Your Mobile App’s Performance! Discover Proven Strategies for Mobile Performance Testing. Increase User Satisfaction & Rankings. Get Results Fast!

Preview:

From the browser preview, the mask size is increased from its initial size to 17*em*.

mask-position property

The mask-position CSS masking property determines the position of the mask-image within the container of the mask object. The mask position value is mostly specified by targeting the horizontal and vertical axes in a single declaration.

The mask-position takes both length and keyword values.

Syntax:

/* Keyword Values */
-webkit-mask-position: top;
-webkit-mask-position: right;
-webkit-mask-position: bottom;
-webkit-mask-position: left;
-webkit-mask-position: center;

/* Length Values */
-webkit-mask-position: 18px;
-webkit-mask-position: 4rem;
-webkit-mask-position: 8em;
-webkit-mask-position: 50%;

/* Specifying Multiple Values */
-webkit-mask-position: 50% 50%;
-webkit-mask-position: center center;
-webkit-mask-position: 4em 50%;
-webkit-mask-position: 500px center;

/* Global Values  */
-webkit-mask-image: initial;
-webkit-mask-image: inherit;
-webkit-mask-image: revert;
-webkit-mask-image: unset;
-webkit-mask-image: revert-layer;

HTML:

 <main class="main">
        <!-- Section Two  -->
        <section class="masking-container">
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="masking-svg">
        </section>
</main>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .masking-svg {
        /* Chrome and other webkit browsers */
        -webkit-mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 17em;
        -webkit-mask-position: center center;

        /* Firefox */
        mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        mask-repeat: no-repeat;
        mask-size: 17em;
        mask-position: center center;
        }

Output:

Preview:

This guide focuses on test automation metrics, its significance, strategies, challenges, and key test automation metrics for measuring success.

From the browser preview, we position the mask-image by specifying center center values to target both the horizontal and vertical axes in one declaration.

mask-origin property

The mask-origin CSS masking property determines the origin of the mask-image. The origin, in this case, refers to the position of the element box model.

To understand how the element box model works, see the illustration below.

Using the mask-origin can be tricky and difficult at first to wrap your head around. Make sure you specify the mask-image on a block element with a closing tag. Set the background color, border, and text.

Syntax:

/* Keyword Values */
-webkit-mask-origin: margin-box;
-webkit-mask-origin: border-box;
-webkit-mask-origin: padding-box;
-webkit-mask-origin: content-box;

/* Multiple Values */
-webkit-mask-origin: content-box, padding-box;

/* Global Values  */
-webkit-mask-origin: initial;
-webkit-mask-origin: inherit;
-webkit-mask-origin: revert;
-webkit-mask-origin: unset;
-webkit-mask-origin: revert-layer;

Values:

content-box: set the mask-image position relative to the element content-box.
padding-box: set the mask-image position relative to the element padding-box.
border-box: set the mask-image position relative to the element border-box.
margin-box: set the mask-image position relative to the element margin-box.

HTML:

 <main class="main">
        <!-- Section Two  -->
        <section class="masking-container">
            <p>This is a mask-origin example: Try multiple mask origin values to see different result
            </p>
            <img src="/img/cleancoding2.png" alt="" class="masking-svg">
        </section>
</main>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .masking-container {
        border: 10px solid #000;
        background-color: #0ebac5;
        /* Chrome and other webkit browsers */
        -webkit-mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        -webkit-mask-repeat: repeat;
        -webkit-mask-size: 4em 4em;
        -webkit-mask-position: to top;
        -webkit-mask-origin: border-box;

        /* Firefox */
        mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/LT-black.png);
        mask-origin: border-box;
        mask-repeat: no-repeat;
        mask-size: 4em 4em;
        mask-position: center center; 
    }

Output:

Learn the ins and outs of test execution engines through our extensive guide, and enhance your testing workflow with automation.

Preview:

Here, the black around the logo is the border, since the mask-origin is set to border-box, the mask-origin starts positioning from the border of the element.

The mask-composite CSS masking property combines two or more mask images into a single one. To combine two images into one, for example, the mask-composite based on the value provided can either add, subtract, intersect, or exclude the images into one.

The mask-composite CSS masking property can be beneficial when the two images being combined are shapes and must be merged to form a new shape.

For accessibility and to get the desired result, PNG or SVG shapes are recommended, and for browser compatibility, Chrome does not have good support for the mask-composite property, use Firefox instead.

Syntax:

/* Keyword values */
-webkit-mask-composite: add;
-webkit-mask-composite: subtract;
-webkit-mask-composite: intersect;
-webkit-mask-composite: exclude;
/* Global Values */
-webkit-mask-image: initial;
-webkit-mask-image: inherit;
-webkit-mask-image: revert;
-webkit-mask-image: unset;
-webkit-mask-image: revert-layer;

Values:

add: both images (png or svg shapes) are added together to form a single image.
subtract: the second image is subtracted from the first to form a single image.
intersect: both images (png or svg shapes) are intersected from the overlapping angle.
exclude: non-overlapping angles of both images are combined.

HTML:

 <main class="main">
        <!-- Section Two  -->
        <section class="masking-container">
            <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" class="masking-svg">
        </section>
</main>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .masking-svg {
        /* Chrome and other webkit browsers */
        -webkit-mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/curved-triangle.svg), url(https://raw.githubusercontent.com/ocxigin/we-love-ms/f786a998033224e244ce818ae6035ce4826df85a/img/Star.svg);

        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 17em;
        -webkit-mask-position: center center;
        -webkit-mask-origin: border-box;
        -webkit-mask-composite: add;

        /* Firefox */
        mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/curved-triangle.svg), url(https://raw.githubusercontent.com/ocxigin/we-love-ms/f786a998033224e244ce818ae6035ce4826df85a/img/Star.svg);

        mask-repeat: no-repeat;
        mask-size: 17em;
        mask-position: center center;
        mask-origin: border-box;
        mask-composite: add;

Output:

Preview:

This guide explores Digital Transformation, its benefits, goals, importance and challenges involved in Digital Transformation.

mask-clip property

The mask-clip CSS masking property is used to set the area to which the mask will be applied. Depending on the value assigned to the mask-clip property, the mask can be clipped to the margin-box, border-box, padding-box, or content-box.

However, fill-box, stroke-box, and view-box are also values that determine the area mask-clip applies to, but they are used when working with SVGs.

Syntax:

/* Keyword Values Element*/
-webkit-clip-origin: margin-box;
-webkit-clip-origin: border-box;
-webkit-clip-origin: padding-box;
-webkit-clip-origin: content-box;
-webkit-clip-origin: no-clip;

/* Keyword Values SVGs*/
-webkit-clip-origin: fill-box;
-webkit-clip-origin: view-box;
-webkit-clip-origin: stroke-box;

/* Multiple Values */
-webkit-clip-origin: content-box, padding-box;

/* Global Values  */
-webkit-clip-image: initial;
-webkit-clip-image: inherit;
-webkit-clip-image: revert;
-webkit-clip-image: unset;
-webkit-clip-image: revert-layer;
}

Values:

margin-box: set the mask to start clipping from the margin of the box.
border-box: set the mask to start clipping from the box’s border.
padding-box: set the mask to start clipping from the padding of the box.
content-box: set the mask to start clipping from the box’s content.
no-clip: the mask is not clipped to the box.
fill-box: set mask to clip to the object bounding box.
*fill-stroke: *set mask to clip to the object stroke bounding box.
*view-box: *use the SVG view-box as a reference for clipping to the object bounding box.

HTML:

 <div class="main">
    <!-- No Effect -->
    <section class="card">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

 body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card { 
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);

         /* Chrome and other webkit browsers */
        -webkit-mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/Star.svg);
        -webkit-mask-repeat: repeat;
        -webkit-mask-size: 5em;
        -webkit-mask-position: center center; 
        -webkit-mask-clip: content-box;

        /* Firefox */
        mask-image: url(https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/Star.svg);
        mask-repeat: repeat;
        mask-size: 5em;
        mask-position: center center; 
        mask-clip: content-box;
    }

Output:

Explore our in-depth guide comparing Protractor vs Selenium to make informed decisions for your test automation needs. Gain valuable insights into the key differences, advantages, and ideal use cases of these widely-used testing frameworks.

Preview:

From the browser preview, the mask-clip is clipped starting from the content of the box. However, to see how the mask-clip works, try experimenting with other values of the mask-clip CSS masking property.

mask-type property

The mask-type CSS masking property is used to determine the CSS masking type (mode) of the <mask> element. The mask-type is based on two values which are *luminance *and alpha.

The values (luminance and alpha) specified on the mask will determine how the mask element will render. However, the mask-mode property overrides the value set on the mask-type CSS masking property. For example, if the mast-type initial value is luminance, the mask-mode can be set to *alpha *to override it.

Syntax:

/* Keyword values */
-webkit-mask-type: luminance;
-webkit-mask-type: alpha;

/* Global Values  */
-webkit-mask-type: initial;
-webkit-mask-type: inherit;
-webkit-mask-type: revert;
-webkit-mask-type: unset;
-webkit-mask-type: revert-layer;

The mask-type property directly applies to the mask element and has two values namely luminance *and *alpha.

Source- drafts.fxtf.org

alpha

The alpha refers to the transparent part of an image (PNG) which is called the alpha channel. The alpha channel is the fourth channel of an image that supports transparency. The other three are Red, Green, and Blue, respectively, and are mostly referred to as RGB. However, the alpha channel it’s called RGBA, the “A” being the alpha channel (transparency).

Source- vectornator.io

Images that support or have alpha channels are PNG images (PSD, TGA, DDS, or TIFF also support alpha channels). Images such as JPG (jpeg) do not have an alpha channel, and as a result, transparency can not be applied to it.

An image’s alpha channel does not have color information aside from black and white. The black is used to completely hide content by masking it, while the white is used to show hidden mask content.

The degree of the alpha channel can be present as opacity, and it ranges from 0.0 to 1. Where 0 means complete transparency, and one (1) means opaque. The values can also be specified as 0.5, which means the object should be slightly translucent. This is very common when defining the box-shadow property.

The alpha channel is very useful when you want to mask out an image or apply transparency so that you can see through an element or image.

And in the case of CSS masking, when we use alpha, it’s to hide or show the specified mask element or image.

In the absence of alpha, luminance can be used.

luminance

The luminance value specifies that the luminance of the mask-image or element mask should be used instead of the transparent alpha value.

This value can be a solid black, white, or faded mask which is a computed value from the alpha channel and the image or element RGB value specified on the object.

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.26 242.77">

<mask id="maskExmaple">
    <polygon points="127.63 0 165.74 81.75 255.26 92.73 189.29 154.23 206.51 242.77 127.63 199.03 48.75 242.77 65.97 154.23 0 92.73 89.52 81.75 127.63 0" fill="black"/>
    </mask>
</svg>

<img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="" />

CSS:

body {
    display: grid;
    place-items: center;
    height: 100vh;
    background: #0ebac5;
}

svg {
    display: block;
    width: 100px;
    height: 100px;
}

img {
    display: block;
    width: 100%;
    max-width: 450px;
    margin: auto;
    -webkit-mask-image: url(#maskExmaple);
    mask-image: url(#maskExmaple);
}

mask {
    -webkit-mask-type:alpha;
    mask-type: alpha;
}

It’s important to note that as at the time of writing, the support of mask *property is not that great in Chrome and might not show on your browser due to browser compatibility issues. Try using Firefox instead.
**Output*

Boost Your Mobile App’s Performance! Discover Proven Strategies for Mobile Performance Testing. Increase User Satisfaction & Rankings. Get Results Fast!

Preview:

Here, the *alpha *value specified in the CSS masking property is used to display the star object mask that is hidden with the *black *fill specified on the SVG polygon tag in the HTML file.

mask-mode

The mask-mode CSS masking property is used to override the value set on the mask-type property. For example, if the mast-type initial value is alpha, the mask-mode can be set to *luminance *to override it.

The mask-mode CSS masking property takes three values: luminance, alpha, and match-source.

Unlike the luminance *and *alpha *value, which are very specific, the *match-source, depending on the source of the object, is used as a mask. If SVG is used as a mask, the SVG luminance *value should be used as a mask on the image layer. However, if <*image> is used as a mask, the alpha value of the image should be used as a mask on the image layer.

From the previous example, we have an SVG as a mask, and we previously set it to alpha, and we set the polygon fill to black in the HTML file.

To see how the mask-mode and luminance work, change the fill in polygon to orange (you can use any color of your choice) and then set the mask-mode to luminance in the CSS file.

Your browser output should be like this.

From the browser preview, we have a slightly faded mask compared to the previous example.

Border Box Mask

Let us further discuss the properties of border box masks.

mask-border

The mask-border CSS masking property is used to set the border mask image on a specified element. The mask-border property is a shorthand property and has the following longhand properties.

mask-border-source
mask-border-slice
mask-border-mode
mask-border-width
mask-border-outset
m*ask-border-repeat*

When in use, the mask-border CSS masking property masks the edges of the specified element’s border, then the image is split into nine sections or regions by the m*ask-border-slice* property.

The mask-border-slice controls how the image is divided into regions depending on the values provided; it can also act like a background with the fill value. However, the other longhand properties are used to style the image that has been sliced.

Syntax:

  /* source | slice | width | outset | repeat | mode */
mask-border: url("icon-star.png") 25 / 35px / 12px space alpha;

  /* Global Values */
-webkit-mask-border: initial;
-webkit-mask-border: inherit;
-webkit-mask-border: revert;
-webkit-mask-border: unset;
-webkit-mask-border: revert-layer;
    }

Browser Compatibility

At the time of writing this blog, the mask-border shorthand and longhand property is not supported yet in major browsers and as a result requires the use of non-standard property on Chromium-based browsers for testing. These properties include:

mask-box-image-source
mask-box-image-repeat
mask-box-image-width
mask-box-image-outset
mask-box-image-mode
Mask-box-image-slice

The above non-standard properties can be used as a replacement for testing purposes when working with *mask-border *longhand properties.

Source

The Firefox section is completely red, indicating NOT support in all Firefox versions. Chrome and other Chromium-based browsers support an outdated version of this property.

This guide focuses on test automation metrics, its significance, strategies, challenges, and key test automation metrics for measuring success.

mask-border-source

The mask-border-source CSS masking property is a longhand property of the mask-border property. It is used to set the mask-border-image.

Syntax:

/* Specified Values */
mask-border-source: url("icon-star.png");
mask-border-source: linear-gradient(to bottom, cyan, darkcyan);

/* Global Values */
-webkit-mask-border-source: initial;
-webkit-mask-border-source: inherit;
-webkit-mask-border-source: revert;
-webkit-mask-border-source: unset;
-webkit-mask-border-source: revert-layer;
}

/* Non Standard Property */
-webkit-mask-box-image-source: initial;

The non-standard property for mask-border-source is mask-box-image-source.

Here is a preview of the image we will be using:

It is a 52 x 49 dimension png image. Now type and run the code below.

HTML:

 <div class="main">
    <!-- No Effect -->
    <section class="card mask">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card 
        { 
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
    }

  .mask {
      -webkit-mask-box-image-source: url(https://user-images.githubusercontent.com/78242022/244883515-a1210117-14e5-4145-9b8d-96095939dfd3.png);
}

Output:

Preview:

Here, the image is rendered as a fill, you will learn how to split and repeat the image in the section below.

mask-border-repeat

The mask-border-repeat CSS masking property is a longhand property of the mask-border property. It is used to adjust the scale to fit the mask-border-image dimension.

The non-standard property for mask-border-repeat is mask-box-image-repeat. Like the first example, we will use it to test how the mask-border-repeat functions.

Syntax:

/* Keyword value */
-webkit-mask-border-repeat: stretch;
-webkit-mask-border-repeat: repeat;
-webkit-mask-border-repeat: round;
-webkit-mask-border-repeat: space;

/* Global Values */
-webkit-mask-border-repeat: initial;
-webkit-mask-border-repeat: inherit;
-webkit-mask-border-repeat: revert;
-webkit-mask-border-repeat: unset;
-webkit-mask-border-repeat: revert-layer;

/* Non Standard Property */
-webkit-mask-box-image-repeat: round;

Values:

stretch: stretched to fill the gap between the mask-border-image.
repeat: adjust and scale the source image around the element’s border.
round: adjust and round the source image around the element’s border.
space: adjust and apply spaces between the source image and the element border.

Now type and run the code below to see how this works.

HTML:

<div class="main">
    <!-- No Effect -->
    <section class="card mask">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card
        {
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
    }

    .mask {
        -webkit-mask-box-image-source:  url(https://user-images.githubusercontent.com/78242022/244883515-a1210117-14e5-4145-9b8d-96095939dfd3.png);

        -webkit-mask-box-image-repeat: repeat;
    }

Output:

Learn the ins and outs of test execution engines through our extensive guide, and enhance your testing workflow with automation.

Preview:

Here, we applied the repeat value, which repeats the source image around the element’s border.

mask-border-slice

The mask-border-slice CSS masking property is a longhand property of the mask-border property, it is used to slice the image parsed by the mask-border-source into nine pieces, and these pieces are grouped in four corners, four edges, and a middle region.

The image below illustrates how the regions are distributed by their distance and size. The red is used to specify this.

*Source- *developer.mozilla.

How the regions are organized is explained below

The 1,2,3, and 4 boxes (zones) are the corners of the source image. This forms the corners of the mask-border image.
The 5,6,7 and 8 boxes (zones) are used to form the edges. They are mostly repeated or scaled.
The 9 box is the center of the region and is mostly discarded except if specified by the fill property.

The mask-border-outset, mask-border-width, and mask-border-repeat are used to modify the final render of the slice zones.

Syntax:

/* Keyword value */
-webkit-mask-border-slice: fill;

/* length value */
-webkit-mask-border-slice: 12;

/* Percentage value */
-webkit-mask-border-slice: 20%;

/* Global Values */
-webkit-mask-border-slice: initial;
-webkit-mask-border-slice: inherit;
-webkit-mask-border-slice: revert;
-webkit-mask-border-slice: unset;
-webkit-mask-border-slice: revert-layer;

/* Non Standard Property */
-webkit-mask-box-image-slice: 12;

The non-standard property for mask-border-slice is mask-box-image-slice. Just like the other examples, we are going to be using it to test how the mask-border-slice functions.

Try the code sample below

HTML:

<div class="main">
    <!-- No Effect -->
    <section class="card mask">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card 
        { 
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
    }

    .mask {
        -webkit-mask-box-image-source: url(https://user-images.githubusercontent.com/78242022/244883515-a1210117-14e5-4145-9b8d-96095939dfd3.png);

        -webkit-mask-box-image-repeat: repeat;
        -webkit-mask-box-image-slice: 12 20%;

    }

Output:

Preview:

Here, we remove the center region and slice the top and bottom by 12 and the left and right by 20% (percent).

mask-border-outset

The mask-border-outset CSS masking property is a longhand property of the mask-border property; it is used to set the distance between the border-box and the element mask-border.

The non-standard property for mask-border-outset is mask-box-image-outset. We are going to be using it to test how the mask-border-outset functions.

Syntax:

/* Number value */
-webkit-mask-border-outset: 5;

/* length value */
-webkit-mask-border-outset: 1.2rem;

/* Percentage value */
-webkit-mask-border-outset: 20%;

/* Global Values */
-webkit-mask-border-outset: initial;
-webkit-mask-border-outset: inherit;
-webkit-mask-border-outset: revert;
-webkit-mask-border-outset: unset;
-webkit-mask-border-outset: revert-layer;

/* Non Standard Property */
-webkit-mask-box-image-outset: 20%;

HTML:

<div class="main">
    <!-- No Effect -->
    <section class="card mask">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

 body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card
        {
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
    }

    .mask {
        -webkit-mask-box-image-source: url(https://user-images.githubusercontent.com/78242022/244883515-a1210117-14e5-4145-9b8d-96095939dfd3.png);

        -webkit-mask-box-image-repeat: repeat;
        /* -webkit-mask-box-image-slice: 12 20%; */
        -webkit-mask-box-image-outset: 1rem;
    }

Output:

This guide explores Digital Transformation, its benefits, goals, importance and challenges involved in Digital Transformation.

Preview:

Here, a length value of 1rem is set on the outset of the mask-border. The 1rem is applied on all four corners of the zones. If two values were provided, such as 1rem 12, they will be applied to the top-bottom and left-right, respectively. However, it follows the anticlockwise direction in CSS together with properties like margin and padding.

mask-border-width

The mask-border-outset CSS masking property is a longhand property of the mask-border property. It is used to determine the width of the element’s border-mask.

The non-standard CSS masking property for mask-border-width is mask-box-image-width. We are going to be using it to test how the mask-border-width functions.

Syntax:

/* Keyword value */
-webkit-mask-border-width: auto;

/* Number value */
-webkit-mask-border-width: 5;

/* length value */
-webkit-mask-border-width: 1.2rem;

/* Percentage value */
-webkit-mask-border-width: 20%;

/* top | right | bottom | left */
mask-border-width: 1em 10px 5% auto;

/* Global Values */
-webkit-mask-border-width: initial;
-webkit-mask-border-width: inherit;
-webkit-mask-border-width: revert;
-webkit-mask-border-width: unset;
-webkit-mask-border-width: revert-layer;

/* Non Standard Property */
-webkit-mask-box-image-width: 1em 20%;

HTML:

<div class="main">
    <!-- No Effect -->
    <section class="card mask">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card
        {
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
    }

    .mask {
        -webkit-mask-box-image-source: url(https://user-images.githubusercontent.com/78242022/244883515-a1210117-14e5-4145-9b8d-96095939dfd3.png);

  -webkit-mask-box-image-repeat: repeat;
        -webkit-mask-box-image-outset: 1rem;
        -webkit-mask-box-image-width: 1rem 20%;
    }

Output:

Preview:

Here, we reduce the width by 1rem top and bottom and 20% left and right.

mask-border-mode

The mask-border-mode CSS masking property is a longhand property of the mask-border property; it is used to set the blending mode of the element’s border-mask.

The non-standard property for mask-border-mode is mask-box-image-mode. We are going to be using it to test how the mask-border-mode functions.

Syntax:

/* Keyword values */
-webkit-mask-border-mode: luminance;
-webkit-mask-border-mode: alpha;

/* Global Values */
-webkit-mask-border-mode: initial;
-webkit-mask-border-mode: inherit;
-webkit-mask-border-mode: revert;
-webkit-mask-border-mode: unset;
-webkit-mask-border-mode: revert-layer;

/* Non Standard Property */
-webkit-mask-box-image-mode: luminance;

HTML:

<div class="main">
    <!-- No Effect -->
    <section class="card mask">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/241950813-021da2fc-cdf3-4409-9b0e-cbb73db6fd0c.png" alt="">
            </div>
            <div class="content">
                <h3>Clean Coding Practices for Test Automation: Part 2</h3>
                <p>In this webinar, we learned about the clean coding practices with real-world scenarios and showcased the implementation of various design patterns.</p>
            </div>
        </section>
</div>

CSS:

 body {
        overflow-x: hidden;
    }

    .main {
        display: grid;
        grid-template-columns:1fr;
        grid-template-rows: auto;
        place-items: center;
        height: 100vh;
    }

    img {
        width: 100%;
    }

    .card
        {
            background-color: wheat;
            font-family: calibri;
            font-size: 18px;
            width: 300px;
            height: fit-content;
            border: 5px solid #0ebac5;
            padding: 20px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
    }

    .mask {
        -webkit-mask-box-image-source: url(https://user-images.githubusercontent.com/78242022/244883515-a1210117-14e5-4145-9b8d-96095939dfd3.png);

        -webkit-mask-box-image-repeat: round space;
        -webkit-mask-box-image-outset: 1rem;
        -webkit-mask-box-image-mode: luminance;
    }

Output:

Preview:

Here, the mask-border is set to a blend mode of luminance.

HTML SVG Mask Element

We have covered what CSS masking is and the CSS masking properties. We’ve also covered the border box mask, the mask-border and mask-border longhand properties, what they are, and how to use them.

In this section, we will learn how to use the HTML SVG < mask > element and how to create stunning effects using text and Custom SVGs (Scalable Vector Graphics).

Mask video with text

We will be creating a text that masks through a video, and the video plays in the background.

And by the end of this project, you should know how to work with the SVG < mask > element and use it in your project.

Let’s begin.

Here is what the complete project demo looks like.

Firstly, create an HTML file and type the code below.

HTML:

<video loop autoplay muted preload playinline class="video-tag">
        <source src="https://user-images.githubusercontent.com/78242022/241950930-5b89bd67-4299-4ca0-883e-8273b745c054.mp4"/>
    </video>

    <svg width="100%" height="100%">
        <defs>
            <mask id="myText" width="100%" height="100%" x="0" y="0">
                <rect width="100%" height="100%" x="0" y="0" />
                <text x="50%" y="50%" fill="plum" text-anchor="middle">LambdaTest</text>
            </mask>
        </defs>
        <rect width="100%" height="100%" x="0" y="0" />
    </svg>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Koulen&family=Luckiest+Guy&display=swap');
    html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        font-family: 'Bowlby One SC','Koulen','Luckiest Guy', cursive;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    video {
        width: 100%;
        height: 100%;
    }

    svg {
        font-size: 8em;
        font-family: "Arial";
      font-weight: 900;
      text-transform: uppercase;
        transition: all 0.5s linear;
        position: absolute;
        inset: 0;
        height: 100%;
    }

    svg rect {
        fill: #fff;
        mask: url(#myText);
    }

    /* Media Query */
    @media screen and (max-width: 745px) {
        svg {
        font-size: 5em;
    }
    }

Now, save your CSS file and open it on the browser, your browser preview should be just like this.

Output:

Preview:

From the browser preview, the SVG < mask > is used to create an alpha mask to mask on the video and text. To mask the text show, we add a fill color of #fff (white).

As stated earlier, the white is for showing hidden mask content by a black mask.

Mask video with Custom SVG

Now that you have a better understanding of how to work with SVG < mask > tag. Let’s take our little project a bit further and more interesting by adding a custom SVG logo or shape.

Here is what the project demo looks like:

From the same project folder, create a new html file and give it any name of your choice.
I will call mine “shape.html”.

Next, type the HTML code in your text editor and open it in your browser.

HTML:

<video loop autoplay muted preload playinline class="video-tag">
        <source src="https://user-images.githubusercontent.com/78242022/241950930-5b89bd67-4299-4ca0-883e-8273b745c054.mp4"/>
    </video>

    <svg width="100%" height="100%">
        <defs>
            <mask id="myText" width="100%" height="100%" x="0" y="0">
                <rect width="100%" height="100%" x="0" y="0" />
               <?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.12 393.18">
  <path d="M247.96,38.68c-3.47-1.99-6.84-4.13-10.41-5.97-3.04-1.56-5.92-3.52-8.85-5.33-1.58-.97-3.4-1.55-4.77-2.9-.69-.69-1.93-.18-2.58-.85-1.75-1.79-4.06-2.7-6.05-4.09-2.48-1.73-5.29-2.84-7.86-4.38-1.26-.75-2.49-1.54-3.76-2.28-2.99-1.75-6.09-3.29-9.11-4.97-1.86-1.04-3.43-2.59-5.41-3.56-3.52-1.72-7-3.31-10.95-3.96-4.51-.75-8.87-.41-13.06,1.12-3.54,1.29-7.02,2.83-10.02,5.29-1.92,1.58-4.24,2.58-6.51,3.63-2.14,.99-4.01,2.43-6.04,3.61-3.9,2.27-7.78,4.58-11.77,6.7-1.04,.55-1.99,1.26-2.94,1.95-2.02,1.46-4.41,2.2-6.53,3.44-1.35,.79-2.58,1.8-3.94,2.58-3.13,1.79-6.43,3.31-9.43,5.29-3.64,2.4-7.51,4.4-11.19,6.74-3.17,2.01-6.57,3.72-9.89,5.51-2.62,1.41-5.33,2.77-7.54,4.85-.23,.22-.44,.41-.8,.52-3.48,1.05-6.24,3.42-9.36,5.12-2.69,1.46-5.22,3.26-8.12,4.33-.18,.07-.35,.23-.47,.34-2.51,2.18-5.68,3.3-8.35,5.2-.45,.32-.95,.62-1.47,.81-1.42,.51-2.78,.95-3.84,2.23-.37,.45-1.51,.75-2.15,1.13-2.99,1.81-6.1,3.42-9.08,5.24-2.04,1.24-3.97,2.77-6.32,3.52-1.17,.38-2.01,1.38-3.1,1.96-5.24,2.78-10.23,6-15.36,8.97-1.88,1.09-2.97,3.03-4.59,4.39-2.54,2.15-3.48,5.28-5.05,8.02-.4,.69-.34,1.54-.45,2.29-.6,4.16-1.07,8.35-.71,12.57,.03,.38,0,.76,0,1.14,0,56.14-.01,112.29,.03,168.43,0,2.92,.99,5.68,2.24,8.34,1.84,3.93,4.66,7.05,8.06,9.58,2.6,1.93,5.23,3.91,8.3,5.1,.93,.36,1.53,1.08,2.3,1.62,1.13,.8,2.43,1.34,3.73,1.84,.77,.3,1.52,.66,2.14,1.28,1.77,1.77,4.12,2.7,6.25,3.83,2.18,1.16,4.21,2.69,6.65,3.35,.24,.06,.34,.21,.48,.34,3.81,3.51,8.75,5.2,13.01,8.02,2.9,1.92,6.04,3.72,9.33,5.15,2.19,.95,4.12,2.65,6.27,3.78,3.2,1.68,6.17,3.73,9.4,5.37,2.47,1.26,4.91,2.74,7.23,4.32,2.03,1.38,4.49,2.07,6.2,3.92,.35,.38,.82,.45,1.16,.44,1.1-.03,1.8,.44,2.29,1.35,.19,.36,.47,.61,.82,.82,3.76,2.33,7.47,4.77,11.29,6.99,2.66,1.55,9.13,1.47,12.45-1.04,3.32-2.51,4.31-5.78,4.33-9.55,.07-11,.07-22,0-33-.02-2.67-.97-5.2-1.93-7.68-.25-.64-.74-1.08-1.29-1.48-.94-.7-1.93-1.38-2.3-2.6-.12-.41-.43-.64-.81-.82-4.93-2.39-9.49-5.42-14.21-8.18-2.36-1.38-4.9-2.49-7.15-3.97-4.68-3.09-9.76-5.48-14.45-8.55-2.97-1.94-6.19-3.51-9.28-5.27-1-.57-2.01-1.13-2.93-1.81-1.22-.89-2.59-1.47-3.89-2.18-2.27-1.24-4.83-2.06-6.59-4.16-.74-.88-1.84-1.28-2.92-1.65-3.24-1.13-3.63-2.14-3.72-5.39-.44-15.79-.17-31.58-.19-47.38-.04-27.28-.02-54.57,.01-81.85,0-2.12,.1-4.25,.15-6.37,.05-2.01,1.15-3.34,2.92-4.26,3.96-2.06,7.87-4.22,11.63-6.65,1.81-1.17,3.63-2.39,5.69-3.15,1.81-.67,3.21-2.04,4.89-2.96,4.41-2.41,8.88-4.76,13.04-7.56,3.11-2.09,6.69-3.28,9.68-5.5,3.45-2.56,7.37-4.34,11.02-6.58,2.7-1.67,5.49-3.26,8.26-4.85,7.05-4.04,14.1-8.08,21.06-12.28,2.45-1.48,5.11-2.52,7.44-4.29,2.4-1.82,5.36-2.88,7.92-4.53,2.56-1.64,5.42-2.71,7.88-4.52,3.06-2.25,6.67-3.55,9.97-5.38,.25-.14,.74-.13,1.14,.12,3.69,2.35,7.58,4.35,11.33,6.6,3.05,1.83,6.11,3.73,9.35,5.3,1.99,.96,4.06,2.04,5.83,3.58,1.48,1.28,3.45,1.99,5.17,3.01,3.39,1.99,6.67,4.2,10.17,5.97,2.13,1.08,4.25,2.25,6.27,3.45,2.75,1.62,5.53,3.24,8.28,4.87,3.92,2.32,7.78,4.77,11.87,6.8,1.51,.75,2.7,2.06,4.26,2.75,3.44,1.53,6.45,3.81,9.71,5.59,3,1.64,5.87,3.55,9.02,4.99,2.31,1.05,4.38,2.81,6.63,4.05,2.55,1.4,4.82,3.41,7.79,4.03,.36,.07,.73,.36,.97,.64,2.08,2.4,5.2,3.14,7.71,4.85,1.33,.91,2.8,1.64,4.36,2.22,1.53,.58,1.83,2.14,1.83,3.7-.01,8.39,0,16.77,0,25.16,0,6.26-.04,12.53,.02,18.79,.03,3.16,1.5,5.63,3.89,7.7,4.98,4.32,11.18,6.68,16.59,10.33,2.9,1.95,6.22,3.43,9.37,5.07,1.56,.81,2.76,2.27,4.43,3.07,3.41,1.65,6.9,2.56,10.63,1.42,1.92-.59,3.66-1.46,4.95-3.22,1.85-2.53,2.58-5.3,2.58-8.36,0-26.14,.01-52.28-.02-78.42,0-3.94-.79-7.78-2.66-11.24-1.28-2.38-2.25-5.07-4.82-6.61-.96-.58-1.7-1.56-2.45-2.43-.36-.42-.63-.94-1.17-1.12-2.57-.86-4.59-2.81-7.18-3.62-.41-.13-.8-.34-1.16-.63-2.53-2.09-5.61-3.29-8.3-5.11-1.91-1.3-4-2.3-5.98-3.43-2.22-1.27-4.37-2.73-6.72-3.86-2.77-1.33-5.42-3.1-8.08-4.74-2.68-1.65-5.39-3.25-8.18-4.71-1.11-.58-2.06-1.33-3.08-2-2.4-1.56-4.98-2.77-7.52-4.08-2.72-1.41-5.14-3.29-7.83-4.77-1.14-.62-2.18-1.44-3.45-1.74-.32-.08-.62-.23-.79-.38-2.4-2.16-5.36-3.49-8.09-5.1-2.49-1.47-5-3.01-7.74-4.13-1.66-.68-3.11-2.05-4.78-2.91" width="70%" height="70%"/>
  <path d="M173.46,163.82c-3.43-2.3-7.02-4.35-10.63-6.36-2.82-1.57-5.62-3.16-8.37-4.84-1.91-1.17-3.88-2.33-5.99-3.19-2.03-.83-3.75-2.31-5.45-3.56-1.66-1.22-3.45-1.69-5.18-2.44-3.15-1.37-6.45-1.55-9.79-.84-1.67,.35-3.28,1.07-4.69,1.88-2.3,1.33-4.64,2.63-6.83,4.21-1.46,1.06-3.25,1.94-4.97,2.75-1.88,.87-3.72,1.83-5.4,3.08-1.52,1.12-3.07,2.15-4.88,2.83-1.47,.55-2.77,1.56-4.08,2.44-2.6,1.76-5.56,2.85-8.24,4.46-1.74,1.05-3.42,2.17-4.81,3.55-2.72,2.7-5.07,5.7-4.79,9.92,.17,2.46-.5,5.02,.69,7.34,1.28,2.52,2.38,5.12,3.87,7.55,1.4,2.28,2.81,4.57,3.95,7.01,.78,1.66,2.27,2.88,2.92,4.58,1.43,3.77,4.45,6.02,7.74,7.76,3.73,1.98,7.76,2.19,11.91,.79,1.99-.67,3.78-1.68,5.49-2.74,2.74-1.71,5.69-3.03,8.41-4.77,1.83-1.17,3.48-2.69,5.66-3.38,1.48-.47,2.72-.68,4.11,.2,3.02,1.91,6.07,3.76,9.15,5.55,1.18,.69,2.55,1.01,3.59,1.97,.98,.9,1.49,1.86,1.49,3.28-.04,54.67-.03,109.35-.03,164.02,0,2.09,.56,4.12,.73,6.2,.08,1.08,1.01,2.04,1.73,2.94,1.57,1.95,3.32,3.64,5.52,4.95,4.75,2.83,9.59,2.8,14.55,.91,1.23-.47,2.28-1.35,3.37-2.13,2.01-1.44,3.64-3.27,5.61-4.73,2.18-1.61,4.45-3.1,6.43-5,1.64-1.57,3.46-2.98,5.33-4.33,2.69-1.94,5.35-4.06,7.14-6.87,1.23-1.93,1.92-4.26,2.04-6.65,.35-7.4,.07-14.81,.16-22.22,.38-31.58,.06-63.17,.16-94.75,0-2.61,0-2.61,.91-3.53,2.36,1.49,5.01,2.53,7.29,4.3,1.78,1.38,3.94,2.25,5.83,3.5,1.9,1.26,3.98,2.19,5.95,3.31,2.54,1.45,4.86,3.24,7.59,4.42,2.55,1.1,4.96,2.64,7.22,4.34,.43,.33,.78,.77,1.31,.97,3.97,1.51,7.38,3.98,10.97,6.16,2.49,1.51,5.15,2.76,7.67,4.26,2.45,1.46,4.87,2.99,7.32,4.47,.59,.35,1.07,.75,1.81,.81,2.18,.18,3.3,2.15,5.04,3.12,4.02,2.24,8.03,4.51,12.06,6.75,2.44,1.35,4.94,2.69,7.24,4.31,2.54,1.79,5.34,3.16,7.99,4.76,3.59,2.17,7.31,4.12,10.96,6.19,4.32,2.45,8.7,3.4,13.59,1.4,2.27-.93,4.17-2.08,6.06-3.62,3.29-2.69,5.67-6.22,8.79-9.02,1.56-1.4,2.85-3.07,4.43-4.39,1.78-1.48,3.29-3.22,4.62-5.01,1.47-1.97,2.4-4.33,2.38-6.97-.05-9.97-.01-19.93-.02-29.9,0-2.69-1.18-4.96-2.97-6.83-1.32-1.38-2.94-2.43-4.68-3.35-4.11-2.18-8.05-4.69-12.13-6.95-2.69-1.49-5.2-3.27-7.97-4.65-1.65-.82-3.13-1.99-4.75-2.91-1.92-1.09-3.99-1.73-6.06-2.42-1.63-.54-3.25-.48-4.9-.02-1.75,.5-3.77,.97-4.95,2.08-1.68,1.59-3.11,3.66-3.72,6.09-.38,1.52-.3,3.05-.31,4.58-.02,2.16-1.02,2.83-2.76,1.61-4.38-3.06-9.28-5.21-13.82-8.02-3.07-1.91-6.13-4-9.55-5.39-1.71-.7-3.13-2-4.7-2.98-2.04-1.28-4.19-2.36-6.3-3.44-2.99-1.54-5.52-3.81-8.62-5.14-1.47-.63-2.53-1.91-4.08-2.47-2.22-.81-4.12-2.14-5.92-3.7-1.18-1.02-2.85-1.31-4.25-2.1-2.16-1.22-4.14-2.8-6.51-3.61-.6-.2-1.03-.61-1.41-.92-2.76-2.19-6.15-3.27-8.99-5.23-3.02-2.08-6.29-3.69-9.34-5.68-.74-.48-1.47-.93-2.31-1.09-.66-.13-1.32-.36-1.77-.71-2.87-2.27-5.96-4.12-9.33-5.54-.55-.23-.97-.76-1.48-1.12-3.15-2.21-6.7-3.71-9.96-5.72-2.5-1.54-5.02-3.03-7.51-4.59-.72-.45-1.5-.69-2.3-.77-.64-.06-.9-.45-1.22-.85" width="70%" height="70%"/>
</svg>
            </mask>
        </defs>
        <rect width="100%" height="100%" x="0" y="0" />
 </svg>

From the HTML code sample we have here, we are using the < mask > tag to mask the SVG logo and the video under it.

We also have a rect SVG shape that is masked together with the logo and shape.

Now let’s create our CSS file and type the code below.

CSS:

 @import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Koulen&family=Luckiest+Guy&display=swap');
    html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        font-family: 'Bowlby One SC','Koulen','Luckiest Guy', cursive;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    video {
        width: 100%;
        height: 100%;
    }

  svg {
      font-size: 8em;
      font-family: "Koulen";
      transition: all 0.5s linear;
      position: absolute;
      inset: 0;
      height: 100%;
    }

    svg rect {
        fill: #fff;
        mask: url(#myText);
    }

    /* Media Query */
    @media screen and (max-width: 745px) {
        svg {
        font-size: 5em;
    }
    }

Output:

Preview:

To show the SVG logo, the < rect > shape is targeted and a fill of #fff (white is added) to display the logo.

Browser Compatibility

The SVG < mask > Element has great support in all major browsers, so using it will bring the best result.

Source- caniuse.com

Adding CSS Transitions to CSS Masking Property

Adding CSS transitions to CSS masking property can help improve the look and feel of our website or application. It gives the user a sense of interactivity as they navigate the application, and it leads to good performance and optimization.

In this section, let’s implement the properties we have learned till now by building simple card components with CSS masking and transiting them.

Let’s begin.

HTML:

<main>
        <section class="container">
            <!-- Card One -->
            <section class="card card-one">
                <div class="image-wrapper">
                    <img src="https://user-images.githubusercontent.com/78242022/246862734-89696683-7d0c-45af-b8d0-ddd9b59a986d.png" alt="">
                </div>
                <div class="content">
                    <h3>Plugins & Extensions</h3>
                    <p>Dedicated WordPress plugin and Chrome Extension to help you perform cross-browser testing and capture full-page
                    screenshots.</p>
                </div>
            </section>

        <!-- Card Two -->
        <section class="card card-two">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/246862738-773376b6-5b2d-411c-ba27-a96d92dc6150.png" alt="">
            </div>
            <div class="content">
                <h3>Test Locally hosted pages</h3>
                <p>Local hosted web testing to help you test in dev environments and save your website or app from after deployment bugs.</p>
            </div>
        </section>

        <!-- Card Three -->
        <section class="card card-three">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/246862710-a24aeea8-cce5-466e-b49f-903ac6b41bc1.png" alt="">
            </div>
            <div class="content">
                <h3>Geolocation testing</h3>
                <p>Test your website or mobile app from different geoIPs to make sure your users get the perfect experience across all
                locations.</p>
            </div>
        </section>

        <!-- Card Four -->
        <section class="card card-three">
            <div class="image-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/246862742-4ee6ff1a-01ae-4766-bfe5-4910144d1db3.png" alt="">
            </div>
            <div class="content">
                <h3>Accessibility Testing</h3>
                <p>Harness the power of Screen Reader and Speech Viewer using NVDA (Non-Visual Desktop Access) for Windows and Mac </p>
            </div>
        </section>

        </section>
</main>

CSS:

/* Removing default white space */
        *,*::after, *::before {
            padding: inherit;
            margin: inherit;
            box-sizing: inherit;
        }

        html {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }


        /* Body */
        body {
            background-color: #d4d4d4;
            display: grid;
            place-items: center;
            width: 100vw;
            height: 100vh;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(4, 300px);
            grid-template-rows: auto;
            gap: 1em;
        }

        .card {
            background-color: #0ebac5;
            border-radius: 10px;
            padding: 5px;
            box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
        }

        .card:hover {
            outline-style: dashed;
            outline-width: 2px;
            outline-color: #242424;
        }

        .card:hover img {
            /* Chrome */
            -webkit-mask-image: linear-gradient(#000, transparent);
            -webkit-mask-size: 200px 200px;
            -webkit-mask-position: center center;

            /* Firefox */
            mask-image: linear-gradient(#000, transparent);
            mask-size: 200px 200px;
            mask-position: center center;

            transform: scale(1.1);
        }

        .content h3{
            font-family: calibri;
            font-size: 25px;
        }

        .content p{
            font-family: calibri;
            font-size: 20px;
            color: #242424;
        }

        /* hero images */
        .image-wrapper img{
            width: 100%;
            transition: all 0.5 ease-in;
            overflow: hidden;
            object-fit: cover;

            transition: all 0.5s ease;
        }


        /* Media Query */
        @media screen and (max-width: 1282px){
            .container {
            grid-template-columns: repeat(2, 300px);
        }
        }

        @media screen and (max-width: 700px){
            .container {
            grid-template-columns: repeat(1, 300px);
        }
        }

Output:

Preview:

From the browser preview, we added a linear gradient CSS masking to the hero image on the card components.

Adding CSS Animations to CSS Masking Property

CSS masking can be used to do many things, as you have seen from the previous section. One popular feature that is common among apps such as Instagram and TikTok is animating horizontal scroll text.

This feature is very useful for long text that the user is not meant to scroll or interact with, the text can simply be animated so that all the information reveals itself and then repeats.

Here is a similar example from TikTok for context.

This is the project demo of what we are going to create.

So let’s begin by creating an HTML file. Then type and run the code below

HTML:

<main>
        <img src="https://user-images.githubusercontent.com/78242022/241960972-8df69d68-13b8-41a1-9a8f-610b32f1ba1d.png" alt="" class="lambdaTest">
        <div class="box j">
            <div class="k">
                <p>LambdaTest - Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
            </div>
        </div>
        <img src="https://user-images.githubusercontent.com/78242022/241950910-f15b21d2-d537-4a56-b7a6-99acd6ceb594.svg" alt="" class="music">
</main>

CSS:

 body {
            width: 100vw;
            height: 100vh;

            display: grid;
            place-items: center;

            overflow: hidden;
        }

        main {  
        width: 25em;
        height: 300px;
        background-color: #0ebac5;
        border-radius: 10px;
        box-shadow: 0 8px 10px -1px rgb(0 0 0 / 0.1), 0 8px 10px -2px rgb(0 0 0 / 0.1);
        border: 2px solid #fff;
        }

    .j{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box {
        width: 100%;
        height: 50px;
        background-color: #0ebac5;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent 100%);

    }

    .k {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent 100%);
    }

    p {
        white-space: nowrap;

        font-size: 20px;
        font-family: calibri;
        font-style: italic;
        color: #fff;

        transform: translate(-500px);

        animation-name: moveforward;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 10s;
        animation-play-state: running;
    }

    /* Images Icons */
    .lambdaTest {
        display: block;
        margin: 1em auto;
        width: 150px;

        -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent 100%);
    }

    .music {
        position: relative;
        bottom: 2em;
        margin-left: 10px;
    }

    @keyframes moveforward {
        0%{
            transform: translateX(0);
        }

        100%{
            transform: translateX(-500);
        }
    }

Output:

Preview:

From the browser preview, we have a simple plain text that animates to the left direction and then becomes hidden toward getting to the side mask bar.

Hide Text Content with CSS Masking

In this section, we will learn how to hide text content with CSS masking. This feature is very effective for hiding a section of the page for the purpose of displaying exclusive content for a certain audience or limiting the amount of content a user has to interact with at a given time.

First, let’s take a look at the final project demo.

Now create an HTML file and type and run the code below.

HTML:

 <main class="root">
        <section class="hero-wrapper">
            <section class="hero-section">
                <!-- Call To Action -->
                <header class="call-to-action">
                <div class="hero-space"></div>

                    <section>
                        <p>Free Live Webinar | Voices of Community<img src="https://raw.githubusercontent.com/ocxigin/we-love-ms/f786a998033224e244ce818ae6035ce4826df85a/img/icon-voices.svg"/></p>
                        <h1>Digital Accessibility Testing:  <br />
                            How to Get It Right</h1>
                        <p class="date">
                            <img src="https://raw.githubusercontent.com/ocxigin/we-love-ms/f786a998033224e244ce818ae6035ce4826df85a/img/Date.svg"/>
                            <span>Wednesday, 31st May 2023</span>
                        </p>
                        <p class="time">
                            <img src="https://raw.githubusercontent.com/ocxigin/we-love-ms/f786a998033224e244ce818ae6035ce4826df85a/img/bx_time.svg"/>
                            <span>8:30 - 9:30 PM IST | 11:00 - 12:00 PM EST</span>
                        </p>

                        <form action="">
                            <button class="header-btn"
                                formaction="https://www.lambdatest.com/webinar/digital-accessibility-testing?utm_source=facebook&utm_medium=organic&utm_campaign=may_22&utm_term=sj&utm_content=webinar">Register Now</button>
                        </form>
                    </section>
                </header>

                <!-- Call To Action -->
                <header class="speakers">
                    <section>
                        <div class="hero-space"></div> <!--This tag here is used for margin-top-->
                        <!-- Guest -->
                        <div class="guest">
                            <div>
                                <img src="https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/tamar-schapira-profile.png" alt="">
                            </div>

                            <div class="names">
                                <h1>Tamar Schapira</h1>
                                <p>CEO/Co-Founder, <br />
                                SenseIT</p>
                            </div>
                        </div>

                        <!-- Host -->
                        <div class="host-top"></div>
                        <div class="host">
                            <div>
                                <img src="https://raw.githubusercontent.com/ocxigin/we-love-ms/main/img/manoj-2023.png" alt="">
                            </div>

                            <div class="names">
                                <h1>Manoj Kumar</h1>
                                <p>VP - DevRel and OSPO, <br />
                                    LambdaTest</p>
                            </div>
                        </div>
                    </section>
                </header>
            </section> <!--End of Hero Section-->

            <!-- Page Content -->
            <section class="content">
                <section>
                    <div>
                        <h3>Abstract</h3>
                        <div class="mask-text" id="maskText">
                        <p>All people have the right and the ability to use the internet and participate in the digital world as they wish
                            and as
                            they are capable of. When speaking of users with disabilities, there are specific ways and functions by which
                            people use
                            digital products. Not all people were made equal and not all functions should be made equal. Digital
                            accessibility is
                            the inclusive practice that removes barriers for people with disabilities.</p>

                        <p>As technology progresses and digital product development accelerates, digital accessibility is left behind and
                            generally
                       prioritized at the bottom of the list. This is primarily because assessing a product's accessibility is a manual
process. To overcome this problem, assessing for accessibility must be integrated early in development and
          continuously.
Meaning, we need to find a way to test and assess the product by interacting with the elements and components. Hence The usability test for accessibility needs to be automated.
                        </p>

                        <p>In this session, Tamar Schapira, Co-Founder and CEO of Sense-IT will provide a proven automated methodology to
                            assess,
                            identify, and remediate accessibility violations for any web application.</p>
                        </div>
                    </div>
                </section>
            </section>
        </section>
    </main>

    <div class="btn-container">
        <button class="btn" id="btn">Toggle Mask</button>
    </div>

    <!-- Fotter -->
    <footer class="footer">
        <p>(c)2023 Alex Anie | All Rights Reserved</p>
    </footer>

CSS:

 *, *::after, *::before {
        padding: inherit;
        margin: inherit;
        box-sizing: inherit;
    }

    html {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .hero-space {
        margin-top: 4em;
    }

    .hero-section {
        /* background: linear-gradient(to top, transparent, #0e092c 50%); */
        background: #0e092c;
        width: 100vw;
        /* height: 100vh; */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .call-to-action {
        margin-left: 1em;
    }

    .call-to-action h1 {
        font-family: calibri;
        font-size: 2.3em;
        color: white;
    }

    .call-to-action p:first-of-type {
        font-family: calibri;
        font-size: 1.5em;
        color: #298f95;
    }

    .date span, .time span{
        /* display: inline-block; */
        font-family: calibri;
        font-size: 1.2em;
        margin-left: 6px;
        position: relative;
        inset: -8px 0;
        color: white;
    }

    /* button */

    .header-btn, .btn {
        background-color: #45d7e8;
        padding: 1em 3em;
        border: none;
        border-radius: 5px;
        outline: none;
        font-weight: bold;
        margin-top: 2em;
        cursor: pointer;
        user-select: none;
    }

    .header-btn:hover {
        opacity: 0.8;
    }

    /* Speaker */
    .guest {
        display: flex;
        flex-direction: row;
    }

    .guest img {
        width: 117px;
        height: 128px;
    }

    .guest h1, .host h1 {
        font-family: calibri;
        font-size: 1.5em;
        color: white;
    }

    .guest p, .host p {
        font-family: calibri;
        font-size: 20px;
        color: white;
    }

    .host-top {
        margin-top: 1.4em;
    }

    .host {
        display: flex;
        flex-direction: row;
    }

    .host img {
        width: 117px;
        height: 127px;
    }

    .guest .names {
        position: relative;
        inset: 2em 3em;
    }

    .host .names {
        position: relative;
        inset: 2em 3em;
    }

    /* Content */
    .content {
        width: 50%;
        margin: 0 auto;
    }

    .content h3 {
        font-family: calibri;
        font-size: 1.2em;
        text-transform: uppercase;
        letter-spacing: 6px;
        margin: 2em 0;
    }

    .content p {
        font-family: calibri;
        font-size: 1.5em;
        margin: 1em 0;
        line-height: 1.5em;
    }

    /* footer */

    .btn-container {
        display: flex;
        justify-content: center;
    }
    .footer {
        background-color: #0e092c;
        width: 100%;
        height: 3em;
    }

    .footer p {
        text-align: center;
        color: white;
        font-family: calibri;
        font-style: italic;
        margin-top: 1em;
    }

    /* Mask Text */
    .mask-text {
        -webkit-mask-image: linear-gradient(to top, transparent, #000 100%);
        mask-image: linear-gradient(to top, transparent, #0e092c 50%);
    }

    /* Tablet */
    @media screen and (max-width:1057px){
        .hero-section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .guest, .host {margin: 0 2em;}
    }


    /* Mobile */

    @media screen and (max-width:700px){
        .host, .guest {
        flex-direction: column;
    }

    .guest .names {
        inset: 10px 0;
        margin-bottom: 10px;
    }

    .host .names {
        inset: 10px 0;
        margin-bottom: 10px;
    }

    .content {
        width: 60%;
    }
}

JavaScript:

const btn = document.querySelector('#btn');
        const maskElement = document.querySelector('#maskText');

        btn.addEventListener('click', removeMask)

        function removeMask(){
            maskElement.classList.toggle('mask-text');
        }

The JavaScript code is added to enable the toggle function to the toggle mask button.

Output:

Preview:

From the browser preview, CSS masking is applied to mask the content from displaying until a user clicks on the toggle mask button.

We added a media query breakpoint for a responsive design so that the website will be responsive on different viewports and screen sizes.

Here is a preview from various device screen sizes.

Desktop Preview:

Tablet Preview:

Mobile Preview:

The above output has been rendered on LT Browser 2.0 by the LambdaTest platform. It is a browser designed specifically for developers, offering a friendly environment for building, testing, and debugging mobile websites. It provides the capability to evaluate website performance across various mobile device viewports. Additionally, you have the flexibility to customize the viewport resolution for testing your websites and save these settings for future reference.

With LT Browser 2.0, you can effortlessly explore and assess your websites on various screen resolutions, including desktops, mobile devices, tablets, and laptops. To begin using it, please refer to our documentation on LT Browser 2.0.

Ensuring Accessibility with CSS Masking

While performance deals with how fast a website performs, accessibility, on the other hand, deals with a website where all its features and content can be accessed irrespective of the physical impairments of the user.

To ensure accessibility with CSS masking, proper use of Alpha Channel must be adhered to prevent CSS masking out content from visually impaired users. However, making good use of color contrast can be very helpful for color-blind users.

Lastly, adhering to performance and accessibility best practices can help improve site performance when using CSS masking.

In this article, we will delve into the fundamentals of Quality Assurance, its key principles, methodologies, and its vital role in delivering excellence.

Conclusion

With CSS masking, we can partially or fully hide parts of an element. This involves using graphical elements with an alpha channel, such as PNG images, SVGs, or Text.

When in use, the specified element takes the shape of the object mask or linear gradient mask as an alpha or luminance mask.

Cheers! You’ve now learned the ins and outs of CSS masking. Armed with this knowledge, you can create visually stunning web designs that leave a lasting impression on your users. So go ahead, unleash your creativity, and push the boundaries of what’s possible with CSS masking!

Frequently Asked Questions (FAQs)

What is CSS masking?

CSS masking refers to a technique in Cascading Stylе Shееts (CSS) that allows you to apply a mask to an еlеmеnt’s contеnt, controlling its visibility or transparеncy. It enables you to crеatе visually intеrеsting еffеcts by hiding or rеvеaling parts of an еlеmеnt basеd on thе shapе dеfinеd by thе mask.

How to mask an image in CSS?

The mask-image CSS property sets the image used as a mask layer for an element. By default, this means the alpha channel of the mask image will be multiplied by the alpha channel of the element. This can be controlled with the mask-mode property.

A Complete Guide to CSS Object Model (CSSOM)

Alex Anie — Thu, 16 Mar 2023 05:54:14 +0000

If you are a front-end developer or a CSS enthusiast and you love writing code in CSS, words like Flexbox, Grid, Positioning, Box model, Selectors, Media Queries, Animations, Transforms and Transitions, and translate property, to mention a few, are not going to be strange to you, this is because these topics are talked about more and actively in every CSS community, forum and because you have personally used them.

However, the CSS Object Model, also known as CSSOM, is another significant CSS feature that is less well-known but even more crucial because it affects how the CSS we write daily renders on the browser.

In this blog on CSS Object Model, we will be taking a closer look at what is CSS Object Model, how does CSS Object Model implement with browsers, and why it’s essential for a front-end developer.

What is CSS Object Model (CSSOM)?

CSSOM, also called CSS Object Model, is the set of web APIs that allows the manipulation of CSS from JavaScript with built-in instance properties and methods. Unlike the Document Object Model (DOM), which considers the page’s HTML document, the CSS Object Model works alongside the DOM and deals with the rendering of the stylesheet document.

The stylesheet is linked and parsed to the browser through the HTML, where the CSS Object Model is combined with the DOM to form a render tree. This render tree contains the required nodes to render the page.

The rendering process of the CSS Object Model and the DOM is done within the browser and is called the critical rendering path. It is the process or series of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels that display on the screen. This path comprises CSS Object Model, DOM, layout, and rendering tree, as shown in the figure below.

Here are the steps in the critical rendering path:

Development of DOM, CSS Object Model, and execution of JavaScript.
The browser loads the HTML file.
Request the JavaScript and CSS files via the < script > and < link > tags, respectively.
JavaScript, through the DOM, makes the necessary changes and updates the document.
Layout computes the exact position and size of each object.
CSS is then parsed as the CSS Object Model build and changes the style in the DOM.
Paint translates into actual pixels and displays them on the screen.

The browser engine translates this process and creates the render tree. As soon as the layout and how each element is to be positioned have been determined, pixels are painted out by the browser to the screen.

It’s also important to consider that whether or not we add style rules to the webpage, the browser, by default, assigns in-built styles to the document loaded on the browser; this is called user-agent or user-agent-stylesheet.

However, frontend developers or web designers create their external style sheet called author style-sheet; this CSS style is linked to the HTML file. This is the most common style sheet as developers write them to correct and update the user-agent-stylesheet.

Get started with this complete Selenium automation testing tutorial. Learn what Selenium is, its architecture, advantages and more for automated cross browser testing.

Styling DOM Elements with CSS Object Model

In this section, we will look at a few JavaScrit properties and methods that can be used to style the DOM with CSS Object Model directly from JavaScript.

User-Agent-Stylesheet/Author Stylesheet

Before we dive deep into properties and methods for manipulating the DOM with CSS Object Model, let’s see how the user-agent-stylesheet and author stylesheet interact with the document loaded on the browser.

HTML:

<body>
    <div>
        This is a CSS style Example
    </div>
</body>

From the above HTML code example, we created a < div > tag with text content. Now let’s add some styling to it.

CSS:

 div {
        width: 200px;
        height: 200px;
        background-color: purple;
        color: white;
    }

We have created a < div > tag with properties, i.e., width and height of 200px, background color purple, and color for the text is kept white.

Output:

From the browser output, we have a < div > tag displayed as a square, with a background color of purple (color code: #A020F0). Before we apply CSS styles, let’s see how the user-agent affects the element we created and how we can overwrite each property with the author style-rule.

DevTools:

The output image is taken from LambdaTest’s platform while performing real-time testing. LambdaTest is a cloud-based cross browser testing platform that allows you to test your web and mobile applications over more than 3000+ browsers and device configurations. It also supports parallel testing to perform multiple tests in the same environment.

For a better understanding of how this works, here are the steps you need to follow:

Launch your DevTools.
Select the element and select computed.
Click the div on the console.
As indicated by the arrow on the right, see the user agent style-sheet.
Also, from the yellow box, the user-agent sets the < div > to display block.
font-family of Times New Roman and font size of 16px

As mentioned earlier, the user-agent is responsible for setting default values to elements properties when loaded on the browser if the author style rule is not declared for that specific property.

Now let’s see how we can overwrite the user agent-stylesheet using the author stylesheet we created in our CSS.

CSS:

 div {
        width: 200px;
        height: 200px;
        background-color: purple;
        color: white;
        font-family:monospace;
        font-size: 32px;
    }

From the CSS code sample above, we targeted the font-family and font-size property, and we set them to monospace and 32px respectively.

Browser Output:

From the browser output, the font-size is now much bigger than the one we had before, and the font-family is now monospace. Let’s see how this has affected the user-agent-stylesheet with the DevTools.

Now we just had one user-agent stylesheet rule, which is display block. The font-size of 16px and the font-family of Times New Roman had been overwritten.

Inline style property

Now that we have seen how the user-agent and author-stylesheet work, let’s see how to manipulate the DOM with CSS Object Model with the style property.

The HTMLElement.style property specifies the inline style of an Element. This is a read-only property that returns CSSSyleDeclaration.

JavaScript:

// Assigning the div element to a div variable
  const div = document.querySelector('div');

// Using the style property to manipulate the div element
  div.style.backgroundColor = 'orange';
  div.style.border = '5px solid red';
  div.style.borderRadius = '5px';
  div.style.paddingTop = '10px';
  div.style.paddingLeft = '10px';

From the code example above, we assign a < div > tag to a div variable we created, and we apply a backgroundColor of orange ( #FFA500), a border of 5px solid, and a color of red, paddingTop and paddingLeft 10px across respectively.

When working with the style properties, it’s important to note that the CSS Reference property, a list of CSS properties accessible by the style property, is all in camelCase. For example, the background-color is written as backgroundColor with the (-) hyphen omitted.

This is because the (-) hyphen is an Arithmetic Operator for subtraction, so putting the hyphen (-) in between the background and color will throw an error. However, shorthand property does not require a hyphen (-), a perfect example of this border property we defined earlier.

Browser Output:

We have successfully changed the element styles using the style property, the style property, as mentioned earlier, returns the inline style. Any style we set using the style property appears aligned with the element. Let’s check our DevTools to see how this works.

DevTools:

As seen from the DevTools output, each property is parsed inside the element as a value to the style property. While the style property can be beneficial, it can also cluster your HTML and JavaScript.

getComputedStyle

The window.getComputedStyle() returns the values of an object of all the CSS properties of an element; this can either be the element values or pseudo-element values.

Get Element Value with GetComputedStyles

Here, we will see how to return an element value with the GetComputedStyle method.

Syntax:

window.getComputedStyle(element)

Try the code below.

HTML:

<div>
   The example here is about window.getComputedStyle(element)
</div>

CSS:

div {
        width: 500px;
        height: 200px;
        background-color: purple;
        color: white;
        font-family:monospace;
        font-size: 20px;
        padding: 20px;
}

From the CSS code example above, we targeted the div tag and set the width to 500px, height to 200px, background-color to purple, color to white, font-family to monospace, font-size to 20px and padding to 20px across.

Now let’s see how we can access and return this value using JavaScript’s getComputedStyle() method.

JavaScript:

const div = document.querySelector('div');

const getProValue = window.getComputedStyle(div);

div.innerHTML = `We are using the getComputedStyle method to return the font-family which is: ${getProValue.fontFamily} and the font-size which is: ${getProValue.fontSize}`;

From the JavaScript code example above, we used the getComputedStyle() method to return the value of the font-family and font-size of the specified element.

Browser Output:

As seen from the browser output, we have the font-family value monospace and the font-size value 20px printed out.

Unlike the style property we explained earlier, the getComputedStyle() method does not set a value to an element. It returns a value set to that element and other associated properties, even if the value still needs to be specified.

Let’s take another approach and return all the values associated with the < div > element using the getComputedStyle() method.

Type the following command and hit enter on the browser console.

window.getComputedStyle(div)

DevTools:

Through this usability testing tutorial, you will learn how usability testing is a great way to discover unexpected bugs, find what is unnecessary or unused before going any further, and have unbiased opinions from an outsider.

The property is returned as a CSSSyleDeclaration object.

Get Pseudo-Element with GetComputedStyles

In this section, we will see how to return a Pseudo-Element with the GetComputedStyle() method.

To do this, we have to assign the pseudo-element ::before or ::after as an argument to the GetComputedStyle() method to a specified element.

Syntax:

window.getComputedStyle(element, pseudo-element)

Try the code below.

HTML:

<p>Return background Pseudo-element</p>

CSS:

p::after {
    content: "";
    background: purple;

    display: block;
     width: 400px;
     height: 100px;
  }

From the CSS code example above, we created a Pseudo-Element after the paragraph’s content. We set the content to an empty string because we don’t want any content in the Pseudo-Element; the background is set to purple.

Then we set the display to block to bring the Pseudo-Element to a new line, a width of 400px and a height of 100px, respectively.

JavaScript:

const para = document.querySelector("p");
const printBG = getComputedStyle(para, "::after").background;

console.log("print the RGB value of background: ", printBG);

We targeted the background color of the Pseudo Element of the paragraph tag, and we are getting the background value set on the Pseudo-Element.

Now let’s see how this looks on the browser.

Browser Output:

From the console output, the RGB value of purple is printed out.

Check out the top 18 advanced CSS tricks and techniques you should know in 2023 to help you master modern web design and development skills.

CSSStyleDeclaration Interface

In this section, we will see how we can use the CSSStyleDeclaration Interface, its properties, and the methods used in the CSS Object Model.

getPropertyValue()

The getPropertyValue() method interface is used to return a string value of CSSStyleDeclaration of a given value of an element. The getPropertyValue() takes a property name string as an argument and returns the property value.

Syntax:

getPropertyValue(property)

Try the code below.

HTML:

 <main>
        <p>Return background Pseudo-element</p>
 </main>

CSS:

p{
    background: purple;
    color: white;

    width: 400px;
    height: 100px;

    font-family: monospace;
    font-size: 20px;
    padding: 10px;
}

From the code example above, we targeted the < p > tag and applied a background of purple, the color of white, a width of 400px, the height of 100px, font-family of monospace, font-size of 20px and padding of 10px.

Now let’s see how we can use JavaScript to return the width and height value of the paragraph element.

Try the code below,

JavaScript:

// Assigning the p element to a variable
const par = document.querySelector('p');

// Here we return the CSS properties by getting the
// computed styles.
const getProValue = window.getComputedStyle(par);

// Here we are returning the value of width and height to the innerHTML
par.innerHTML = `The the width of the paragraph is: ${getProValue.getPropertyValue('width')} and the height is: ${getProValue.getPropertyValue('height')}`;

From the JavaScript example, our code has three phases:

The first phase is when we assign the < p > tag to a variable par
The second phase is when we get the properties of < p > tag and assign it to the getProValue variable.
The third phase is when we parse the variable value to the inner HTML and return the width and height properties assigned to the elements using the getPropertyValue() method.

Now let’s see how this runs on the browser.

Browser Output:

The width and height are printed from the browser output on the screen.

In this System testing tutorial, learn why System testing is important and all the intricacies of the System testing process.

getPropertyPriority()

The getPropertyPriority() method interface of the CSSStyleDeclaration object is used to check the priority of a specified property of a given element.

If the critical keyword is present, it returns important; if not, it returns an empty string.

Syntax:

getPropertyPriority('background')

Try the code example below,

HTML:

<main class="first-case">
        <p class="present p" style="background: purple !important;">This element has "important" property</p>
        <p class="not-present p">This element does NOT has "important" property</p>
    </main>

From the HTML code example above, we created a < main > tag with a class of first-case and inside this tag, we nested two < p > tags, with a class of p for both tags and present and not-present for each respectively.

The present, as seen, is explicitly defined with a style property and a value of background purple and then the important keyword.

The not-present, on the other hand, is left without a style property.

CSS:

.first-case{
    display: flex;
}

.p{
    background: purple;
    color: white;

    width: 400px;
    height: 100px;

    font-family: monospace;
    font-size: 20px;
    padding: 10px;
    margin-right: 20px;
}

.not-present {
    background: orange;
}

From the CSS code example above, we targeted the parent tag, < main > with a class of first-case and we set it to display: flex, making the children element < p > to sit side by side because they are now flex items.

Then we use the p class, which both < p > tags have in common, and we set it to a background of purple, the color of white, a width of 400px, and a height of 100px.

Also, the font-family is set to monospace, and the font-size is set to 20px to make it bold for readability purposes. At the same time, the padding and margin-right take 10px and 20px, respectively.

Now let’s see how we can access this using JavaScript below,

JavaScript:

// Section ONE
    const par1 = document.querySelector('.present');
    const par2 = document.querySelector('.not-present');

    // Section TWO
    const proOne = par1.style.getPropertyPriority('background');
    const proTwo = par2.style.getPropertyPriority('background');

    // Section THREE
    const returnOne =  par1.innerHTML = `The background of the paragraph is: ${proOne}`;
    const returnTwo =  par2.innerHTML = `The the background of the paragraph is: ${proTwo}`;

    console.log(returnOne)
    console.log(returnTwo)

Our JavaScript code above is divided into three sections:

First, we apply the two < p > to two different variables par1 and par2.
Then, use the style property to return the background property, and the getPropertyPriority() method is used to check if the property being returned is specified with the important keyword.
Lastly, we use the innerHTML to print out the value to the screen.

Also, we return the value to the console for the case of clarity.

Browser Output:

A complete Manual testing tutorial covering all aspects of Manual testing, including strategies and best practices.

As seen from the browser preview and console, the important keyword is printed in the first tag while an empty string is returned.

setProperty()

The setProperty() method interface of the CSSStyleDeclaration object is used to set a new value to the style property of a given element. The setProperty method takes in two or three arguments. The last argument (i.e., priority) is optional.

Syntax:

setProperty(propertyName, value)
setProperty(propertyName, value, priority)

Property name can be added in a single or double quote and then its value.
Second syntax is an important keyword in that double or single quote.

HTML:

<main class="first-case">
        <p class="p one">This element does NOT have "important" property</p>
        <p class="p two">This element has "important" property</p>
 </main>

Just like the previous code example, the HTML code above has two < p >, what we are going to do is set the style property with a background-color of green and brown to both tags and apply the important keyword to the lask < p > tag.

CSS:

.first-case{
    display: flex;
}

.p{
    color: white;

    width: 400px;
    height: 100px;

    font-family: monospace;
    font-size: 20px;
    padding: 10px;
    margin-right: 20px;
}

From the CSS code above, the parent element < main > tag with a class of first-case is set to display: flex, while the two < p > paragraph tags take a width and height of 400px and 100px respectively. Color of white, font-family of monospace, font-size of 20px, padding of 10px, and margin-right of 20px.

Now try the JavaScript code below,

JavaScript:

// Section ONE
    const par1 = document.querySelector('.one');
    const par2 = document.querySelector('.two');

    // Section TWO
    const proOne = par1.style.setProperty('background', 'green');
    const proTwo = par2.style.setProperty('background', 'brown', 'important');

This section has two parts of the JavaScript code above that explain what we are trying to do. We apply a background of green to the first tag and a background of brown to the section with the important value.

Browser Output:

A comprehensive User Acceptance Testing (UAT) tutorial that covers what User Acceptance Testing is, its importance, benefits, and how to perform it with real-time examples.

While observing the browser output, launch your DevTools and check the element tag; observe how the style tag is now inserted into both elements as indicated by the arrow and compare it with the HTML code we wrote.

removeProperty()

The removeProperty() method interface of the CSSStyleDeclaration object is used to remove a style property from a given element. The removeProperty method takes in the CSS style property to be removed as an argument.

Syntax:

removeProperty(property)

Try the code below.

HTML:

<p class="p one" style="background: purple;">This element does NOT have a background color</p>

Here, we make use of the same HTML element from the previous example.

Now let’s type out the CSS code.

CSS:

.p{
    color: black;

    width: 400px;
    height: 100px;

    font-family: monospace;
    font-size: 20px;
    padding: 10px;
    margin-right: 20px;

    border: 5px solid black;
}

In this section, we also make use of the same code from the previous section with some little modification. We changed the color from white to black, then added a border of 5px solid with the color black.

JavaScript:

// Section ONE
    const par1 = document.querySelector('.one');

 // Section TWO
 const proOne = par1.style.removeProperty('background');

We used the removeProperty() method to remove the background poverty from the < p > element. From the browser output, you will see that the box does not have a background color.

It’s important to note that when using multi-line words like background-color, use a hyphen and place it inside a single or double quote.

See the browser output below.

Browser Output:

In this Ad hoc testing tutorial, let’s deep dive into what Ad hoc testing is, its advantages, disadvantages, types, characteristics, and their best practices.

The browser output shows that the style attribute is still present, but the background property and value are completely removed.

item()

The item() method interface of the CSSStyleDeclaration object returns a style property from a given element. The item() method uses a positive integer as an argument and returns the property at the index.

If the item() method will return a space if you do the following;

Pass in a negative integer, for example, -1
If the integer passed is greater than the length of the properties of the specified element,

And if the item() is left empty without no value passed, it returns as Uncaught TypeError.

Syntax:

item(index)

Working with the item() method can be very confusing if you are trying it for the first time, so to make it easy, we are going to use two example methods to explain how the item() method works.

In the first example, we will use Longhand properties with the style attribute, while in the second example, we will use the Longhand and Shorthand properties.

Using item() to access longhand properties
In this section, we will use the longhand property within the style attribute and then use the item() method to return the given property at a specified index.

Try the code below.

HTML:

<p class="p one" style="color: white;
                        background-color: purple;
                        font-family: monospace;
                        width: 400px;
        ">
       This element has four items but its index at 0
       </p>

From the HTML code above, we have four properties assigned to the style attribute which are:

color
background-color
font-family and
width

We are going to be returning this property with the item() method.

CSS:

.p{
    width: 400px;
    height: 100px;

    font-size: 20px;
    padding: 10px;
    margin-right: 20px;
    border: 5px solid black;
}

We added the following CSS styles to the < p > tag, which is a width and height of 400px and 100px, font-size of 20px, a padding of 20px and border of 5px solid and color of black.

Many web developers forget font typography and spacing in CSS styling. Typography and font spacing in CSS is important for creating a visually appealing and easy-to-read website. To know in detail, please check our blog on CSS Font Spacing will cover everything you need to know about typography and font spacing in CSS and the different ways of achieving that.

JavaScript:

// Section ONE
    const par1 = document.querySelector('.one');

    // Section TWO
    const proOne = par1.style.item(0);
    const proTwo = par1.style.item(5);
    const proThree = par1.style.item(3);

    // Section THREE
    console.log(proOne);
    console.log(proTwo);
    console.log(proThree);

The JavaScript code is ground into three sections.

One, we assigned the < p > to a variable.
Two, we passed in three item() to three different variables.
Three, we printed out each value to the console.

See the browser output below.

Browser Output:

Do you use a Mac and want to run the test in Internet Explorer? This article explores how to test Internet Explorer on Mac.

From the browser output, the color and width returned properties have a huge space in between. This is the return value of the second variable we logged to the console.

The second variable takes in an argument of 5 integers, which is longer than the maximum length value of the specified element.

To get the length of all properties in the element, type the following on the console.

Console:

par1.style.length

This should return the length value.

DevTool:

The length of the properties passed to the style attribute is 4, as seen from the console.

Using item() to access shorthand properties
Now that we have seen how longhand works, let’s add two shorthand properties and remove two longhand properties from the style attribute.

Try the code below.

HTML:

<main class="first-case">
        <p class="p one" style="color: white;
                                background: purple;
                                font-family: monospace;
                                border: 5px solid black;
        ">
       This element has four items but its index at 0
       </p>

From the HTML code above, we replace just two colors as follows;

Background-color longhand property to background shorthand
width to border

While the remaining two remain the same.

Try the JavaScript code below.

JavaScript:

// Section ONE
    const par1 = document.querySelector('.one');

    // Section TWO
    const proOne = par1.style.item(0);
    const proTwo = par1.style.item(5);
    const proThree = par1.style.item(3);

    // Section THREE
    console.log(proOne);
    console.log(proTwo);
    console.log(proThree);

Type and run the JavaScript code above.

Browser Output:

From the browser output, we have color background-repeat-x, and background-position-y printed on the console.

The HTML file has the same number of properties just like the first one; the only difference is that we have two shorthand properties. So the item() fetches and returns every other property associated with the shorthand properties we assigned to the style attribute whether or not we explicitly specified it.

To see how this was done, let’s access the length.

Console:

par1.style.length

This should return the length value.

Upload your app for testing within seconds using the LambdaTest cloud and perform mobile app test right away. Find bugs early on, improve performance, quality, user experience and make the most of mobile application testing on LambdaTest.

From the browser output, 29 is printed out, as seen from the console.

To check all the properties being returned. Type and run the code below on the console.

Console:

par1.style

This should return all the properties associated with the element.

It’s essential to remember that the length is 28, and its index is 0, making it 29.

StyleSheet interface

Now, in this section, we’ll discuss another style interface that comes under CSS Object Model, i.e., the Stylesheet interface presents an object, a single stylesheet within the HTML document.

See the illustration for a better understanding.

Instance Properties:

To put it in simple terms, the instance properties of the stylesheet interface represent the attributes within the HTML < link > tag, including the following.

disabled: this is a boolean value that determines whether the stylesheet is prevented from applying to the document.
href: use to return the location of the stylesheet.
media: used to set or specify the media the stylesheet is made for, E.g, screen/print.
ownerNode: return the node connecting the stylesheet to the document. E.g., the < link > tag.
parentStyleSheet: return the current stylesheet if present or null if not present.
title: returns the advisory title of the current stylesheet.
type: return a string specifying the style language of the stylesheet.

StyleSheetList

This is another important style in the CSS Object Model, i.e., the StyleSheetList interface that returns a collection of CSSStyleSheet objects and behaves like an array-like object. It can be accessed using length property and item() methods.

Consider the illustration below.

Before we write any code, let’s see exactly how StyleSheetList works in the CSS object model.

length (Instance Property)

The length instance property of the StyleSheetList object returns the total length of the stylesheet object present in the document. For example, when we link a stylesheet to our HTML document using the HTML < link > tag, we have added one stylesheet object to that document which will be returned by the length instance property anytime we try to access it.

However, if we use the internal style tag < style > instead, we have added a stylesheet object. So the number of < link > we add determines the number that will be returned by the length property when we choose to use it.

Also, remember that using the @import CSS keyword to import an external file through the CSS file, the length property will not return it, as its only return using the < link > tag and internal < style > tag.

And if there happens to be no tag, that is < link > and < style > tag. The length property returns 0 integers.

Consider the code example below,

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSOM EXAMPLES</title>

    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="import.css" title="a title" media="screen" type="text/css">

</head>

<style>
    /*
  PLEASE NOT THIS WAS INTENTIONAL
  This internal style tag was keep like this on purpose
*/
</style>

<body>
...
</body>
</html>

From the HTML code example above, we added three < link > tags and one < style > tag. Making it four stylesheet objects we have added to the document.

Now let’s see if the length property will return the stylesheet number of 4 as expected.

Consider the JavaScript code below,

JavaScript:

const stylesheet = document.styleSheets.length;
 console.log(stylesheet);

The JavaScript code seems very basic here. We use the length property to return the number of stylesheet objects in the document.

Console:

As seen from the console. The number 4 integer is logged out.

item() (Instance Method)

The item() instance method of the StyleSheetList object returns a single stylesheet item from the total length of the stylesheet object present in the document.

For example, all you have to do is pass in a positive integer as an argument, and the item() returns the exact stylesheet based on the index provided.

Syntax:

item(index)

It’s important to note that the item() method is indexed at 0 integers. So index three will log out the fourth item.

Consider the JavaScript code below.

JavaScript:

const stylesheet = document.styleSheets;
console.log(stylesheet. item(3));

Console:

We have successfully logged the fourth item of the CSSStylesheet object.

Passing StyleSheet Object to a new Array

Using array methods will throw an error, but we can use a for loop to convert it into an array and loop through them.

Now let’s see some examples below.

JavaScript:

const stylesheet = document.styleSheets;

let newArr = [];

for(let i = 0; i < stylesheet.length; i++){
    let output = newArr.push(stylesheet[i]);

    console.log(output)
}

From the code, what we are doing is using a for loop to loop over each item of the stylesheet object and then assign it to a new array called newArr.

Then we store the value in an output variable logged into the browser console.

Console:

As seen from the console. The four stylesheet objects are printed out.

CSSStyleSheet

The CSSStyleSheet interface lets you inspect, return or modify CSS properties and values within the stylesheet objects. This behaves like an array-like object and can be accessed through the length property and the CSSStyleSheet instance methods under CSS Object Model properties.

Consider the illustration below.

The stylesheet object contains a collection of CSS properties and values in a code block for context.

Consider the code below,

CSS:

main {

    width: 400px;
    height: 100px;
}

The above CSS code is one code block, which is a cssRule. A code block in CSS is a collection of properties and values wrapped inside open and closed curly braces.

This code block is what is referred to as a cssRule. When we have two or more cssRule, it is called a cssRuleList, a list of cssRule. The cssRuleList can be accessed via the cssRules property.

The @import and @media are also part of the cssRuleList.

Instance Properties

cssRules

The cssRules of the CSSStyleSheet interface lets you return a live cssRuleList within the stylesheet object. This is a real-time update of the cssRuleList.

Try and run the code below.

CSS:

<style>
main {

    width: 400px;
    height: 100px;
}

.p{
    background: purple;
    color: white;  
}

.one {
    float: right;
}

.two {
    background-color: brown;
    clear: left;
}

div {
    font-size: 20px;
    font-family: monospace;

    padding: 10px;
    margin-right: 20px;
    border: 5px solid black;
}

</style>

From the CSS code above, we have five cssRule which is declared inside a stylesheet object. The stylesheet object, in this case, is in the < style > tag.

Now let’s see how we can return each cssRule with JavaScript.

Type and run the JavaScript code below,

JavaScript:

const stylesheet = document.styleSheets[0].cssRules;
console.log(stylesheet);

Console:

As indicated by the yellow, see each property on the console.

ownerNode

The ownerNode of the CSSStyleSheet interface lets you return the stylesheet object in the document.

Try the code below,

JavaScript:

const stylesheet = document.styleSheets[0].ownerNode;
console.log(stylesheet);

Console:

Since we make use of the < style > tag as our stylesheet object. This becomes the ownerNode.

Instance Methods

deleteRule()

The deleteRule() method of the CSSStyleSheet interface lets you remove a cssRule within the stylesheet object.

Syntax:

stylesheet.deleteRule(0);

Try the JavaScript code below,

JavaScript:

const removeRule = document.styleSheets[0];
removeRule.deleteRule(1)

 console.log(removeRule.cssRules.length);

Console:

From the console output, we have an output of 4 as the return number.

insertRule()

The insertRule() method of the CSSStyleSheet interface lets you insert a new cssRule within the stylesheet object.

Syntax:

stylesheet.insertRule(rule)
stylesheet.insertRule(rule, index)

Try the JavaScript code below,

JavaScript:

const addRule = document.styleSheets[0];
addRule.insertRule('p { color: red; }', 1);

console.log(addRule.cssRules.length);

From the JavaScript code example above, we insert the insertRule(); and then insert the p {color: red;} cssRule in the index 1 of the stylesheet object.

Making the total length of the cssRule 6 instead of 5. Now let’s check the browser output.

Console:

From the console output, the number 6 printout is the total length of the cssRuleList.

CSSRule

In this section, we’ll discuss the cssRules of the CSSStyleSheet interface in CSS Object Model that allows you to represent a single code block of a stylesheet object.

Instance Properties

cssText

The cssText instance property of the cssRule interface returns the cssRule as plain text.

Try the code example below.

CSS:

main {

    width: 400px;
    height: 100px;
}

.p{
    background: purple;
    color: white;  
}

.one {
    float: right;
}

.two {
    background-color: brown;
    clear: left;
}

JavaScript:

const printRule = document.styleSheets[0];
console.log(printRule.cssRules[1].cssText);

From the browser output, we used the cssText property to access the second cssRule from the stylesheet object of the current document. The 1 integer used represents the second index.

Console Output:

We have the second cssRule printed out from the console output.

parentRule

The parentRule instance property of the cssRule interface returns the cssMediaRule. If this is not present, it returns a null.

Try the code example below.

CSS:

@media (min-width: 900px) {
   .header {
    display: flex;
    flex-direction: column;
    justify-self: unset;
    }
}

main {

    width: 400px;
    height: 100px;
}

.p{
    background: purple;
    color: white;  
}

.one {
    float: right;
}

.two {
    background-color: brown;
    clear: left;
}

We have added the media queries to a class of .header, which takes a display of flex, a flex-direction of column and justify-self of unset.

Now let’s see how we can return the CSSMediaRule using the parentRule.

JavaScript:

const getRuleList = document.styleSheets[0].cssRules;
const getRules = getRuleList[0].cssRules;

console.log(getRules[0].parentRule);

Console Output:

From the console output, we logged out of the CSSMediaRule.

parentStyleSheet

The parentStyleSheet instance property of the cssRule interface returns the CSSStyleSheet interface object where cssRule is defined in.

Type and run the code below:

JavaScript:

const getRuleList = document.styleSheets[0].cssRules;
const getParent = getRuleList[0].cssRules;
console.log(getParent[0].parentStyleSheet);

From the code above, we are accessing the cssRuleList and returning the parentStyleSheet of the cssRule, which is a CSSStyleSheet object.

Console Output:

We logged out the parent stylesheet object, the CSSStyleSheet interface, from the console output.

CSSMediaRule

An important rule in the CSS Object Model is the CSSMediaRule interface that represents a single CSS @media rule of the CSS at-rule object. It takes a condition and a statement; when the condition is met, the statement is returned.

Instance Properties

Media

The CSSMediaRule.media instance property of the CSSMediaRule interface returns a MediaList.

Try the code example below.

CSS:

 @media (min-width: 900px) {
    .header {
    display: flex;
    flex-direction: column;
    justify-self: unset;
    }
}

main {

    width: 400px;
    height: 100px;
}

.p{
    background: purple;
    color: white;  
}

.one {
    float: right;
}

JavaScript:

let getMedia = document.styleSheets[0].cssRules;
console.log(getMedia[0].media);

We are using the media property to return the first mediaRule from the MediaList of CSSMediaRule
Interface.

Now let’s take a look at the console for output.

Console Output:

From the console output, we have the first mediaRule logged out, an index at 0.

CSSKeyframeRule

CSS keyframes are one of the kinds of animations used in the CSS Object Model that represents a set of CSS rules for a given keyframe.

Instance Properties:

keyText
0% to 100% (This will have an index of 0 and 1 and a length of 2)

The CSSKeyframeRule.KeyText instance property returns the CSSKeyframesRule selector. Which range from 0% to 100%. Each selector can be accessed by specifying a value based on the index of the selector. For example, a keyframe selector might range from the following.

0%, 50% to 100% (This will have an index of 0, 1, and 2 and a length of 3)
0%, 40%, 80% to 100% (This will have an index of 0, 1, 2 and 4 and a length of 4)

This will largely depend on the number of ranges(%) available.

Try the code example below,

CSS:

@keyframes animate {
  0% {
    background-color: red;
  }

  50% {
    background-color: green;
  }

  100% {
    background-color: blue;
  }
}

main {

    width: 400px;
    height: 100px;
    animation: animate 5s infinite;
}

.p{
    background: purple;
    color: white;  
}

JavaScript:

let getKeyframes = document.styleSheets[0].cssRules;
let returnKey = getKeyframes[0];
console.log(returnKey[2].keyText);

From the code example above, we are accessing the first CSSKeyframeRule by using the 0 indexes at the getKeyframes[0] and returning the last selector, 100%, by specifying the index value 2 at returnKey[2].keyText.

Console:

From the console output, we logged the 100% selector using the keyText from the CSSKeyframeRule

While working with CSS, web developers can leverage some of the best CSS frameworks to create user-friendly and browser-compatible websites and web pages. CSS Frameworks provide a solid foundation for developers to build upon and can save time and effort in the development process.

Further, with LambdaTest’s cross browser testing cloud, devs and QA can perform real-time testing and ensure their CSS-developed web applications render perfectly across multiple browsers environments.

You can also subscribe to our LambdaTest YouTube Channel to learn about web automation tools like Selenium, Playwright, Appium, and more.

Run your Selenium Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments.

Conclusion

We just covered a complete guide to CSS Object Model (CSSOM) covering topics on styling DOM elements, different CSS style interfaces, and different rules used in the CSS Object Model. Using the CSS Object Model, developers can create more sophisticated and interactive websites. With this guide, developers can use the CSS Object Model to improve their web applications and build more engaging user interfaces to provide a seamless user experience. Thanks for taking the time to read this article to completion. Feel free to ask questions in the comment below, and I’ll gladly reply.

Happy Testing!

#LambdaTestYourApps

Frequently Asked Questions (FAQs)

1.What is the DOM model in CSS?

A programming interface called the DOM (Document Object Model) is used in web development to show the structure of an HTML or XML document as a hierarchical tree. Developers can create dynamic and aesthetically pleasing web pages by selecting particular elements in the tree and applying styling rules to them using the DOM model in CSS.

2. How do DOM and CSS Object Model work?

A programming interface for web documents called Document Object Model (DOM) represents a page as a hierarchical tree structure. The interface used to modify the styling of elements in the DOM tree is the CSS Object Model (CSSOM). The DOM and CSS Object Model enable developers to change the content and styling of the page using JavaScript and CSS, resulting in dynamic web pages.

3.How is the CSS Object Model constructed?

By combining CSS files with the DOM tree and parsing CSS files, the CSS Object Model is created. Each document’s CSS Object Model, which the browser creates, contains all the rules applied to the elements in the DOM tree. The browser can render the website using the specified styles thanks to this process.

Mastering CSS Border Style: A Comprehensive Guide

Alex Anie — Fri, 03 Mar 2023 15:24:45 +0000

CSS Borders refers to the line outside the padding and inside the margin of the CSS Box Model. This line wraps around the padding and content in every HTML Element. That is both semantic and non-semantic elements.

Borderlines don’t have to be a solid straight line. We can apply different styles to it to change its looks and feel, as you will see as we learn more about it in this blog on CSS Borders.

Understanding how to use CSS Borders can improve our work with web elements. In this blog on CSS Borders, you will learn how to utilize CSS to generate and customize borders.

Introduction to CSS Borders

Since borders separate between padding and margin, CSS Borders can be used as a good color contrast between a web element and the web page’s background. For instance, if the background color of a web page is light in value, we can simply apply a dark or slightly darker color to a border of a particular web element on the web page. This will help provide a good visual contrast.

A good example of web elements we can apply borders to are buttons, cards, form fields, etc. The image below shows us how we can work with borders.

A quick look at the CSS Box Model should give us an idea of where the border can be found and what it looks like.

From the above illustration, you will notice that the border sits on top of the padding and, at the same time, below the margin.

As you’ll soon notice, the CSS border property is a shorthand property meant to declare all the border properties in a single instance without including other sub-properties.

For clarity purposes, we’ll learn how to use each property associated with the CSS border property, which includes:

border-width
border-color
border-styles
border-radius
border-image

Sub-properties are very useful for targeting individual properties and can improve how you style your web elements; when you understand how it works.

The CSS border property should not be confused with the CSS outline property, THEY ARE NOT THE SAME THING.

Check this out: Perform manual or automated cross browser test on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser testing tool online.

Border-style property

This property is used to set the style or decoration of the border of a web element. This property takes in the predefined values of the following:

Solid: sets a single straight line around a web element.
Dashed: sets a series of dashes (short hyphenated straight lines) around a web element.
Dotted: sets a series of rounded dots around a web element.
Hidden: hides the border.
Doubled: sets two straight lines around a web element.
Groove: sets a carved-out 3D appearance. This is the opposite of the ridge.
Ridge: sets an extrude in 3D appearance. This is the opposite of the groove.
Inset: sets an embedded 3D appearance. This is the opposite of the outset.
Outset: sets an embossed 3D appearance. This is the opposite of the inset.
None: removes the border. Behaves just like the hidden value.

It’s important to note that without the border-style property defined, other CSS Border properties, such as border-width, border-color, border-radius, etc., will not take effect. So the border should always be defined.

For a better understanding, see the illustration below.

Now let’s see how we can apply this using code.

Type and run the code below.

HTML:

   <body>

    <main>
        <div class="box">
            <section class="b dotted">border with dotted</section>
            <section class="b solid">border with solid</section>
            <section class="b dashed">border with dashed</section>
            <section class="b hidden">border with hidden</section>
            <section class="b doubled">border with double</section>
            <section class="b groove">border with groove</section>
            <section class="b ridge">border with ridge</section>
            <section class="b inset">border with inset</section>
            <section class="b outset">border with outset</section>
            <section class="b none">border with none</section>
        </div>
    </main>
    </body>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .dotted {
        border-style: solid;
        border-top-width: 2px;
        border-color: black;
    }

    .bottom {
        border-style: bottom;
        border-bottom-width: 2px;
    }

    .solid {
        border-style: solid;
        border-left-width: 2px;
    }

    .dashed{
        border-style: dashed;
        border-right-width: 2px;
    }

    .hidden {
        border-style: hidden;
        border-right-width: 9px;
    }

    .doubled {
        border-style: double;
        border-right-width: 2px;
    }

    .groove {
        border-style: groove;
        border-right-width: 2px;
    }

    .ridge {
        border-style: ridge;
        border-right-width: 2px;
    }

    .inset {
        border-style: inset;
        border-right-width: 2px;
    }

    .outset {
        border-style: outset;
        border-right-width: 2px;
    }

    .none {
        border-style: none;
        border-right-width: 2px;
    }

Browser Output:

Check this out: Need a great solution for cross browser testing on Safari? Forget about emulators or simulators — use real online browsers. Try LambdaTest to test on safari browser online!

Sub properties of border style

The CSS border-style property is a shorthand for the following properties below.

border-top-style: sets the line style of the web element’s top border.
border-bottom-style: sets the line style of the web element’s bottom border.
border-left-style: sets the line style of the web element’s left border.
border-right-style: sets the line style of the web element’s right border.

When we use the CSS border-style property, any value assigned automatically targets the four corners of the web element’s border, top, bottom, left, and right.

So when we need to style one corner of the web element, we can use the sub-properties designed to handle this task.

Type and run the code below.

HTML:

   <main>
        <div class="box">
            <section class="b top">border-top-style</section>
            <section class="b bottom">border-bottom-style</section>
            <section class="b left">border-left-style</section>
            <section class="b right">border-right-style</section>
        </div>
    </main>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .top {
        border-top-style: solid;
    }

    .bottom{
        border-bottom-style: dashed;
    }

    .left {
        border-left-style: dotted;
    }

    .right {
        border-right-style: double;
    }

Browser Output:

Test your CSS Borders across 3000+ real browsers and OS. Try LambdaTest Now!

Check this out: Test your native, hybrid, and web apps across all legacy and latest mobile operating systems on the most powerful online emulator Android.

Border-width property

This property is used to set the size of the border width, and to do this, we can either use the keyword values or length values associated with the CSS border property.

Keyword Values: thin, medium, thick. (these are predefined values). These values are fixed.
Length Value: rem, em, pt, %, px (These are CSS units). These values are not fixed. We can be creative and determine how big or small we want the width to appear.

Type and run the code below.

HTML:

    <main>
        <div class="box">
            <section class="b thin">A border with thin line</section>
            <section class="b medium">A border with medium line</section>
            <section class="b thick">A border with thick line</section>
            <section class="b px">A border using the CSS px unit</section>
            <section class="b rem">A border using the CSS rem unit</section>
            <section class="b percentage">A border using the CSS %    unit</section>
            <section class="b no-style">border style is not defined</section>
        </div>
    </main>

CSS:

    .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .thin {
        border-style: solid;
        border-width: thin;
    }

    .medium {
        border-style: solid;
        border-width: medium;
    }

    .thick {
        border-style: solid;
        border-width: thick;
    }

    .px {
        border-style: solid;
        border-width: 7px;
    }

    .rem {
        border-style: solid;
        border-width: 0.07rem;
    }

    .percentage {
        border-style: solid;
        border-width: 3%;
    }

    .no-style {
        border-width: 7px;
    }

Browser Output:

From the browser output, you’ll notice the fourth element has the largest border width on the webpage compared to the others. This is because we will assign it a width of 7px, but we can make it larger if we want, as long as we use CSS units (such as px, rem, em, %, etc.)

Check this out: Test your native, hybrid, and web apps across all legacy and latest mobile operating systems on the most powerful Android online emulator.

Sub properties of border width

While the px CSS unit is absolute, changes from the web element do not directly affect it, unlike the rem and em, which are relative to the HTML root and parent elements. For example, the width of 7px we assigned to our border will still be stuck at 7px if the user by any means decides to increase or decrease the browser font size, but using units like rem and em, which are relative scale better to fit the new adjusted size of the browser. This is great for accessibility and responsive design.

The keyword values (thin, medium, and thick) only give us a fixed width, which has already been predefined.

As you have seen, the last element does not have a border width. This is because we do not assign a CSS border-style to the element. Border-style (border-style) is required to make the border appear in every element.

The CSS border-width property is a shorthand for the following properties below.

border-top-width: sets the line width of the web element’s top border.
border-bottom-width: sets the line width of the web element’s bottom border.
border-left-width: sets the line width of the web element’s left border.
border-right-width: sets the line width of the web element’s right border.

As we’ve seen before, from the CSS border-style property, any value assigned to CSS border-width automatically targets the four corners of the web element’s border, top, bottom, left, and right respectively.

So to target each corner individually, the border-width sub-properties should be used.

Type and run the code below.

HTML:

    <main>
            <div class="box">
                <section class="b top">A border top width</section>
                <section class="b bottom">A border bottom width</section>
                <section class="b left">A border left width</section>
                <section class="b right">A border right width</section>
            </div>
        </main>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .top {
        border-style: solid;
        border-top-width: 9px;
    }

    .bottom {
        border-style: solid;
        border-bottom-width: 9px;
    }

    .left {
        border-style: solid;
        border-left-width: 9px;
    }

    .right {
        border-style: solid;
        border-right-width: 9px;
    }

Browser Output:

From the browser output we assign a width of 9px to the top, bottom, left and right of each element.

Border-color property

From the browser output we assign a width of 9px to the top, bottom, left and right of each element.
This property is used to set the color of the element’s border.

Type and run the code below.

HTML:

    <main>
        <div class="box">
            <section class="b green">A border with green color</section>
            <section class="b red">A border with red color</section>
            <section class="b rgb1">A border with rgb color value</section>
            <section class="b rgb2">A border with rgb color value</section>
            <section class="b hexcode1">
               A border with hexcode color value
            </section>
            <section class="b hexcode2">
              A border with hexcode color value
            </section>
        </div>
    </main>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .green {
        border-style: solid;
        border-width: 9px;
        border-color: green;
    }

    .red {
        border-style: solid;
        border-width: 9px;
        border-color: red;
    }

    .rgb1 {
        border-style: solid;
        border-width: 9px;
        border-color: rgb(32, 113, 128);
    }

    .rgb2 {
        border-style: solid;
        border-width: 9px;
        border-color: rgb(231, 248, 76) ;
    }

    .hexcode1 {
            border-style: solid;
            border-width: 9px;
            border-color:#1301b3 ;
    }

    .hexcode2 {
        border-style: solid;
        border-width: 9px;
        border-color: #0d0b25;
    }

Browser Output:

From the browser output, we applied colors to the border of the elements on the web page using color keyword, rgb, and hexcode values.

**Check this out: Are you using Playwright for automation testing? Run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud. **

Sub properties of border color

The CSS border-color property is a shorthand for the following properties below.

border-top-color: sets the color of the web element’s top border.
border-bottom-color: sets the color of the web element’s bottom border.
border-left-color: sets the color of the web element’s left border.
border-right-color: sets the color of the web element’s right border.

The CSS border-color property, any value assigned to the CSS border-color automatically targets the four corners of the web element’s border, top, bottom, left, and right, respectively.

We use these sub-properties when there is a need to target individual borders and apply different colors.

For better understanding, let’s see this in action.

Type and run the code below.

HTML:

   <main>
            <div class="box">
                <section class="b top">A border top color</section>
                <section class="b bottom">A border bottom color</section>
                <section class="b left">A border left color</section>
                <section class="b right">A border right color</section>
            </div>
        </main>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .top {
        border-style: solid;
        border-width: 9px;
        border-top-color: green;
    }

    .bottom {
        border-style: solid;
        border-width: 9px;
        border-bottom-color: red;
    }

    .left {
        border-style: solid;
        border-width: 9px;
        border-left-color: rgb(32, 113, 128);
    }

    .right {
        border-style: solid;
        border-width: 9px;
        border-right-color: rgb(231, 248, 76) ;
    }

Browser Output:

From the browser output, we created four separate div tags, and we applied a CSS border-style of solid, border-width of 9px and different colors to each element’s border.

Also, border-top-color, border-bottom-color, border-left-color, and border-right-color are applied to different corners of each web element, respectively.

Border-radius property

This property is used to apply a round corner effect to an element’s outer edge or border.

Unlike the other CSS border properties, the CSS border-radius property takes effect with or without an element border. You also don’t need to define a CSS border-style property for the CSS border-radius property to work.

The code below shows us how this works.

Type and run the code below.

HTML:

    <main>
        <div class="box">
            <section class="b square">A square with a border-radius</section>
            <section class="b cirle">A circle with a border-radius</section>
            <section class="b rectangle">A rectangle with a border-radius</section>

        </div>
    </main>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .square {
        width: 150px;
        height: 150px;
        color: white;
        background-color: skyblue;
        border-radius: 12px;
    }

    .circle {
        width: 150px;
        height: 150px;
        color: white;
        background-color: coral;
        border-radius: 50%;
    }

    .rectangle {
        width: 400px;
        height: 100px;
        color: white;
        background-color: darkmagenta;
        border-radius: 0px 20px;
        border: 9px solid #000;
    }

Browser Output:

The CSS border-radius property is very different when we apply it to an element. It rounds the four corners of the element even when the said element border is set to hidden or none.

From the browser’s output, you’ll notice that the three elements have different shapes. The first square takes in width and height of 150px on both sides and a CSS border-radius of 12px, leading to a round corner effect.

The second element, which happens to be a circle, is set to the same width and height **of **150px but this time, a CSS border-radius of 50% . This creates a circle effect of the element.

While the third one is a rectangle, which takes in a width of 400px and a height of 100px. The CSS border-radius is set to 0px on the top-left and bottom-right while 20px on the top-right and bottom-right.

Also, we introduced a border and set the width to 9px across, a style of solid and a color of black. Notice how this is done in one line of code. In this tutorial on CSS Borders, we’ll explain how this is done in the upcoming chapter.

Check this out: A comprehensive end to end Testing tutorial that covers what E2E Testing is, its importance, benefits, and how to perform it with real-time examples.

Sub properties of border radius

We’ve talked about shorthand property before, the CSS border-radius is a shorthand property for the following properties below.

border-top-left-radius: sets the radius of the web element’s top-left border.
border-top-right-radius: sets the radius of the web element’s top-right border.
border-bottom-right-radius: sets the radius of the web element’s bottom-right border.
border-bottom-left-radius: sets the radius of the web element’s bottom-left border.

Type and run the code below.

HTML:

  <main>
            <div class="box">
                <section class="b top-left">
                  A border radius for top-left border
                </section>
                <section class="b top-right">
                  A border radius for top-right border
                </section>
                <section class="b bottom-right">
                   A border radius for bottom-right border
                </section>
                <section class="b bottom-left">
                   A border radius for bottom-left border
                </section>
            </div>
        </main>

CSS:

 .b {
        background-color: rgb(240, 181, 181);
        width: 300px;
        margin: 20px;
    }

    .top-left {
        width: 400px;
        height: 50px;
        color: white;
        background-color: rgb(0, 157, 219);
        border-top-left-radius: 12px;
    }

    .top-right {
        width: 400px;
        height: 50px;
        color: white;
        background-color: rgb(15, 81, 107);
        border-top-right-radius: 12px;
    }

    .bottom-right {
        width: 400px;
        height: 50px;
        color: white;
        background-color: rgb(15, 19, 252);
        border-bottom-right-radius: 12px;
    }

    .bottom-left {
        width: 400px;
        height: 50px;
        color: white;
        background-color: rgb(3, 4, 85);
        border-bottom-left-radius: 12px;
    }

Browser Output:

Applying CSS border-radius is very popular in web design and development. Understanding and using this property effectively will improve your design elements.

Border-image property

This property is used to set an image as the border of an element in place of a borderline.

This property can be used to declare all the border image sub-properties in one line of code.

Syntax:

  border-image: url(“/folder/image.jpg”) 16 / 40px / 10px stretch;

Just like most of the border property, the CSS border-image property is a shorthand property for the following properties.

We will use the following images from Unsplash; you can download them here: Image1, Image2, and Image3.

Check this out: Are you using Playwright for automation testing? Run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud.

border-image-source

Used to set the image path to be used.

Type and run the code below.

HTML:

    <div class=”b two”></div>

CSS:

  .two {
        width: 100px;
        height: 100px;
        background-color: lime;
        border-image-source: url("/flower2.jpg");
        border-image-width: 40px;
        border-style: solid;
        border-color: transparent;
    }

Browser Output:

From the code sample above, we use the CSS border-image-source property to apply an image to the element border. We also apply a CSS border-images-width of 40px; we’ll explain how this works shortly.

Check this out: This Playwright automation tutorial will guide you through the setup of the Playwright framework, which will enable you to write end-to-end tests for your future projects.

border-image-width

Used to set the width of the border image. It takes integers as values in four places: the top, bottom, left, and right.

Type and run the code below.

HTML:

   <main>
        <div class="box">
            <div class="b one"></div>
            <div class="b two"></div>
            <div class="b three"></div>
            <div class="b four"></div>
        </div>
    </main>

CSS:

 .b {
        background-color: rgb(240, 181, 181);
        margin: 10px;
    }

    .one {
        width: 100px;
        height: 100px;
        background-color: red;
        border-image: url("/flower.jpg") 90 repeat stretch;
        border-image-width: 10px;
        border-style: dotted;
        border-color: transparent;
    }

    .two {
        width: 100px;
        height: 100px;
        background-color: lime;
        border-image: url("/flower2.jpg") 40% round ;
        border-image-width: 30px 10px;
        border-style: solid;
        border-color: transparent;
    }

    .three {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image: url("/flower3.jpg") 90 repeat stretch;
        border-image-width: 50px;
        border-style: double;
        border-color: transparent;
    }

    .four {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image: url("/flower3.jpg") 90 repeat stretch;
        border-width: 50px;
        border-style: double;
        border-color: transparent;
    }

Browser Output:

From the code sample above, we created four div tags with a width **and **height of 100px across. We apply a border image to each div tag. These images are set to a different width with the CSS border-image-width property, which affects the structure of the elements, as you can see from the browser output.

The first element takes in a border-image-width of 10px, this gives the image a 10px width around the element. The next element, which is the second one, takes in 30px for top and bottom and 10px for left and right, while for the third and fourth elements, we applied the same styles to both but different border width properties. The third element takes a CSS border-image-width property, while the four elements take in a CSS border-width property. This is to illustrate the difference between the two properties, so we don’t mistake one for the other.

The block arrow shows us how the CSS border-image-width affects element structure compared to CSS border-width.

border-image-slice

Used to slice up the image used as the border-image into different regions around the element border. It takes integers, keywords, or percentages (%) as values.

Type and run the code below.

HTML:

  <main>
        <div class="box">
            <div class="b one"></div>
            <div class="b two"></div>
            <div class="b three"></div>
            <div class="b four"></div>
         </div>
    </main>

CSS:

  .b {
        background-color: rgb(240, 181, 181);
        margin: 10px;
    }

    .one {
        width: 100px;
        height: 100px;
        background-color: red;
        border-image-source: url("/flower.jpg");
        border-image-width: 10px;
        border-style: dotted;
        border-color: transparent;
    }

    .two {
        width: 100px;
        height: 100px;
        background-color: lime;
        border-image-source: url("/flower2.jpg");
        border-image-width: 40px;
        border-style: solid;
        border-color: transparent;
    }

    .three {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-image-width: 50px;
        border-style: double;
        border-color: transparent;
    }

    .four {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-width: 50px;
        border-style: solid;
        border-color: transparent;
    }

Browser Output:

From the browser output above, this is how the border-image appears without the CSS border-image-slice property.

Now let’s look at how the border-image appears when we assign the CSS border-image-property.

Type and run the code below.

CSS:

  .one {
        border-image-slice: 5;}

    .two {
        border-image-slice: 20%;
    }

    .three {
        border-image-slice: fill;
    }

    .four {
        border-image-slice: 50;;
    }

Browser Output:

Apart from the third element, which is assigned a value of fill, all other elements had changed from the cross-like shape they had when we first created them from the previous example.

Check this out: Test your native, hybrid, and web apps across all legacy and latest mobile operating systems on the most powerful online Android emulator.

border-image-repeat

This is used to set how the image is distributed around the element’s border. That is, the images, when assigned their keyword value, will occupy any remaining space around the element’s border by either stretching, rounding, repeating, or spacing.

For better understanding, type and run the code below.

HTML:

  <main>
        <div class="box">
            <div class="b one"></div>
            <div class="b two"></div>
            <div class="b three"></div>
            <div class="b four"></div>

CSS:

  .b {
        background-color: rgb(240, 181, 181);
        margin: 10px;
    }

    .one {
        width: 100px;
        height: 100px;
        background-color: red;
        border-image-source: url("/flower.jpg");
        border-image-slice: 5;
        border-image-repeat: space;
        border-image-width: 10px;
        border-style: dotted;
        border-color: transparent;
    }

    .two {
        width: 100px;
        height: 100px;
        background-color: lime;
        border-image-source: url("/flower2.jpg");
        border-image-slice: 20%;
        border-image-repeat: stretch;
        border-image-width: 40px;
        border-style: solid;
        border-color: transparent;
    }

    .three {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-image-width: 20px;
        border-image-repeat: round;
        border-image-slice: 2;
        border-style: double;
        border-color: transparent;
    }

    .four {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-image-slice: 20;
        border-image-repeat: repeat;
        border-width: 50px;
        border-style: solid;
        border-color: transparent;
    }

Browser Output:

Notice from the browser output the different distribution or repetition of the image across the element’s border. The first element has a value of space, which results in space being applied to separate the image into squares. The second element takes a value of stretch, which results in the image stretching across the element’s border. The third element takes a value of round, which results in the rounding of the image across the element’s border, while the four elements take a value of repeat, which results in the image repeating in a square-like manner across the border image.

We can also assign more than one value to the CSS border-image-repeat property in one line of code.

Try this example below.

HTML:

 <div class=”b four”></div>

CSS:

 .four {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-image-slice: 20;
        border-image-repeat: repeat space;
        border-width: 50px;
        border-style: solid;
        border-color: transparent;
    }

Brower Output:

From the browser output, we added another value of **space **to the fourth element, which resulted in spaces being added to the element **left **and **right **side while the top and bottom retain its initial value of repeat.

border-image-outset

This is used to set the distance between the border-image and the element border box.

Type and run the code below.

HTML:

 <main>
        <div class="box">
            <div class="b one"></div>
            <div class="b two"></div>
            <div class="b three"></div>
            <div class="b four"></div>
        </div>
    </main>

CSS:

   .b {
        background-color: rgb(240, 181, 181);
        margin: 10px;
    }

    .one {
        width: 100px;
        height: 100px;
        background-color: red;
        border-image-source: url("/flower.jpg");
        border-image-slice: 15;
        border-image-repeat: space;
        border-image-outset: 10px;
        border-image-width: 10px;
        border-style: dotted;
        border-color: transparent;
    }

    .two {
        width: 100px;
        height: 100px;
        background-color: lime;
        border-image-source: url("/flower2.jpg");
        border-image-slice: 20%;
        border-image-repeat: stretch;
        border-image-outset: 0 1rem;
        border-image-width: 40px;
        border-style: solid;
        border-color: transparent;
    }

    .three {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-image-width: 20px;
        border-image-repeat: round;
        border-image-outset: 4;
        border-image-slice: 2;
        border-style: double;
        border-color: transparent;
    }

    .four {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-image-source: url("/flower3.jpg");
        border-image-slice: 20;
        border-image-repeat: repeat;
        border-image-outset: 10px;
        border-width: 50px;
        border-style: dotted;
        border-color: transparent;
    }

Browser Output:

From the browser out, the first element gives us a perfect example of how the CSS border-image-outset property works, as you can see how the four square boxes shoot out from the border box.

Border (Shorthand property)

This sets all the border sub-properties in one line of code.

The example below shows us how this works. By creating a simple Click Me button project, we can see how we can assign multiple values in one line of code using the border shorthand property.

Type and run the code below.

HTML:

 <main>
            <div class="b box">
               <button>Click Me</button>
            </div>
    </main>

Browser Output:

From the browser output, you’ll notice the thin line surrounding the Click Me text, this is what we refer to as a border line. By default the HTML button tag has it turned on. So we will set it to double and add other border sub-properties to make it look nice.

CSS:

  .b {
        background-color: rgb(240, 181, 181);
        margin: 10px;
    }

    .box button{
        background-color: blue;
        color: white;
        padding: 1rem 2rem;
        border: 0.5rem double #aff;
        border-radius: 1em;
        box-shadow: 8px 8px 8px 0 rgba(0,0,0, 0.4);
    }

Browser Output:

From the browser output, we added a border-width of 0.5rem, a border-style of double, a border-color of hex #aff, and a border-radius of 1rem. We also added a box shadow to create an emphasis on the border.

Check this out: Test your apps on the cloud using our android Emulator for iOS. Ditch your in-house infrastructure, and gain access to 3000+ browsers in real time.

Testing CSS Borders

So far, we’ve talked about borders and border sub-properties, their uses, and how we can implement them. In this section, we will see how we can test CSS Borders.

CSS Borders are essential to web design, as they help define a website’s layout and visual appearance. Testing CSS Borders is important to ensure they appear as intended, function correctly, and prevent user experience issues. In other words, testing CSS Borders ensures visual consistency, accessibility, layout and positioning, and user interaction.

Testing your CSS Borders with cloud testing platforms like LambdaTest can help you ensure that your web pages display correctly across multiple browsers and devices, improving user experience and enhancing the overall quality of your website or application.

LambdaTest is a cloud-based testing platform that allows you to test your website or application on a wide range of browsers and devices, including real device cloud, Android Emulators, and iOS Simulators.

With the LambdaTest Real Time Testing feature, you can quickly and easily identify any issues related to your CSS Borders and address them before they impact the user experience. This saves you time and effort in manually testing your website on multiple devices and browsers and ensures that your web pages look consistent and professional across all platforms.

Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium testing, Cypress testing, and more.

Check this out: Online mobile emulator online from LambdaTest allows you to seamlessly test your mobile applications, websites, and web apps on mobile browsers and mobile devices.

How to test CSS Borders on the cloud?

The code of our created button has already been uploaded on CodePen.

To get started with Real Time Testing with LambdaTest, follow these steps.

Sign up for free and log in to your LambdaTest account.
A dialog box should pop up. Click Realtime Testing.

3- This should open up the LambdaTest Real Time Browser Testing Dashboard, where you can start testing.

Choose the browser you would like to test on (in our case, we’ll go with Chrome).
Select the version, and we’ll choose version 103.
Select the OS you like to test on. In this case, we’ll choose Windows 10.
Select a screen resolution. In this case, we’ll go with 1280 x 720.
In the provided field, paste the website URL you’d like to run the test on. In this case, we’ll paste the URL from the CodePen we created earlier.

Click on the START button.

You should see a loading screen; wait to let it load.

This will open the Real Time Browser Viewer hosted on the cloud running a real operating system.

This is where you can perform real time testing. This console lets you change resolutions, debug our website and share a screenshot with your teammates.

Check this out: Automated Functional Testing tests helps to ensure that your web app works as it was intented to. Learn more about functional tests, and how automating them can give you a faster release cycle!

Summary

You have learned how to create and style borders using CSS. We covered the following border properties.

Border-width, Border-styles, Border-colors, Border-radius, Border-image, and their shorthand border properties.

Thanks for taking the time to read this blog on CSS Borders to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter and other social media @ocxigin.

Cheers

A Complete Guide to Document Object Model

Alex Anie — Wed, 25 Jan 2023 00:03:08 +0000

The Document Object Model, abbreviated as the DOM, refers to the Virtual Document, which is modeled as a document on the web. Every website has pages that are called HTML documents.

These documents are represented on the webpage as nodes and objects. When parsed into a web browser such as Chrome, Firefox, Safari, and Opera-Mini, to mention a few helps display information. All information on the web page or document is contents or text, like placeholders on the node in the Document Object Model tree. This Document Object Model tree refers to the structure of the document.

Ever since the invention of the Internet and its widespread adoption, there has been the need to have a virtual representation of physical things on the web.

The Physical documents used today in various offices, organizations, and every other corporate environment have been a big part of this. That is the need for a document that properly displays information on the web. However, for this to be possible, the document has to be a model of a physical document and, at the same time, render properly on the web (Web Browsers).

This document is a text file written in HTML (HyperText Markup Language). It contains Hyperlinks that point to other web pages and also within the same documents. Multimedia files such as Video, Audio, and other Graphic Content can also be embedded within the document. Understanding How the Document Object Model works is a very crucial part of web development.

In this tutorial on Document Object Model, you will learn everything you need to know to get started with the Document Object Model.

Check this out: 30 Top Automation Testing Tools In 2022

What is the Document Object Model (DOM)?

The Document Object Model is a programming interface that comprises web pages (nodes) that is HTML tags such as < html >, < meta >, < title >, < body >, < footer > , < dv >, semantic and non-semantic tags and other nodes objects. The Document Object Model, which is a W3 standard, represents web pages as a tree-like structure of nodes, known as documents.

The Document Object Model allows web developers to manipulate, style, and structure node objects (HTML documents). For example, web elements are manipulated dynamically with JavaScript to add dynamic content and interactivity to the web page, while CSS is used to add aesthetics. This is referred to as styling to the web page.

Furthermore, the Document Object Model can also be used with other programming languages such as C#, Ruby, Python, Java, and PHP. However, on the front end, JavaScript and CSS are mostly used as these are the languages of the browser.

Check this out: Online Automation Testing Platform- Accelerate your release velocity with blazing fast test automation on cloud

The DOM Structure or the DOM TREE

The DOM exists in a hierarchical tree-like structure, where each web element that makes up the document can be thought of as a node, that is, the element tags, the attribute assigned to the element, the comment, the text content, and the document as well is also a node.

The document object is the root object and can be found within the window’s object. The window’s object defines the document object and how it is rendered or loaded within the webpage.

The document object has properties and methods that can manipulate contents or element nodes on the page.

The diagram below gives a simple illustration of what the tree-like structure looks like.

From the Document Object Model structure shown above, you will notice how each element directly connects to other elements; this is known as a hierarchy. This hierarchy is important as this determines how elements are laid out and how they can be accessed with JavaScript and CSS.

Look at how this hierarchy is laid out in an HTML document.

<!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>This is an HTML document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <body>
        <main>
          <!-- This is the website Navigation -->
          <header>
            <nav>
              <ul>
                <li>HOME</li>
                <li>SERVICES</li>
                <li>ABOUT</li>
              </ul>
            </nav>
          </header>

          <section>
            <h1>The Document Object Model</h1>
            <p>

      The DOM gives web developers the flexibility to be able to manipulate, style and structure element nodes (HTML elements). For Example web elements are manipulated dynamically with JavaScript to be able to add dynamic content and interactivity to the web page while CSS is used to add aesthetics, this is referred to as styling to the web page.

      Furthermore the DOM can also be used with other programming languages such as, C# (SEE SHARP), Ruby, Python, Java and PHP. However on the frontend JavaScript and CSS are mostly used as these are the languages of the browser.

            </p>
          </section>
        </main>
      </body>
      </html>

Now that we have the HTML structure laid out, let’s break down how the hierarchy works.

From the code sample above, the HTML Document contains different types of HTML tags. Out of all these tags, we have the < html > tag at the top level, followed by the < head > tag. Inside the < head > tag, we have the < meta >,< title >, and < link > tags, respectively. Below the < head > tag, we have the < body > tag.

The < body > contains all the necessary tags responsible for displaying all the contents on the webpage. The < body > tag, as you can see, includes a < main > tag, a < header > tag, a < nav > tag, < ul > tag, and a < li > tag. Furthermore, below the < header > tag is the < section > tag, and inside the < section > tag are the < h1 > and < p > tags, respectively.

Please take note when a tag is placed inside another tag. This is referred to as nesting. So we can simply say that the < header > tag is nested inside the < main > tag, while the < main > is nested inside the < body > tag.

Nesting affects how elements are accessed with JavaScript. For instance, we can create a new element tag from our JavaScript file.

To do this, we will create the element tag, target the parent element, and then append the new element as a child element.

The image below explains this better.

From the image above, you will notice some elements appear at the top level, and other elements are placed inside them. You can use this to explain the hierarchical relationship as follows.

Root node

This refers to the topmost element in the Document Object Model tree. For example, in this case, the < HTML > tag is the root tag.

Parent node

This refers to the element directly at the top of another element. For example, the < body > tag is parent to the < main > tag, as the < body > tag is placed directly above the < main > tag.

Child node

This refers to the element directly below another element. For example, the < main > tag is a child element to the < body > tag because it is placed directly below the < body > element.

Check this out: Online Automation Testing Platform- Accelerate your release velocity with blazing fast test automation cloud

Grand-child node

This refers to any element that is below the child element. For example, the < header > is below the < main >, which is a child of the < body > tag. This makes the < header > tag a grand-child of the < body > tag.

Siblings

This refers to any two or more elements that share the same parent and are on the same level. For example, the < header > and the < section > tags share the parent, the < main > tag. Hence they can be referred to as siblings in the document tree.

Ancestor node

This refers to the element that all other elements are nested in. For example, in this case, the < html > can be referred to as the ancestor to other elements.

Descendants

The parent, children, siblings, and grand-children are all referred to as descendants of the root element. For example, every document tree element is a descendant of the < html > tag.

Leaf node

The last element or node in document three that does not have a child. A leaf node can also be described as the end of a branch in a Document Object Model tree.

The image below explains the above concept better.

Check this out: Web Testing Tutorial: Comprehensive Guide With Best Practices

Accessing the DOM Interface

The DOM is an interface that provides us with object nodes, and there are lots of built-in properties/methods we can use to access and manipulate the contents in the Document Object Model tree in JavaScript.

Using the HTML < script > tag, we can embed JavaScript code within the HTML file or link it to an external file and then use methods available in JavaScript to access and manipulate the Document Object Model.

This is necessary; for instance, we can create and validate a form field that lets users sign up for our newsletter, and we can also make web elements interactive when users over-hover them.

The next section will explain the methods and properties we can use to make changes to the Document Object Model.

Check this out: Selenium Testing Automation Cloud: Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers.

Document Instance Properties

Document Instance Properties are used to capture information about the state of an object at a given point in time.

classList

The element.classList instance property returns a class attribute of a live DOMTokenList collection. The DOMTokenList instance methods are required to manipulate or make changes when using the classList instance properties.

The instance methods for the classList instance property are as follows.

add(): used to add one or more classes to the class attributes of an element.
remove(): used to remove one or more classes from the class attributes of an element.
replace(): used to replace a given class with a new class within the class attributes of an element.
toggle(): used to toggle a given class within a class attribute of an element. That is when you make use of the toggle method. It removes the class you assign to the element from the class attribute if the class exists and replaces it if the class does not exist within the element.

Take the example below.

HTML:


<h1>This is classList property</h1>
        <p>Click the boxes to change color</p>

        <main>
          <div class="default-Color" id="addOne">This is a add()     method</div>
          <div class="default-Color" id="addTwo">This is a remove() method</div>
          <div class="default-Color" id="addThree">This is a replace() method</div>
          <div class="default-Color" id="addFour">This is a toggle() method</div>
        </main>

HTML:


 <h1>This is classList property</h1>
      <p>Click the boxes to change color</p>

      <main>
        <div class="default-Color" id="addOne">This is a add() method</div>
        <div class="default-Color" id="addTwo">This is a remove() method</div>
        <div class="default-Color" id="addThree">This is a replace() method</div>
        <div class="default-Color" id="addFour">This is a toggle() method</div>
      </main>

CSS:


    main {
        display: flex;
      }

      div {
        width: 150px;
        height: 80px;
        margin: 0.4em;
        border: 2px solid #000000;
      }

      .default-Color{
        background: red;
      }

      .green {
        background: green;
      }

      .purple {
        background: purple;
      }

      .blue {
        background: blue;
      }

      .orange {
        background: orange;
      }

JS:

    //Variable
      const addColor = document.querySelector('#addOne');
      const removeColor = document.querySelector('#addTwo');
      const replaceColor = document.querySelector('#addThree');
      const toggleColor = document.querySelector('#addFour');

      // function

      //add() methods
      function addMyColorGreen(){
        addColor.classList.add('green')
        console.log(addColor);

      }


      //remove() methods
      function addMyColorRed(){
        removeColor.classList.remove('default-Color')
        console.log(removeColor);

      }


      //replace() methods
      function addMyColorBlue(){
        replaceColor.classList.replace('default-Color', 'blue')
        console.log(replaceColor);

      }


      //toggle() methods
      function addMyColorOrange(){
        toggleColor.classList.toggle('orange')
        console.log(toggleColor);
      }


      // EventLinsterners
      addColor.addEventListener('click', addMyColorGreen);
      removeColor.addEventListener('click', addMyColorRed);
      replaceColor.addEventListener('click', addMyColorBlue);
      toggleColor.addEventListener('click', addMyColorOrange);

From the HTML code example, we have an < main > as the parent tag, and we nested four < div > tags inside the < main > tag.

Each < div > tag is assigned a class of default-Color and an id of addOne, addTwo, addThree, and addFour, respectively.

CSS:


      main {
          display: flex;
        }

        div {
          width: 150px;
          height: 80px;
          margin: 0.4em;
          border: 2px solid #000000;
        }

        .default-Color{
          background: red;
        }

        .green {
          background: green;
        }

        .purple {
          background: purple;
        }

        .blue {
          background: blue;
        }

        .orange {
          background: orange;
        }

While from the CSS code sample, we set a display of flex to < main > tag, the parent element in this case and we targeted the < div > tag, we set the width and height to 150px and 80px respectively, margin 0.4em across and a border of 2px solid and #000000 (black).

Furthermore, we set the default-Color to red, so each box is red by default, and we created four extra utility classes waiting to be used.

We will see how we can use JavaScript to change the elements using these classes.

JavaScript:

//Variable
        const addColor = document.querySelector('#addOne');
        const removeColor = document.querySelector('#addTwo');
        const replaceColor = document.querySelector('#addThree');
        const toggleColor = document.querySelector('#addFour');

First, we use the querySelector() method to get the element and then assign them to a variable, as you can see. We create four variables named addColor, removeColor, replaceColor, and toggleColor, respectively.

Variables are just like containers; they help us store values so we can access them or reuse them later in our code. In this case, we want to be able to make changes to our element, so we assign each element to a variable, and we use the querySelector() method to reference the element id attribute.

 // function

        //add() methods
        function addMyColorGreen(){
          addColor.classList.add('green')
          console.log(addColor);
        }

        //remove() methods
        function addMyColorRed(){
          removeColor.classList.remove('default-Color')
          console.log(removeColor);
        }

        //replace() methods
        function addMyColorBlue(){
          replaceColor.classList.replace('default-Color', 'blue')
          console.log(replaceColor);
        }

        //toggle() methods
        function addMyColorOrange(){
          toggleColor.classList.toggle('orange')
          console.log(toggleColor);
        }

In JavaScript, functions allow us to perform takes or calculations that can be reused within our code. Also, we can make changes to a given element based on the values or tasks created within the function.

In this case, we created a function with the name addMyColorGreen(). Inside this function, we called the addColor variable, which we created earlier, and then assigned the classList instance property to target the class attribute of the element.

This returns a DOMTokenList, and we use the add() instance method of the DOMTokenList to add a CSS class of green from our stylesheet to the element attribute.

When done, any value associated with the CSS class upon assignment is parsed to the element.

In this case, we have a value of green parsed to the element as a background color.

Furthermore, you will have noticed that we also have a console.log() method with a value of addColor parsed right inside the function we just created. This will log the element to the console to see if the class we have assigned is parsed in as expected.


      // EventLinsterners
        addColor.addEventListener('click', addMyColorGreen);
        removeColor.addEventListener('click', addMyColorRed);
        replaceColor.addEventListener('click', addMyColorBlue);
        toggleColor.addEventListener('click', addMyColorOrange);

Writing functions are great, but they can be useless if they are not told when to behave. That is when the function should be called. In this case, we have event listeners.

Event Listeners, programmatically written as addEventListner(), is a JavaScript Event method that allows you to add an event to an element. When the event is triggered on the webpage, it takes in an event and a function you want to respond to. In this case, we assign a value to the click event. We want the function to respond when we click the object referenced on the addEventListener() method.

The object we are referencing is the addColor variable. When the element with the addColor variable is clicked on, we want the background color to change and long the element to the browser console.

Type the code above and run to see the output below, but remember to open up for dev tools (inspect).

To do this, simply right-click on the webpage and then click Inspect.

Browser Output:

From the browser output.

The first box adds a green color to the background.
The second box removes the red background and leaves it with a no-fill color with a border of black.
The third box replaces the red with a blue color.
The last box toggles between the red and orange color.

You can click the last box multiple times to see how the color changes continuously.

className

The element.className instance property sets or returns a class attribute of a given element.

The className property, like the classList, does not require a method to function; you can simply assign values to it directly.

Take the code example below.

HTML:

 <main>This is a className property</main>

We have a simple < main > tag with a display of text content. We need to parse a class attribute to the < main > tag using the className instance property.

Type and run the JavaScript below.

JavaScript:

      const getMain = document.querySelector('main');

      getMain.className = 'set-class';

      console.log(getMain)

Browser Output:

HTML:

   <main>This is a className property</main>

JS:

    const getMain = document.querySelector('main');

    getMain.className = 'set-class';

    console.log(getMain)

See the display of the newly created class attribute in the console above.

innerHTML

The element.innerHTML instance property sets or returns the HTML content of an element. This is useful when we want to parse content together with the HTML tags into the Document Object Model.

Take the code example below.

HTML:

 <main id="mainOne"></main>
      <main id="mainTwo"></main>

We have two main tags, each with an id attribute of mainOne and mainTwo, respectively.

Now, let’s see how we can make some modifications to JavaScript. Type and run the JavaScript code below.

JavaScript:

 //Variables
      const mainTag = document.querySelector('#mainOne');
      const mainTagTwo = document.querySelector('#mainTwo');

      const parseContent = '<p>This is main one</p>';
      const parseContentTwo = 'This is main Two';

      mainTag.innerHTML = parseContent;
      mainTagTwo.innerHTML = parseContentTwo;

From the JavaScript code above, parseContent is assigned a string value wrapped in HTML < p > tags, while parseContentTwo is assigned a string value with text content only.

Then we target the mainOne and mainTwo elements. Using the innerTHML property, we access the properties of both elements and then parse in parseContent and parseContentTwo.

We do this to parse the content to empty < main > tags. Now let’s take a look at how this works on the browser.

Browser Output:

HTML:

 <main id="mainOne"></main>
    <main id="mainTwo"></main>

JS:

//Variables
    const mainTag = document.querySelector('#mainOne');
    const mainTagTwo = document.querySelector('#mainTwo');

    const parseContent = '<p>This is main one</p>';
    const parseContentTwo = 'This is main Two';

    mainTag.innerHTML = parseContent;
    mainTagTwo.innerHTML = parseContentTwo;

From the browser output, we have the two content displays on the browser, but if we inspect the browser and take a look at the devtools, you will find that the parseContent variable has a < p > tag inserted inside the mainOne element while parseContentTwo variable only inserts the text content.

Also, the mainOne element displays the element parsed like mainTwo without displaying the < p >.

outerHTML

The element.outerHTML instance property sets and replaces the HTML tags and the content of a given element. This is useful when we want to parse new HTML tags to replace a given HTML tag and its content within the DOM.

Take the code example below.

HTML:

 <main id="mainOne">
        <ul>
          <li>This is a list element</li>
        </ul>
      </main>

      <main id="mainTwo">This is outerHTML</main>

From the HTML code example above, we decided to add < li > with text content and nest it inside a < ul > tag, this < ul > tag is also nested inside the < main > tag we used earlier. So what we want to do is use the outerHTML instance property to replace the two < main > tags.

Type and run the JavaScript code below.

JavaScript:

const mainTag = document.querySelector('#mainOne');
      const mainTagTwo = document.querySelector('#mainTwo');

      const parseContent = '<p>This is main one</p>';
      const parseContentTwo = 'This is main Two';

      mainTag.outerHTML = parseContent;
      mainTagTwo.outerHTML = parseContentTwo;

From the code example above, we targeted the two main tags, and we used outerHTML to replace the tags and their content.

We assign the values we want to use to parseContent and parseContentTwo, and each variable is parsed to mainOne and mainTwo, respectively, using the outerHTML instance property. Now let’s see how this renders on the browser.

Browser Output:

HTML:

<main id="mainOne">
      <ul>
        <li>This is a list element</li>
      </ul>
    </main>

    <main id="mainTwo">This is outerHTML</main>

JS:

const mainTag = document.querySelector('#mainOne');
    const mainTagTwo = document.querySelector('#mainTwo');

    const parseContent = '<p>This is main one</p>';
    const parseContentTwo = 'This is main Two';

    mainTag.outerHTML = parseContent;
    mainTagTwo.outerHTML = parseContentTwo;

As indicated by the two arrows inside the devtools, the two < main > tags have been replaced completely. The mainOne element and its descendants (< ul > and < li >) element have been replaced with just a < p > and a text content, while the mainTwo element is replaced with just text content with no given element.

Check this out: Selenium Automation Cloud: Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers.

innerText

The element.innerText instance property sets and replaces the content and descendants of a given element. This is useful when you want to parse new content into a given HTML tag.

Also, note that the innerText will only return text, so if you parse in HTML tags, it will return it as text and print it into the browser.

If the element you wish to update has a child element or descendants, it will be replaced with a text.

Take the code example below.

<h1>This is innerText</h1>

      <main id="mainOne">
         <p>Happy Coding!</p>
      </main>

      <main id="mainTwo"></main>

We have two < main > tags, a mainOne tag with a < p > tag and text content and an empty mainTwo tag. Now let’s see how we can change mainOne and mainTwo using innerText.

Type and run the JavaScript code below.

const mainOne = document.querySelector('#mainOne');
      const mainTwo = document.querySelector('#mainTwo');

      mainOne.innerText = '<em>Hello World</em>';
      mainTwo.innerText = 'Hello World';

Browser Output:

HTML:

<h1>This is innerText</h1>

    <main id="mainOne">
       <p>Happy Coding!</p>
    </main>

    <main id="mainTwo"></main>

JS:

const mainOne = document.querySelector('#mainOne');
    const mainTwo = document.querySelector('#mainTwo');

    mainOne.innerText = '<em>Hello World</em>';
    mainTwo.innerText = 'Hello World';

From the browser output, we set mainOne and mainTwo to display Hello World. The < em > tag we assigned to mainOne is supposed to make the text italic, but since we parse it through the innerText property, the text content is parsed as plain text with no italic styling effect.

And also, the < p > tag with the text of Happy Coding is completely replaced, while the mainTwo element we assigned a text of Hello World with no tags enclosing it is printed on the screen.

Another thing you have to take note of is how this affects the Document Object Model tree. From the devtool view, as you would have noticed, the < p > is completely replaced, and the mainTwo is updated with a new text.

outerText

The element.outerText instance property sets and replaces the HTML tag, its content and descendants within the Document Object Model tree. This is useful when you want to parse new content into a given HTML tag. This will replace the specified tag leaving you with only text content.

If the element you wish to update has a child element or descendants, it will be replaced with a text. So be sure you are parsing it to the last child on the element node to prevent error.

Take the code example below.

 <strong>HTML:</strong>

      <h1>This is outerText</h1>

      <main id="mainOne">
      <p>Happy Coding!</p>
      </main>

      <main id="mainTwo"></main>

Just like the previous example from innerText, here we have the same HTML code setup. Now let’s see how we can use the outerText instance property to change the Document Object Model tree.

JavaScript:

  const mainOne = document.querySelector('#mainOne');
      const mainTwo = document.querySelector('#mainTwo');

      mainOne.outerText = '<em>Hello World</em>';
      mainTwo.outerText = 'Hello World';

Browser Output:

HTML:

<h1>This is outerText</h1>

    <main id="mainOne">
    <p>Happy Coding!</p>
    </main>

    <main id="mainTwo"></main>

JS:

const mainOne = document.querySelector('#mainOne');
    const mainTwo = document.querySelector('#mainTwo');

    mainOne.outerText = '<em>Hello World</em>';
    mainTwo.outerText = 'Hello World';

From the devtool how the two < main > tags have been replaced and the effect it has on the browser output.

children

The element.children instance property returns all the child/children of a given element. The children property returns it as a live HTML collection.

Also, take note that the children instance property only returns element nodes.

Take the code example below.

HTML:

 <main class="root">
        <div id="parent">
          <div id="one">one</div>
          <div id="two">two</div>
          <div id="two">three</div>
          <div id="two">four</div>
        </div>
      </main>

JavaScript:

  const parentEl = document.querySelector('#parent');

      const returnChildren = parentEl.children;

      console.log(returnChildren)

Console Output:

HTML:


    <main class="root">
     <div id="parent">
      <div id="one">one</div>
      <div id="two">two</div>
      <div id="two">three</div>
      <div id="two">four</div>
     </div>
    </main>

JS:


    const parentEl = document.querySelector('#parent');

    const returnChildren = parentEl.children;

    console.log(returnChildren)

From the console output, the children instance property returns all the child element of the given parent as a live HTML Collection.

firstElementChild

The element.firstElementChild instance property returns only the first child of a given element If the element you wish to return has no child element, it returns a null.

Take the code example below.

HTML:

  <main class="root">
        <ul class="parent">
          <li class="child-1 siblings">element one</li>
          <li class="child-2 siblings">element two</li>
          <li class="child-3 siblings">element three</li>
          <li class="child-4 siblings">element four</li>
          <li class="child-5 siblings">element six</li>
          <li class="child-6 siblings">element seven</li>
        </ul>
      </main>

JavaScript:

const getParent = document.querySelector('.parent');

      const getChildOne = getParent.firstElementChild;
      console.log(getChildOne)

Console Output:

HTML:

<main class="root">
     <ul class="parent">
      <li class="child-1 siblings">element one</li>
      <li class="child-2 siblings">element two</li>
      <li class="child-3 siblings">element three</li>
      <li class="child-4 siblings">element four</li>
      <li class="child-5 siblings">element six</li>
      <li class="child-6 siblings">element seven</li>
     </ul>
    </main>

JS:

const getParent = document.querySelector('.parent');

    const getChildOne = getParent.firstElementChild;
    console.log(getChildOne)

From the console output, notice that we have printed the first child element.

lastElementChild

The element.lastElementChild instance property returns only the last child of a given element. If the element you wish to return has no child element, it returns a null.

Take the code example below.

HTML:

<main class="root">
        <ul class="parent">
          <li class="child-1 siblings">element one</li>
          <li class="child-2 siblings">element two</li>
          <li class="child-3 siblings">element three</li>
          <li class="child-4 siblings">element four</li>
          <li class="child-5 siblings">element six</li>
          <li class="child-6 siblings">element seven</li>
        </ul>
      </main>

JavaScript:

 const getParent = document.querySelector('.parent');

      const getChildSix = getParent.lastElementChild;


      console.log(getChildSix)

Console Output:

HTML:

<main class="root"> <ul class="parent"> <li class="child-1 siblings">element one</li> <li class="child-2 siblings">element two</li> <li class="child-3 siblings">element three</li> <li class="child-4 siblings">element four</li> <li class="child-5 siblings">element six</li> <li class="child-6 siblings">element seven</li> </ul> </main>

JS:

`
const getParent = document.querySelector('.parent');

const getChildSix = getParent.lastElementChild;


console.log(getChildSix)

From the console output, notice that we have the last child element printed out.

nextElementSibling

The element.nextElementSibling instance property returns the next element of the same sibling in the Document Object Model level of a given element. If the element you wish to return happens to be the last child element, it returns a null.

Take the code example below.

HTML:

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChildOne = getParent.firstElementChild;

  const getSiblings = getChildOne.nextElementSibling; 

  console.log(getSiblings)

Console Output:

HTML:

JS:

`
const getParent = document.querySelector('.parent');

const getChildOne = getParent.firstElementChild;

const getSiblings = getChildOne.nextElementSibling; 

console.log(getSiblings)

From the console output, notice that we have the next element sibling printed out.

previousElementSibling

The element.previousElementSibling instance property returns the previous element of the same sibling in the Document Object Model level of a given element. If the element you wish to return happens to be the first child element, it returns a null.

Take the code example below.

HTML:

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChildSix = getParent.lastElementChild;

  const getSiblings = getChildSix.previousElementSibling; 

  console.log(getSiblings)

Console Output:

HTML:

JS:

`
const getParent = document.querySelector('.parent');

const getChildSix = getParent.lastElementChild;

const getSiblings = getChildSix.previousElementSibling; 

console.log(getSiblings)

From the console output, notice that we have the previous element sibling printed out.

Check this out: Selenium online Test Automation Cloud: Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers.

Document Methods

In this section of this blog on the Document Object Model, I will try to describe some of the most useful methods available in DOM

QuerySelector

The querySelector() document method returns the first element that matches the specified CSS selector passed in within the Document Object Model tree.

Syntax:

document.querySelector(CSS selectors)

Take the simple code example below.

HTML:

querySelector using: class

  <div id="my-id">querySelector using: id</div>

  <section>querySelector using: tag Name</section>

  <input type="text" name="css-attribute" value="my input tag"/>

JavaScript:

`
//Accessing web element by class Name
const myClass = document.querySelector('.my-class');

  //Accessing web element by id Name
  const myId = document.querySelector('#myId');

  //Accessing web element with by Tag Name
  const section = document.querySelector('section');

  //Accessing web element with class attribute
  const myInput = document.querySelector('input[type]');

HTML:

querySelector using: class

<div id="my-id">querySelector using: id</div>

<section>querySelector using: tag Name</section>

<input type="text" name="css-attribute" value="my input tag"/>

JS:

`
//Accessing web element by class Name
const myClass = document.querySelector('.my-class');

//Accessing web element by id Name
const myId = document.querySelector('#myId');

//Accessing web element with by Tag Name
const section = document.querySelector('section');

//Accessing web element with class attribute
const myInput = document.querySelector('input[type]');

There are different ways to select elements using querySelector() methods. As long as the value assigned within the parenthesis is a valid way of selecting elements in CSS, the querySelector() method will return the element.

QuerySelectorAll

The querySelector() document method returns a static nodeList (Not Live) of all elements that match the specified CSS selector passed within the DOM tree.

Syntax:

document.querySelectorAll(CSS selectors)

Take the simple code example below.

HTML:

querySelector using: class

  <div id="my-id">querySelector using: id</div>

  <section>querySelector using: tag Name</section>

  <input type="text" name="css-attribute" value="my input tag"/>

JavaScript:

`
//Accessing all web element with just one method
const selectAll = document.querySelectorAll('.my-class, #my-id, section, input[type]');

  console.log(selectAll)

Console Output:

HTML:

querySelector using: class

<div id="my-id">querySelector using: id</div>

<section>querySelector using: tag Name</section>

<input type="text" name="css-attribute" value="my input tag"/>

JS:

`
//Accessing all web element with just one method
const selectAll = document.querySelectorAll('.my-class, #my-id, section, input[type]');

console.log(selectAll)

From the console output, notice how all the elements we selected are all listed out as a NodeList.

getElementById

The document.getElementById() returns an element object with a unique id attribute of a given element from the Document Object Model tree.

Syntax:

document.getElementById(“idAtrribute”)

Take the simple code example below.

HTML:

<div id=”myId”>qetElementByID using: Id</div>

JavaScript:

`
//Accessing web element with an ID attribute
const myId = document.getElementById('myId');

  console.log(myId)

Console Output:

HTML:

<div id="myId">qetElementByID using: Id</div>

JS:

`
//Accessing web element with an ID attribute
const myId = document.getElementById('myId');

console.log(myId)

Notice how the getElementById method is used to return the specified element.

getElementsByTagName

The document.getElementsByTagName() returns an HTML Collection object with a specific tag name from the Document Object Model tree.

Syntax:

document.getElementsByTagName(“h1”)

HTML:

<main> <div>qetElementByTagName using: Tag Name</div> <div>qetElementByTagName using: Tag Name</div> <div>qetElementByTagName using: Tag Name</div> <div>qetElementByTagName using: Tag Name</div> </main>

JavaScript:

`
//Accessing web element by it tag name
const myTagNames = document.getElementsByTagName('div');

  console.log(myTagNames)

Console Output:

HTML:

JS:

`
//Accessing web element by it tag name
const myTagNames = document.getElementsByTagName('div');

console.log(myTagNames)

Notice how the getElementsByTagName method is used to return an HTML Collection object.

Check this out: Playwright automated testing Tutorial: Getting Started With Playwright Framework

getElementsByClassName

The document.getElementsByClassName() returns a collection of array-like objects with a specific class name from the Document Object Model tree.

Syntax:

document.getElementsByNameClass(“class-name”)

HTML:

<main> <div class="one">qetElementsByTagName using: Class Name</div> <div class="one">qetElementsByTagName using: Class Name</div> <div class="one">qetElementsByTagName using: Class Name</div> <div class="one">qetElementsByTagName using: Class Name</div> </main>

JavaScript:

`
//Accessing web element by it class name
const myClassName = document.getElementsByClassName('one');

  console.log(myClassName)

Console Output:

HTML:

`

qetElementsByTagName using: Class Name
qetElementsByTagName using: Class Name
qetElementsByTagName using: Class Name
qetElementsByTagName using: Class Name

JS:

`
//Accessing web element by it class name
const myClassName = document.getElementsByClassName('one');

console.log(myClassName)

Notice how the getElementsByClassName method is used to return an HTML collection of array-like objects.

createElement

The document.createElement() creates a new HtmlElement referenced by the value passed in. The value is passed as a string in lowercase later in between double or single quote and a valid tag name should be used.

Syntax:

document.createElement(“div”)

JavaScript:

`
//Creating a new element using createElement methods
const newEl = document.createElement('p');

  newEl.innerText = 'This is a new paragraph';

  console.log(newEl);

Console Output:

JS:

`
//Creating a new element using createElement methods
const newEl = document.createElement('p');

newEl.innerText = 'This is a new paragraph';

console.log(newEl);

In the code sample above, we created a new element and parsed in a string of text.

Check this out: Cross Browser Testing Cloud - Browser & app testing cloud to perform both exploratory and automated testing web across 3000+ different browsers, real devices and operating systems.

Append

The element.append() is used to add a new element or text content to the last child of an element child. If you append an element/text to a parent tag, the element or text you appended is added to the last child of that element.

Take note that the append() method differs from the appendChild() of the nodeList method. While the append() method allows you to append multiple elements at once, the appendChild() can only append one. With the append() method, a text node can be appended, while appendChild() only appends an Element node.

Syntax:

`
// you can pass in single value
element.append("Element")
//you can pass in multiple values
element.append("string", "string")

HTML:

`

one
two

From the HTML code sample we have a < div > tag with an id of parent. Inside this < div > tag, we have two more nested < div > tags with the text content of one and two, respectively. We will add two more < div > tags to the children element.

Type and run the JavaScript below.

JavaScript:

`
const parentEl = document.querySelector('#parent');

  const newEl = document.createElement('div');
  const newElTwo = document.createElement('div');

  parentEl.append(newEl, newElTwo);
  newEl.append('This is a div tag')

Console Output:

HTML:

`

one
two

JS:

`
const parentEl = document.querySelector('#parent');

const newEl = document.createElement('div');
const newElTwo = document.createElement('div');

parentEl.append(newEl, newElTwo);
newEl.append('This is a div tag')

Now, we have two new elements in the Document Object Model.

After

The element.after() is used to add a new element or text after a specified element within the Document Object Model tree.

Syntax:

`
// you can pass in single value
element.after("Element")
//you can pass in multiple values
element.after("string", "string")

`
HTML:

<main class="root"> <div id="parent"> <div id="one">one</div> <div id="two">two</div> </div> </main>

JavaScript:

`
const parentEl = document.querySelector('#parent');
const one = document.querySelector('#one')

  const newEl = document.createElement('div');
  const newElTwo = document.createElement('div');

  parentEl.append(newEl);
  newEl.append('This is a div tag')

  one.after(newElTwo);
  newElTwo.innerText = 'This is an after() method';

Console Output:

HTML:

<main class="root"> <div id="parent"> <div id="one">one</div> <div id="two">two</div> </div> </main>

JS:

`
const parentEl = document.querySelector('#parent');
const one = document.querySelector('#one')

const newEl = document.createElement('div');
const newElTwo = document.createElement('div');

parentEl.append(newEl);
newEl.append('This is a div tag')

one.after(newElTwo);
newElTwo.innerText = 'This is an after() method';

`
We used the after() method to insert the newly created < div > tag to come directly after the first element.

Before

The element.before() is used to add a new element or text before a specified element within the Document Object Model tree. The before() do the direct opposite of what after() does.

Syntax:

`
// you can pass in single value
element.before("Element")
//you can pass in multiple values
element.beforer("string", "string")

HTML:

<main class="root"> <div id="parent"> <div id="one">one</div> <div id="two">two</div> </div> </main>

JavaScript:

`
const parentEl = document.querySelector('#parent');
const one = document.querySelector('#one')

  const newEl = document.createElement('div');
  const newElTwo = document.createElement('div');

  parentEl.append(newEl);
  newEl.append('This is a div tag')

  one.before(newElTwo);
  newElTwo.innerText = 'This is an before() method';

Console Output:

HTML:

`

one
two

JS:

`
const parentEl = document.querySelector('#parent');
const one = document.querySelector('#one')

const newEl = document.createElement('div');
const newElTwo = document.createElement('div');

parentEl.append(newEl);
newEl.append('This is a div tag')

one.before(newElTwo);
newElTwo.innerText = 'This is an before() method';

The example here is the same as the previous example for after(). We just replaced the after() with the before(). Now notice how the < div > element moves as the element’s first child.

Check this out: How To Test Internet Explorer on Mac

Remove

The element.remove() removes the specified element from the Document Object Model. When using the method, you don’t have to assign a value to the parentheses.

Syntax:

element.remove()

Take the following example below.

HTML:

<main> <div id="one">This Remove Element method one</div> <div id="two">This Remove Element method two</div> <div id="three">This Remove Element method three</div> </main>

From the HTML example above, we have three < div > tags, we are going to remove the second < div > tag with an id of two. Now type and run the JavaScript code below.

JavaScript:

`
const removeEl = document.querySelector("#two");

  const myEl = removeEl.remove();

Browser Output:

HTML:

`

This Remove Element method one
This Remove Element method two
This Remove Element method three

JS:

`
const removeEl = document.querySelector("#two");

const myEl = removeEl.remove();

From the output, notice we now have just two < div > tags left out of the three we created.

setAttribute

The element.setAttribute() sets the attribute of a given element in the Document Object Model tree. The attribute is updated if the given attributes already exist in the element.

Note: When using the set attribute method, the first value takes in the name of the attributes. This might be an id, class, type, or name and then followed by the value you want the attribute to have.

Syntax:

element.setAttribute(name, value)

Take the following example below:

HTML:

<main>This is set Attribute Method</main>

The HTML displays just a set text, with a main tag. Now type and run the JavaScript code given below.

JavaScript:

`
const myAttribute = document.querySelector("main");

  myAttribute.setAttribute("id", "my-text");

  console.log(myAttribute);

Browser Output:

HTML:

<main>This is set Attribute Method</main>

JS:

`
const myAttribute = document.querySelector("main");

myAttribute.setAttribute("id", "my-text");

console.log(myAttribute);

Notice the output indicated by the arrow.

getAttribute

The element.getAttribute() returns the attribute of a given element in the Document Object Model tree. If the given attribute does not exist in the element, the attribute returns null.

**Note *: *When using the get attribute method, you should only reference the name of the attribute you want to get. Also, remember that you can only get one attribute from the given element.

Syntax:

element.getAttribute(name)

Take the following example below.

HTML:

<main id=”my-text”>This is get Attribute Method</main>

We are going to get the id attribute we set earlier. Type and run the JavaScript code given below.

JavaScript:

`
const myAttribute = document.querySelector("main");

  const myAttr = myAttribute.getAttribute("id");

  console.log(myAttr);

Browser Output:

HTML:

`
This is get Attribute Method

JS:

`
const myAttribute = document.querySelector("main");

const myAttr = myAttribute.getAttribute("id");

console.log(myAttr);

Notice from the arrow the return name of the id attribute value.

getAttributeNames

The element.getAttributeNames() returns the attribute as an array-like string. If the given element does not have an attribute in the element, it returns an empty array.

Note: When using the get attribute method, you don’t have to reference the name of the attributes you want to get.

Syntax:

element.getAttributeNames()

Take the following example below.

HTML:

`
This is get Attribute Names Method

We are going to get the name of the given attributes name specified in the element. Type and run the JavaScript below.

JavaScript:

`
const myAttribute = document.querySelector("main");

  const myAttr = myAttribute.getAttributeNames();

  console.log(myAttr);

Browser Output:

HTML:

<main id="my-text" class="get" name="attribute">This is get Attribute Names Method</main>

JS:

`
const myAttribute = document.querySelector("main");

const myAttr = myAttribute.getAttributeNames();

console.log(myAttr);

Notice from the arrow the returned attributes as an array.

hasAttribute

The element.hasAttribute() returns a boolean value of true if the attribute exists. If the given attribute does not exist in the element, false is returned.

Note: When using the has attribute method, you should only reference the name of the attribute you want to check. Also, remember that you can only get one attribute from the given element.

Syntax:

element.hasAttribute(name)

Take the following example below:

HTML:

<main id=”my-text”>This is has Attribute Method</main>

JavaScript:

`
const myAttribute = document.querySelector("main");

  const myAttr = myAttribute.hasAttribute("id");

  console.log(myAttr);

Browser Output:

HTML:

<main id="my-text">This is has Attribute Method</main>

JS:

`
const myAttribute = document.querySelector("main");

const myAttr = myAttribute.hasAttribute("id");

console.log(myAttr);

See the true value indicated by the arrow.

removeAttribute

The element.removeAttribute() removes the attribute of a given element in the DOM tree. If the given attribute does not exist in the element, nothing is returned.

Note: When using the remove attribute method, you should only reference the name of the attribute you want to remove. Also, remember that you can only remove one attribute from the given element.

Syntax:

element.removeAttribute(name)

Take the following example below:

HTML:

<main id=”my-text”>This is remove Attribute Method</main>

We are going to remove the id attribute we set earlier. Type and run the JavaScript code given below.

`
const myAttribute = document.querySelector("main");

  myAttribute.removeAttribute("id");

  console.log(myAttribute);

Browser Output:

HTML:

<main id="my-text">This is remove Attribute Method</main>

JS:

`
const myAttribute = document.querySelector("main");

myAttribute.removeAttribute("id");

console.log(myAttribute);

See from the arrow that we no longer have an attribute on the element.

Check this out: Cypress Testing Online- Execute & analyse Cypress test scripts online. Deploy quality builds faster with 40+ browser versions on cloud.

Node Instance Properties

Listed below are some node instance properties we can use to access, add or remove element nodes from the DOM tree.

childnodes

The node.childnodes property of the node interface returns a node list of child elements, of a specific element from the DOM tree. This includes elements, texts and comments.

Syntax:

document.body.childNodes

HTML:

From this HTML code above, notice we have 6 < li > elements listed out.

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.childNodes;
  console.log(getChild)

Console Output:

HTML:

element one
element two
element three
element four
element six
element seven

JS:

`
const getParent = document.querySelector('.parent');

const getChild = getParent.childNodes;
console.log(getChild

From the console output, the childNodes instance property returns 12 items with a length of 13. As stated earlier, the childNodes instance property returns the given child elements and the texts and comments.

firstChild

The node.firstChild property of the node interface returns the first child of a specific element from the Document Object Model tree and returns a null object when the element has no child.

Syntax:

`
document.body.firstChild

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.firstChild;
  console.log(getChild)

From this code example above and using the same HTML code template we used earlier, we try getting the firstChild node.

Console Output:

From the console output, we got a text node as the first child node. This is because the firstChild is a node instance property and not an element. What this means is the firstChild node returns elements, text, or comment. In this case, the firstChild node is a text.

If what you want to return is the first element instead of a node, try using the firstElementChild property. The firstElementChild property has been covered above.

lastChild

The node.lastChild property of the node interface returns the last child of a specific element from the DOM tree and returns a null object when the element has no child.

Syntax:

document.body.lastChild

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.lastChild;
  console.log(getChild)

Console Output:

HTML:

element one
element two
element three
element four
element six
element seven

JS:

`
const getParent = document.querySelector('.parent');

const getChild = getParent.lastChild;
console.log(getChild)

From the console output, we got a text node as the last child node.

Next Sibling

The node.nextSibling property of the node interface returns the next sibling of a specific element of the same level on the DOM tree and returns null if the element happens to be the last child.

Syntax:

document.body.nextSibling

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.firstChild;

  const nextChild = getChild.nextSibling;

  console.log(nextChild)

Console Output:

HTML:

JS:

`
const getParent = document.querySelector('.parent');

const getChild = getParent.firstChild;

const nextChild = getChild.nextSibling;

console.log(nextChild)

From the console output, we got the first element as the next sibling. This is because, after the text node, the child element comes next.

previousSibling

The node.previousSibling property of the node interface returns the previous sibling of a specific element of the same level on the Document Object Model tree. It returns null if the element happens to be the first child.

Syntax:

document.body.previousSibling

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.lastChild;

  const previousChild = getChild.previousSibling;

  console.log(previousChild)

Console Output:

HTML:

JS:

`
const getParent = document.querySelector('.parent');

const getChild = getParent.lastChild;

const previousChild = getChild.previousSibling;

console.log(previousChild)

From the console output, we got the last element as the previous sibling.

Parent Node

The node.parentNode property of the node interface returns the parent element on the Document Object Model tree.

Syntax:

document.body.parentNode

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.firstChild;

  const returnParent = getChild.parentNode;

  console.log(returnParent)

Console Output:

HTML:

JS:

`
const getParent = document.querySelector('.parent');

const getChild = getParent.firstChild;

const returnParent = getChild.parentNode;

console.log(returnParent)

From the console output. We used the first child element to return the parent element.

textContent

The node.textContent property of the node interface returns or sets the text content of a given element on the Document Object Model tree.

Syntax:

document.element.textContent

JavaScript:

`
const getParent = document.querySelector('.parent');

  const getChild = getParent.firstChild;

  const returnParent = getChild.parentNode;

  console.log(returnParent.textContent)

Console Output:

HTML:

JS:

`
const getParent = document.querySelector('.parent');

const getChild = getParent.firstChild;

const returnParent = getChild.parentNode;

console.log(returnParent.textContent)

Check this out: Cypress test Automation Tutorial: E2E Testing with Cypress

Node Instance Methods

Node instance methods are functions that can be called on an instance of a Node.js class or object. These methods have access to the properties and methods of the class or object and can perform actions or manipulate data associated with the instance.

AppendChild

The node.appendChild() method of the node interface adds a child element to a given parent Node in the Document Object Model tree.

Syntax:

`
document.element.appendChild(childElement)

Take the code sample below.

HTML:

element one
element two

JavaScript:

`
//The parent element
const getParent = document.querySelector('.parent');

  //The create a new Paragraph
  const newLi = document.createElement('li');

  const insertChild = getParent.appendChild(newLi);
  insertChild.innerText = 'New list Element';

  console.log(insertChild)

Console Output:

HTML:

<main class="root"> <ul class="parent"> <li class="child-1 siblings">element one</li> <li class="child-2 siblings">element two</li> </ul> </main>

JS:

`
//The parent element
const getParent = document.querySelector('.parent');

//The create a new Paragraph
const newLi = document.createElement('li');

const insertChild = getParent.appendChild(newLi);
insertChild.innerText = 'New list Element';

console.log(insertChild)

From the console output, we now have three list items instead of the two we have.

RemoveChild

The node.removeChild() method of the node interface removes a child element of a given parent Node in the Document Object Model tree.

Syntax:

document.element.removeChild(childElement)

JavaScript:

`
//The parent element
const getParent = document.querySelector('.parent');
const childOne = document.querySelector('li[class]');

  const firstEl = getParent.removeChild(childOne);

  console.log(firstEl)

Console Output:

HTML:

<main class="root"> <ul class="parent"> <li class="child-1 siblings">element one</li> <li class="child-2 siblings">element two</li> </ul> </main>

JS:

`
//The parent element
const getParent = document.querySelector('.parent');
const childOne = document.querySelector('li[class]');

const firstEl = getParent.removeChild(childOne);

console.log(firstEl)

From the console output, we now have one element after the first element was removed.

replaceChild

The node.replaceChild() method of the node interface replaces a child element with a new child element of a given parent Node in the Document Object Model tree.

**Note: **the replaceChild method takes in the new child element first and then the old child element you want to replace.

Syntax:

document.element.replaceChild(newElement, oldElement)

HTML:

<main class="root"> <ul class="parent"> <li class="child-2 siblings">element two</li> </ul> </main>

JavaScript:

`
/The parent element
const getParent = document.querySelector('.parent');

  //List Element we want to replace
  const listEl = document.querySelector('li[class]');

  //create new div element
  const div = document.createElement('div');

  //Replace the list with div element
  const replaceList = getParent.replaceChild(div, listEl);

Console Output:

HTML:

<main class="root"> <ul class="parent"> <li class="child-2 siblings">element two</li> </ul> </main>

JS:

`
//The parent element
const getParent = document.querySelector('.parent');

//List Element we want to replace
const listEl = document.querySelector('li[class]');

//create new div element
const div = document.createElement('div');

//Replace the list with div element
const replaceList = getParent.replaceChild(div, listEl);

As indicated by the arrow, notice how the list element has been replaced with a div tag.

InsertBefore

The node.insertBefore() method of the node interface inserts a child element before the specified element of a given parent Node in the Document Object Model tree.

Syntax:

document.element.insertBefore(newElement, specifiedElement)

HTML:

element one
element two
element three

`
JavaScript:

`
//The parent element
const getParent = document.querySelector('.parent');

  //the List element we want to insert element before it
  const listEl = document.querySelector('.childTwo');

  //create new div element
  const div = document.createElement('div');

  //insert div element before list two element 
  const placeDiv = getParent.insertBefore(div, listEl);

Console Output:

HTML:

<main class="root"> <ul class="parent"> <li class="childOne siblings">element one</li> <li class="childTwo siblings">element two</li> <li class="childThree siblings">element three</li> </ul> </main>

JS:

`
//The parent element
const getParent = document.querySelector('.parent');

//the List element we want to insert element before it
const listEl = document.querySelector('.childTwo');

//create new div element
const div = document.createElement('div');

//insert div element before list two element 
const placeDiv = getParent.insertBefore(div, listEl);

From the console output, notice how the new div element we created was inserted before element two targeted.

hasChildNodes

The node*.hasChildNodes()* method of the node interface returns a boolean value of true if the specified element has a child but returns false if the child is not present in the Document Object Model tree.

Note: white-space is also treated as a text node (empty string)

Syntax:

document.element.hasChildNodes()

HTML:

element one
element two
element three

`
JavaScript:

`
//The parent element
const getParent = document.querySelector('.parent');

  //Check if the parent element has a child node.
  const checkNode = getParent.hasChildNodes();

  console.log(checkNode)

Console Output:

HTML:

element one
element two
element three

JS:

`
//The parent element
const getParent = document.querySelector('.parent');

//Check if the parent element has a child node.
const checkNode = getParent.hasChildNodes();

console.log(checkNode)

From the console out, we have true printed out. This is because the parent has child nodes (Elements).

Check this out: Appium automation Tutorial: A Detailed Guide To Appium Testing

Difference between DOM Node and Element

The term Document Object Model or DOM node and Element node can be quite confusing, so we must iterate this point for clarity. But first, let’s better understand what Node and Elements are.

The Node

The node refers to an interface that serves as a base for other Web API objects in the Document object model (DOM).

Example of Node in the DOM:

Below is an HTML document. HTML documents are represented as Nodes and objects. This node allows developers to manipulate the web page using node properties and methods.

HTML DOCUMENTS:

`
<!DOCTYPE html>

This is an HTML document

HOME
SERVICES
ABOUT

          <!-- This is the page section -->
          <section>
              <h1>The Document Object Model</h1>
  <p>The DOM gives web developers the flexibility to be able to manipulate, style and structure element nodes</p>
          </section>

          <!-- This is the page button -->
          <button>This is a Button</button>
      </main>

  <!-- This is the page footer -->
      <footer>This is a footer</footer>
  </body>
  </html>

From the above HTML document, the nodes refer to the following:

HTML tags
The text content with the HTML tags
The HTML comment
The Doctype declaration
The HTML attributes, etc.
White space (taps, spaces, line-breaks)

All these are referred to individually as nodes. So it’s valid to say the attribute node. To refer to only the attribute of the element or comment node to refer to the comments on the page only.

The instance property and instance methods are objects in JavaScript for manipulating and updating the nodes in the Document Object Model. This can either be comments, text, white spaces, or elements.

White Spaces

It’s important to note that whitespaces are nodes, which are taps, space, and line breaks. These White spaces are usually treated as text, and white spaces between two words are treated as a single character, while white spaces before and after the opening and closing tags are ignored. This helps to structure HTML content when it loads by the browser properly.

Try this code below.

HTML:

    <h1>    This   is text    

       contains    white    spaces

    </h1>

  </main>

The HTML code above contains white spaces, which are created with space-tap, taps, and line breaks.

Browser Output:

HTML:

  <h1>    This   is text    

     contains    white    spaces

  </h1>

</main>

From the browser output, notice how each word is laid out without taps. Based on how the text is formatted and laid out in the Text Editor, the browser removes these extra white spaces and lays out the content in a single line. To add or remove white space is done using CSS.

Check this out: Black Box Testing Tutorial: A Comprehensive Guide With Examples and Best Practices

Element Nodes

The element node refers to the HTML tags. Examples of the element nodes are < p >, < div >, < main >, < h1 > etc. The element node has nothing to do with the text inside it, white spaces, or attributes. These are just separate nodes that can be attached to the element nodes. The element instance properties and methods are built-in objects that allow developers to manipulate the element nodes.

It’s important to note that the node instance properties and methods differ from the element instance properties and methods. The node instance properties and methods allow access to all node objects, which includes white space, comments, elements, attributes, etc., while element instance properties and methods only allow access to the element node. So this should not be used interchangeably.

Comment Nodes

The comment nodes are special kinds of nodes. It helps to explain what a particular section of your code is meant to do or is designed to do. Although comments can be accessed or created in a JavaScript environment, you are not necessarily going to be manipulating the comment node with JavaScript since they are not displayed by the browser.

Here is an example of a comment in HTML.

          <!-- This is a comment node -->

      <!-- 
        # You can also write
        # a comment in 
        # This manner
       -->

Note the comments mentioned here are HTML comments, not JavaScript.

Check this out: System Testing Tutorial: A Comprehensive Guide With Examples and Best Practices

Difference between HTML Collections and a Node List

If you have read this far, you will have come across where we talked about some elements returning a live HTMLCollection or NodeList. We will break it down so that when you come across these terms next, you will know exactly what you are working with.

HTML Collection

This is a group of element nodes (array-like objects). We get an HTMLCollection when we use instance properties such as children and instance methods such as getElementsbyTagName() and getElementsByClassName(). An HTML collection is said to be live. This is because it auto-updates when a new element is parsed into the existing element.

An HTMLCollectiont returns only the given elements of the specified elements.

We have already covered how HTMLCollection works using the children, getElementsbyTagName(), and getElementsByClassName() properties and methods above.

Node List

NodeList are node objects. We get a NodeList when we use instance properties such as childNodes and instance methods such as getElementsbyName() and querySelectorAll(). A NodeList is said to be static. This is because it does not auto-update when a new element is parsed into the existing element.

A NodeList returns all the nodes of the given elements.

We have already covered how HTMLCollection works using the childNodes, getElementsbyName() and querySelectorAll() properties and methods above.

Shadow DOM and Virtual DOM

We have discussed the Document Object Model and its use cases, and another component of the DOM we have to discuss is the Shadow DOM and Virtual DOM.

**Check this out: Manual Testing Tutorial: A Comprehensive Guide, with Examples & Best Practices **

What is Shadow DOM?

Shadow DOM refers to a separate Document Object Model tree of elements that can be append() into the main Document Object Model tree, but it’s not part of the main Document Object Model tree. However, when parsed by the browser, it behaves like it’s part of the main Document Object Model.

The shadow DOM gives us the flexibility to be able to work with another tree-like Document Object Model without making any changes to the main Document Object Model structure but using the shadow Document Object Model to add functionality to the page.

However, since Shadow DOM is a very new feature, browsers have implemented Shadow DOM in different ways and with different limitations. For example, some browsers allow you to use JavaScript in Shadow DOM by default, others don’t; some allow you to set up event handlers in Shadow DOM by default, and others don’t. This means that we still need to test our work across browsers.

Cloud-based cross browser testing platform like LambdaTest lets you perform both exploratory and automation testing of Shadow DOM on an online browser farm of 3000+ real browsers and operating systems combinations. You can further accelerate your testing cycles by running cross browser tests in parallel and reducing test execution time by multiple folds.

Check this out: UI Testing Tutorial: A Comprehensive Guide With Examples and Best Practices

Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium testing, Cypress testing, and more.

What is Virtual DOM?

Virtual DOM, on the other hand, is a concept mainly found in JavaScript frameworks such as React.js and Vue.js.

This is a direct representation or copy of the main Document Object Model into a memory called a Virtual DOM. This Virtual DOM has the same tree-like structure as the main Document Object Model. So anytime a change is made to the JSX or (JS) file, an update is made to the Virtual DOM.

In turn, the Virtual DOM refers to the part of the Document Object Model, where the changes were made and then provides necessary changes to the main Document Object Model.

This helps reduce the load time it would take if the changes were made directly to the main Document Object Model.

Check this out: Agile Testing Tutorial: A Comprehensive Guide With Examples and Best Practices

Differences between Shadow DOM and Virtual DOM

Shadow DOM and Virtual DOM are very different. Shadow DOM is a web component API and exists in major browsers locally. While Virtual DOM is an implementation by JavaScript frameworks like react.js and vue.js.

Conclusion

We just covered a complete guide to Document Object Model (DOM). And we covered the following.

What is the Document Object Model (DOM),
The DOM structure and DOM tree,
Accessing the DOM interface
Document instance properties and methods
Node instance properties and methods
Difference between DOM Node and Element
HTMLCollection and NodeList
What is Shadow and Virtual DOM

Alright! We’ve come to the end of this blog on Document Object Model.

Thanks for taking your time to read this article to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter, and other social media @ocxigin.

Cheers

A Beginner’s Guide To Styling CSS Forms

Alex Anie — Mon, 19 Dec 2022 14:15:54 +0000

To put in a simple term, an HTML or web forms are mostly referred to as web elements that are designed to enable users to put in their information, which may include their names, age, gender, or credit card number, etc., which is then sent to a server for processing.

Web forms are very useful and are now a very important aspect of web development. Imagine having to travel to a foreign country just to fill out a form because you want to apply for a course in their university.

Since every modern university has a website with a form, students can sit in the comfort of their homes and apply within their convenient time, saving them the time to visit the school in person. Then the school collects this information to decide if the candidate is qualified to study at their university.

Web forms are not limited to schools only, businesses such as Banks, E-Commerce, to mention a few, use web forms to collect information from their customers. This helps them decide how to serve the needs of their customers better.

This is exactly what web forms are designed to do — to collect information for processing.

In this tutorial on CSS Forms, we will take a closer look at how to style forms with CSS and much more.

Prerequisites for styling CSS Forms

By the end of this tutorial on CSS Forms, you would be in a position to build a form in HTML that is styled using CSS. However, a basic knowledge of HTML and CSS is required to understand this blog on CSS Forms better.

Here is a sample of the finished project of what we’ll be building.

Here is the link to CodePen for this styling CSS Form project’s source code.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to style forms with CSS: A beginner’s guide</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="site__container">
    <main class="hero__images">
      <main class="card__wrapper">
        <!-- background for the form -->
        <section class="card__forms">

          <!-- Wrapper for all items of the box -->
          <section class="items__wrapper">

            <div class="site__logo">MS</div>
            <div class="sign__caption">
              <p>Signin for home delivery service</p>
            </div>

            <div class="user_id">
              <!-- user id options for username and password -->
              <input type="text" name="Username" placeholder="Username">
              <input type="password" name="Password" placeholder="Password">
            </div>

            <div class="checkbox__wrapper">
              <!-- Input filed for checkbox and forget password -->
              <input type="checkbox" name="checkbox">
              <label for="checkbox">stay signed in</label> 
              <a href="#">Forget Password?</a>
            </div>

            <div class="btn__wrapper">
              <!-- Sign in button -->
              <button class="btn__signin">sign in</button>
            </div>

            <div class="signup__option">
              <!-- Sign up opption for new users -->
              <p>Don't have an accout yet? <a href="#">Sign Up!</a></p>
            </div>
          </section>
        </section>
      </main>
    </main>
  </div>
</body>
</html>

CSS:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.site__container {
    width: 100vw;
    height: 100vh;
}

.hero__images {
    height: 100%;
    /* background-image: url("Screenshot\ \(209\).png"); */
    background-image: url("https://i.postimg.cc/NfX1S37K/delivery-man.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: aqua; */
}

.card__wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card__forms {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 400px;
    background-color: rgb(1, 32, 32, 0.4);
    border-radius: 0.5rem;
    box-shadow: 3.5px 3.5px 4px 2px rgba(0, 0, 0, 0.3);
    /* border: 1px solid rgb(89, 250, 156); */
    border-top: 2px solid rgb(89, 250, 156);
    border-bottom: 2px solid rgb(89, 250, 156);
}

.site__logo {
    width: 40px;
    padding: 4px;
    margin: 2.0rem 5rem;
    text-align: center;
    border-radius: 4px;
    font-size: x-large;
    font-weight: bolder;
    font-family: 'Trebuchet MS', sans-serif;
    background-color: rgb(89, 250, 156);
    color: rgb(1, 32, 32);
    border-radius: 50%;
    cursor: default;
}

.sign__caption p {
    color: white;
    font-family: calibri;
    font-style: italic;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

.user_id input {
    width: 100%;
    display: block;
    outline: none;
    border: 0;
    padding: 1rem;
    border-radius: 20px;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.user_id input::placeholder{
    color: rgb(1, 32, 32);
}

.user_id input:active {
    outline: 2px solid rgb(89, 250, 156);
}


.checkbox__wrapper label {
        color: white;
        font-family: calibri;
        text-transform: lowercase;
}

.checkbox__wrapper a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.checkbox__wrapper a:hover {
        color: rgb(255, 255, 255);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: normal;
}

.btn__wrapper button {
    width: 100%;
    border: none;
    padding: 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.btn__wrapper button:hover {
    background-color: rgb(89, 250, 156); 
    color: white;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.signup__option p {
    color: white;
        font-family: calibri;
        text-transform: lowercase;
}
.signup__option a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.signup__option a:hover {
    color: rgb(255, 255, 255);
    font-family: calibri;
    text-transform: lowercase;
    text-decoration: none;
    font-style: normal;
}

Creating the HTML boilerplates

Let’s start by creating the website boilerplates (that is, the HTML code structure for the website). This contains the head and body tags, as seen below.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>How to style forms with CSS: A beginner's guide</title>
      <link rel="stylesheet" href="main.css">
</head>
<body>

</body>
</html>

After creating our HTML boilerplate, now save it as an index.html file, am using VS Code but you can use any IDE of your choice.

Hey here’s a quick free tool called rem-to-px-converter & px-to-rem-converter that will help you convert CSS unit REM values & pixels.

Creating the necessary HTML tags

Now, let’s create the necessary HTML tags for our styling CSS Forms project.

class="site__container">
  <main class="hero__images">
 <main class="card__wrapper">
 <!-- background for the form -->
     <section class="card__forms">

     <!-- Wrapper for all items of the box -->
    <section class="items__wrapper">

   <div class="site__logo">MS</div>
    <div class="sign__caption">
    <p>Signin for home delivery service</p>
    </div>

    <div class="user_id">
   <!-- user id options for username and password -->
      <input type="text" name="Username" placeholder="Username">
      <input type="password" name="Password" placeholder="Password">
   </div>

   <div class="checkbox__wrapper">
   <!-- Input field for checkbox and forget password -->
     <input type="checkbox" name="checkbox">
     <label for="checkbox">stay signed in</label> 
     <a href="#">Forget Password?</a>
   </div>

   <div class="btn__wrapper">
   <!-- Sign in button -->
    <button class="btn__signin">sign in</button>
   </div>

   <div class="signup__option">
   <!-- Sign up option for new users -->
   <p>Don't have an account yet? 
                    <a href="#">Sign Up!</a></p>
                  </div>
           </section>
     </section>
      </main>
        </main>
      </div>
</body>

From the code sample above, let’s look at what each tag is supposed to do based on the class names assigned to them.

site__container: This class is assigned to a div tag that wraps around every other tag within our HTML tags.
hero__images: This class is assigned to the main tag. This tag is where our hero image will be assigned using CSS.
card__wrapper: This class is assigned to another main tag nested inside the hero__image tag. This tag wraps around all tags that make up our web form.
card__forms: This class is assigned to the section tag, which is the main tag for our web form
Items__wrapper: This tag wraps around the div, input, button, and link tags which are items within the web form.
site__logo: This is the site logo.
sign__caption: This tag helps to inform the user why they should sign up/sign in using the web form.
user_id: This wraps around the input tag where the user has to enter their username and password.
checkbox__wrapper: This wraps around the input, a (anchor), and **labels **tag. Here we ask the user if they would like their user id to be saved so that they don’t have to retype them later when they visit the site by clicking the checkbox. We also ask if they have a forgotten password that needs to be recovered.
btn__wrapper: This wraps around the main button of the form. This is the button the user clicks on that helps them sign in to the site.
signup__option: This tag wraps around the paragraph tag and a link tag. Here we provide an option for new users who don’t have an account to signup.

Now that we have the HTML boilerplate setup, save it and run it on your favorite browser. The code in this CSS Forms tutorial is run using Google Chrome.

Brower Output:

Your code should look like this. You will notice how plain and simple the website is from our browser output. This is because we have not added the CSS yet. In the next section of this tutorial on CSS Forms, we’ll talk about this.

Check this out: Online Automation Testing Platform- Accelerate your release velocity with blazing fast test automation on cloud

How to style common form elements with CSS?

Form elements are some of the most common elements on a website. Every site must have these elements, from login forms to search boxes and buttons, to be functional. These elements are sometimes overlooked in design and styling, which may cause them to blend into each other, making your site’s UI look dull. A good way to avoid this is by using CSS to change the appearance of form elements such as text fields and buttons.

Here’s how you can style common CSS Form elements:

In your Visual Studio Code, create a new file and name it main.css. This is going to be the CSS file. Notice from our HTML file that in the head tag, we have a link tag that points to main.css. This link tag helps us link together both the HTML and CSS files. Any changes to the HTML will affect the CSS file & vice versa.

2- Let’s add the relevant CSS code in main.css so that we can style the boring page that we earlier created using HTML.

3- Your editor should open as thus. Now let’s write some CSS.

Check this out: Test On
Android Emulator- Test your web and mobile apps on Android Emulators online.

Appling universal selector

Universal selector is a CSS concept that lets you define styles once and reuse them across the entire website. It means that you need to define only that “one thing” once, and then you can use it on other pages. This saves us a lot of time and makes the code more maintainable.

Type and run the code below for your CSS Forms project:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Browser Output:

From the CSS code above, we use a CSS universal selector to target all the elements on the webpage. We added a padding 0px, margin 0px and box-sizing of the border-box. This helps to remove all the white spaces on the webpage so that we don’t have unnecessary white spaces interfering when styling CSS Forms.

Applying viewport width (vw) and viewport height (vh)

Applying viewport width (vw) and viewport height (vh) are new properties available in CSS3 and have quite a few uses. By default, the vw unit is equal to 1% of the containing element’s width. The same goes for vh. Using these properties, you can do some cool things with your website.

.site__container {
    width: 100vw;
    height: 100vh;
}

We target a div tag with a class of .site__container and we assign a **width **and **height **of **100vw **and **100vh **to both respectively. This helps to size our webpage’s viewport to take the browser’s full width and height.

You will not see any effect when you refresh your browser since other HTML tags have not been given specific sizing or styling.

Test browser compatibility of your CSS Forms. Try LambdaTest Now!

Applying hero image

The hero image is a common element in blog design. It’s a large, eye-catching image that spans the full width of the page and often a bit of the page’s height. It is usually used to draw initial attention to an article or page and as an anchor point for future articles or pages within that site section. A hero image can also highlight content such as images, videos, or other interactive elements by making it the central point of focus on the page.

.hero__images {
    height: 100%;
    background-image: url("./delivery-man.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Browser Output:

From the CSS code above, we assigned a height of 100% to the class of hero__images. This helps the hero__images **class to inherit the same height value set to the direct parent, which is **100vh. This helps the background image used to occupy the browser viewport, and then we set a background-image. You can download the image here.

We also added a background-repeat of no-repeat to prevent it from repeating, a background-size of cover, which helps to set the image to cover the entire viewport, and a background-position of center, which helps to center the image within the viewport or container.

Centering the form with Flexbox

Centering the form with CSS Flexbox is easy. The only problem is that it requires you to wrap the form in a parent container with a specified width, which is a bit of a pain. Thankfully, there’s a better solution that works in all browsers. You’ll need three elements:

The actual form.
A wrapper element (parent).
An element for the actual content (child).

We’ll use CSS Flexbox to center the web form to the browser center. Type and run the code below.

.card__wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Browser Output:

In the section of styling CSS Forms tutorial, we target the card__wrapper **class, we set a **height **of **100%, a display **of **flex, justify-content of center, and align-items of center. This helps to position the form to the center horizontally and vertically while styling CSS Forms.

Styling the form element

The HTML for a typical form consists of various input elements, each representing a different type of data. In CSS, you can style the input element in various ways to create distinction among them.

Here we apply styling to the CSS Form and add a specific width and height.

.card__forms {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 400px;
    background-color: rgb(1, 32, 32, 0.4);
    border-radius: 0.5rem;
    box-shadow: 3.5px 3.5px 4px 2px rgba(0, 0, 0, 0.3);
    border-top: 2px solid rgb(89, 250, 156);
    border-bottom: 2px solid rgb(89, 250, 156);
}

Browser Output:

We target the class of card__form, apply a display **of **flex, justify-content of center, width, and height **of **400px across, to give it a defined size, background-color of rgb(1, 32, 32, 0.4). The last two integers of 0.4 are transparent values as they represent the opacity **of the **0.4 **value. We also added a **border-radius of 0.5em, box-shadow, border-top, and border-bottom of 2px solid rgb(89, 250, 156). This creates the solid lime color you can see at the top and bottom of our CSS Form.

Styling form logo

Many websites use the form logo to style the input field and submit button in a form. The first reason is that the form is consistent with the overall design. The second reason is that it makes it easier to differentiate between a regular input field and a submit button since the color is used for the submit button.

Here we apply styling to the logo on the form element.

.site__logo {
    width: 40px;
    padding: 4px;
    margin: 2.0rem 5rem;
    text-align: center;
    border-radius: 50%;
    font-size: x-large;
    font-weight: bolder;
    font-family: 'Trebuchet MS', sans-serif;
    background-color: rgb(89, 250, 156);
    color: rgb(1, 32, 32);
    cursor: default;
}

Browser Output:

We targeted the site__logo class and we added a width **of **40px, padding **of **4px, **margin **of **2.0rem **and **5rem **for top and bottom respectively (to add extra white space).

We also apply text-align to center **(to center the logo), **border-radius of 50% **(to make the logo round), **font-size of x-large, font-weight of bolder, and font-family of ‘Trebuchet MS‘.

And a background-color of rgb(89, 250, 156), color **of **rgb(1, 32, 32) and cursor **of **default.

Styling site caption

The site caption is a little bit of text that appears at the top of every page on your website. This can be any text you want. It is typically used to identify who created the site and possibly provide legal information about the site’s content.

By styling this text, we can make it stand out more or appear in multiple places on a page.

Here we apply styling to the caption on the CSS Form.

.sign__caption p {
    color: white;
    font-family: calibri;
    font-style: italic;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

Browser Output:

We selected the sign__caption **class and targeted the **p tag inside it. We apply a text color **of **white, font-family of calibri, font-style **of **italic, text-transform to lowercase, and margin-bottom of 0.5rem (to apply extra white space at the bottom).

Styling the input tag

The input tag comes with a few styles by default. It has the look of a text field, and it’s a good idea to use the default styling for the most part. The default styling provides enough contrast between elements so that users can easily read and understand what they’re filling in.

Here we apply styling to the input tag on CSS Form, where users can enter their information.

.user_id input {
    width: 100%;
    display: block;
    outline: none;
    border: 0;
    padding: 1rem;
    border-radius: 20px;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.user_id input::placeholder{
    color: rgb(1, 32, 32);
}

.user_id input:active {
    outline: 2px solid rgb(89, 250, 156);
}

Browser Output:

We apply the following values from the code sample above to the input tag nested inside the user id class.

width: of 100% (so that our input tag takes in a full size within the container).
display: of a *block *(so the tag can be centered properly).
outline: of *none *(to remove the outline around the input tag when we click on it).
border: to *0px *(to remove the gray border around the input tag).
padding: of *1rem *(to add more space within the tag input tag to give room for user’s input such as usernames and passwords).
border-radius: of *20px *(to give it a rounded curve at the edge).
margin: of 0.8rem 0 (0.8rem added extra space at the top and bottom while the 0 means no space should be added to the left and right of the input tag).
color: of rgb(1, 32, 32).

For the placeholder, we added a text color of rgb(1, 32, 32), which is responsible for the Username and Password text. And for the active **state, we added an **outline **color of **2px solid rgb(89, 250, 156).

You will see the outline color when you click on the input field of CSS Form.

Check this out: Ad Hoc Testing: A Comprehensive Guide With Examples and Best Practices

Styling forget password

It is necessary to style the password field and its labels in the forgot-password form. You may require to use for this purpose a combination of standard CSS properties and some custom properties.

Here, we apply styling to the **label **and **a **tag, providing two options for users who want their account to remain signed in and for users who forgot their password to recover it.

.checkbox__wrapper label {
        color: white;
        font-family: calibri;
        text-transform: lowercase;
}

.checkbox__wrapper a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.checkbox__wrapper a:hover {
        color: rgb(255, 255, 255);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: normal;
}

Browser Output:

In this tutorial section on CSS Forms, we targeted the label tag nested inside the .checkbox__wrapper class and applied the following styling to it.

color: of white, a font-family of calibri
text-transform: of lowercase, while on the anchor tag, we applied a
color: of rgb(89, 250, 156),
text-decoration: to none (to remove the default blue line on the anchor tag)
font-style to italic to differentiate it from the label text.

Since the anchor tag is a link that is meant to send a request, we decided to add a hover state, which is something to notify the user that this is a clickable link.

On hover state, we added a text color of rgb(255, 255, 255) on hover, and the font-style is set to normal to restore it.

Style the form button

The form button is the first thing a user will see on your website. A nice button can make a good impression, but a bad one can leave a user with a bad taste in their mouth before they even get to read any content.

Here we apply styling to the button tag on CSS Form. This button enables the user to sign into the website.

.btn__wrapper button {
    width: 100%;
    border: none;
    padding: 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.btn__wrapper button:hover {
    background-color: rgb(89, 250, 156); 
    color: white;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

Browser Output:

In this section of this tutorial on CSS Forms, we targeted the button tag nested in the **btn__wrapper **class, and we applied:

width: of 100% to make it have a full width within the container.
border: is set to **none **to remove the gray border around the button.
padding: of 1rem to add space between the “SIGN IN” text and the button tag.
border-radius: of 20px to apply a round corner style to the border.
text-transform: is set to uppercase to capitalize the text.
font-weight: is set to bolder to make text bold.
margin: is set to 0.8rem at the top and bottom to give white space around the object, while 0 at the left and right.
color of rgb(1, 32, 32).

On hover, we set the background-color to rgb(89, 250, 156), text color to white to create a kind of invert effect when we hover over it, a transition of all 0.5s ease-in-out, and a cursor of a pointer.

To see these changes, move your mouse pointer to hover on the button.

Styling the signup option

The actual signup option is styled to look like a button. The design of the button is simple and recognizable so that users will know what it does. The input size for the email address is a bit smaller than usual to ensure that the user doesn’t have to scroll up and down every time they want to add an email address.

Here we apply styling to the p and a tag, where we provide options for users who don’t have an account yet but would want to sign up.

 .signup__option p {
    color: white;
        font-family: calibri;
        text-transform: lowercase;
}
.signup__option a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.signup__option a:hover {
    color: rgb(255, 255, 255);
    font-family: calibri;
    text-transform: lowercase;
    text-decoration: none;
    font-style: normal;
}

Browser Output:

From the browser output, you will notice that the “stay signed in / forgot password” and “don’t have an account yet? / sign up!” looks the same. Well, you guessed it right!

We have to copy the CSS styles for the label tag of the checkbox_wrapper *class and paste it on *.signup_option a and then copy the styles on forget password and paste it on the sign up class.

Now we should have the same effect.

Here is the link to the finished project on styling CSS Forms.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to style forms with CSS: A beginner’s guide</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="site__container">
    <main class="hero__images">
      <main class="card__wrapper">
        <!-- background for the form -->
        <section class="card__forms">

          <!-- Wrapper for all items of the box -->
          <section class="items__wrapper">

            <div class="site__logo">MS</div>
            <div class="sign__caption">
              <p>Signin for home delivery service</p>
            </div>

            <div class="user_id">
              <!-- user id options for username and password -->
              <input type="text" name="Username" placeholder="Username">
              <input type="password" name="Password" placeholder="Password">
            </div>

            <div class="checkbox__wrapper">
              <!-- Input filed for checkbox and forget password -->
              <input type="checkbox" name="checkbox">
              <label for="checkbox">stay signed in</label> 
              <a href="#">Forget Password?</a>
            </div>

            <div class="btn__wrapper">
              <!-- Sign in button -->
              <button class="btn__signin">sign in</button>
            </div>

            <div class="signup__option">
              <!-- Sign up opption for new users -->
              <p>Don't have an accout yet? <a href="#">Sign Up!</a></p>
            </div>
          </section>
        </section>
      </main>
    </main>
  </div>
</body>
</html>

CSS:

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.site__container {
    width: 100vw;
    height: 100vh;
}

.hero__images {
    height: 100%;
    /* background-image: url("Screenshot\ \(209\).png"); */
    background-image: url("https://i.postimg.cc/NfX1S37K/delivery-man.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: aqua; */
}

.card__wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card__forms {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 400px;
    background-color: rgb(1, 32, 32, 0.4);
    border-radius: 0.5rem;
    box-shadow: 3.5px 3.5px 4px 2px rgba(0, 0, 0, 0.3);
    /* border: 1px solid rgb(89, 250, 156); */
    border-top: 2px solid rgb(89, 250, 156);
    border-bottom: 2px solid rgb(89, 250, 156);
}

.site__logo {
    width: 40px;
    padding: 4px;
    margin: 2.0rem 5rem;
    text-align: center;
    border-radius: 4px;
    font-size: x-large;
    font-weight: bolder;
    font-family: 'Trebuchet MS', sans-serif;
    background-color: rgb(89, 250, 156);
    color: rgb(1, 32, 32);
    border-radius: 50%;
    cursor: default;
}

.sign__caption p {
    color: white;
    font-family: calibri;
    font-style: italic;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

.user_id input {
    width: 100%;
    display: block;
    outline: none;
    border: 0;
    padding: 1rem;
    border-radius: 20px;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.user_id input::placeholder{
    color: rgb(1, 32, 32);
}

.user_id input:active {
    outline: 2px solid rgb(89, 250, 156);
}


.checkbox__wrapper label {
        color: white;
        font-family: calibri;
        text-transform: lowercase;
}

.checkbox__wrapper a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.checkbox__wrapper a:hover {
        color: rgb(255, 255, 255);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: normal;
}

.btn__wrapper button {
    width: 100%;
    border: none;
    padding: 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.btn__wrapper button:hover {
    background-color: rgb(89, 250, 156); 
    color: white;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.signup__option p {
    color: white;
        font-family: calibri;
        text-transform: lowercase;
}
.signup__option a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.signup__option a:hover {
    color: rgb(255, 255, 255);
    font-family: calibri;
    text-transform: lowercase;
    text-decoration: none;
    font-style: normal;
}

Test your sign-ups forms on 3000+ real devices. Try LambdaTest Now!

Do you want to brush up on your CSS properties? Check out our CSS Cheat Sheet Tutorial.

Testing CSS Forms with LT Browser

Now that we have completed our project on styling CSS Forms, it’s usually a best practice to test our website or web app before deployment (before we upload it to a server).

Using cross browser testing tools such as LambdaTest enables us to perform web testing on an online browser farm of 3000+ real browsers, operating systems and devices ranging from mobile, tablets, and desktops. This helps us test website for responsiveness on different operating systems across multiple browsers.

Check this out: Usability Testing: A Comprehensive Guide With Examples And Best Practices

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium automation, Cypress automation, CI/CD, and more.

LambdaTest’s mobile-friendly testing tool saves you time and money. LT Browser comes with 50+ pre-installed mobile-friendly viewports and advanced developer tools for creating a mobile app.

Check this out: Most Comprehensive Selenium IDE Tutorial

Follow the below steps to launch LT Browser for responsive testing.

Firstly, launch LT Browser.
This will open the LT Browser home page, where you have a list of different operating systems pre-installed devices to choose from.

3- While your LT Browser remains open, copy and paste this link (https://codepen.io/ocxigin/pen/gOebaWb) from the code pen address bar and paste it on the LT Browser address bar and then click on the refresh icon to reload the page.

From the code output from LT Browser, you’ll notice how each device you choose affects how the web form is structured and laid out.

LT Browser does much more than that. We can also perform debugging by launching the Dev tools, which can be accessed by clicking the debug icon above the device preview tab.

For a better understanding of how your site scales on multiple browsers across multiple operating systems, use the pre-installed devices available on your home screen, select and see how your website performs on these devices.

Check this out: Mobile Emulator Online- Test your mobile websites and smartphone apps using our scalable on cloud mobile emulator.

Summary

You have learned how to style forms using CSS. You also learned how to center items using Flexbox, using transition on buttons, apply background images and how to cross text your website or web app using LambdaTest.

Alright! We’ve come to the end of this tutorial.
Thanks for taking your time to read this article to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter and other social media @ocxigin.