How to design website layouts for screen readers

How to design website layouts for screen readers

It’s easy to think about a layout as being a primarily visual concern. The header goes up top, the sidebar is over here, the call to action is in an overlay on top of the content (just kidding). Grids, borders, spacing and color all portray valuable visual data, but if these hints to the structure of a page are only visible, some users may find your content unintelligible.

It’s easy to think about a layout as being a primarily visual concern. The header goes up top, the sidebar is over here, the call to action is in an overlay on top of the content (just kidding). Grids, borders, spacing and color all portray valuable visual data, but if these hints to the structure of a page are only visible, some users may find your content unintelligible.

You can experience this first hand if you try using a screen reader on the web. When I fired up VoiceOver on my Mac and took it out for a test drive, I realized that to a screen reader user, a lot pages are just a big heap of ‘content’, missing helpful organizational cues.

The experience can be kind of like listening to a long rambling story without any indication to what details are important or related to the main thread of the story. Halfway through the story, you aren’t sure whether it’s worth it to keep listening because you don’t know if you’ll even find what it is you’re looking for.

In the context of a website, your screen reader might be halfway through reading you a list of 50 sidebar links when you start wondering if there is any valuable content on the site at all.

Experiences like this are caused by websites that are built with layouts that are only visual. Ideally, however, our visual layouts should point to an underlying organizational model of our content. They should be visual indicators for a conceptual model. The visual indicators are just one way of revealing this model. The Web Accessibility Initiative’s ARIA (Accessible Rich Internet Applications) project provides alternative indicators to users who may need them.

I’ll walk through how to make use of these indicators to make a simple web page easy to use, navigate and read for users of assistive technology. All the example code is available on GitHub.

Initial Layout

Here’s an example of a page with a pretty simple layout. We’ve got a header at the top containing a logo and navigation, some body content, a sidebar off to the right with a related posts list and a list of social media sharing links, a search box below the content, and a footer containing the contact info of our business.



Visually, the content is pretty well divided, using a simple grid and background colors to distinguish the different elements. If you fire up VoiceOver on this page, you can navigate through the page pretty well using the next element command. The order of elements in the markup pretty much follows the visual order of elements. First we read the header, then the body copy, then the sidebar, then the search box, then the footer. That’s pretty good. If I press CAPS + U to pull up the VoiceOver menus, I can get a list of all the headers on the page and all the links, and navigate directly to them.


Just by using well-structured HTML, simple grouping with <div> elements and a good use of heading tags we’ve got a decent experience. It’s better than the rambling story websites I mentioned above, but it could be even better.

First we’ll add a skip-link as the first item of the page. A skip link is a very common accessibility feature that allows users to skip past lengthy lists of links and other information repeated on every web page directly to the main content of the current page.

It’s a link that is the first element in the tab order of the page. It is typically visually hidden, but when focused, it appears on-screen. To visually hide the link, we’ll add the following CSS:

.skip { 
 clip: rect(1px, 1px, 1px, 1px); 
 position: absolute !important; 
 height: 1px; 
 width: 1px; 
 overflow: hidden; 
 word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } 
/* Display the link on focus. */ 
.skip:focus { 
 background-color: #fff; 
 border-radius: 3px; 
 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 
 clip: auto !important; 
 color: #888; 
 display: block; 
 font-weight: bold; 
 height: auto; left: 5px; 
 line-height: normal; 
 padding: 15px 23px 14px; 
 text-decoration: none; 
 top: 5px; 
 width: auto; 
 z-index: 100000;
}

The link location of the skip link needs to be an id pointing to the main content of the page. In our case, I added id="main" to the <div class="content"> section and gave the skip link a url of href="#main".

If you visit the skip link page and hit your Tab key, the link should display. If you fire up VoiceOver and start navigating through the page, the skip link should be the first thing you come across, and clicking it should trigger VoiceOver to start reading the main content of the page.

WCAG Techniques Used

With this step, we’ve allowed users to skip straight to the meat of our page, but beyond easily accessing the main content, they still don’t have a good conceptual map of the rest of the page.


ARIA Roles and Landmarks

One way to provide users with a conceptual map of the page is by using semantic HTML5 elements like <header>, <nav>, <main>, <section>, and <aside>. These elements have built in data associated with them that is parsed by browsers and screen readers. They create landmarks on a web page. By using these elements judiciously in place of <div> elements, we can provide extra information to assistive technology devices and help the user build a conceptual map of our page.


I’ve maintained the same layout as before, but I’ve swapped some divs for some semantic HTML5 elements. I’ve also added a role attribute to the search component. Alternatively, you could keep all the divs and add a roleinstead of swapping them out for the new HTML5 elements. (See the w3 guidelines for ARIA roles)

Here are the key changes:

  • <div class="header"> becomes <header class="header">
  • <div class="main-navigation"> becomes <nav class="main-navigation">
  • <div class="content"> becomes <main class="content">
  • <div class="sidebar"> becomes <aside class="sidebar">
  • <div class="related-posts"> becomes <section class="related-posts">
  • <div class="search"> becomes <div class="search" role="search">

Now when I fire up VoiceOver and press CAPS + U, I get a new Landmarks menu. Inside this menu you can see the following elements:

  • banner
  • navigation
  • main
  • complementary
  • search
  • content information

Selecting any of these menu items takes the user straight to that element, so they can easily navigate through the different elements of a page. If they are at the bottom of the page, they can easily get back to the main navigation in the header via the Landmarks menu.

WCAG Techniques Used

We’ve dramatically increased the navigability of our page and provided an initial map to our users, but we’re missing a few things to make this experience really awesome. First, the names of our site sections are fairly generic. We aren’t exactly sure just from listening to the menu what might be in any of the elements. Second, some elements aren’t easily navigable. For instance, our sidebar components are all grouped under the label ‘complementary’.


We can add some well-thought out ARIA labels to make this experience even better.

Using Appropriate ARIA Labels

By peppering in some ARIA labels we can give the user an even more detailed conceptual map of our layout.


In this next iteration, I’ve added the following labels:

  • <nav class="main-navigation"> now has an aria-label of Primary Navigation.
  • <main class="content"> now has an aria-labelledby attribute of main-title and its <h1> has an id of main-title.
  • <aside class="sidebar"> now has an aria-labelledby attribute of sidebar-title and its <h2> has an id of sidebar-title.
  • Both <section> elements in the sidebar now have an appropriate ARIA label.

Let’s fire up VoiceOver again and pull up our Landmark menu with CAPS+U. Now we see that the ARIA labels we provided display next to each of our generic menu items. We also have a few extra menu items, because the <section> elements we provided labels for (Related Posts, Share Links), now have their own menu items.

Now an assistive technology user has an equal (and maybe even better) conceptual map of the content and actions they can take on this website compared to a non-assistive technology user. They can get a quick overview of everything on the site, easily navigate to the section of the page they want, and quickly find what they are looking for.

WCAG Techniques Used

Wrap Up

With a combination of well-structured HTML markup, thoughtful use of ARIA roles and a careful labeling of site sections using ARIA labels, we’re able to create a user experience for assistive technology users that rivals the experience of non-assistive technology users. We were able to take the conceptual map that was implicit in our visual layout and expose it to assistive technology.

You may find holes in your conceptual map or sections that unnecessarily have the same function. The process can help you clarify your designs, identify areas that might not make sense conceptually or visually, and improve your design for all users of your site.


By : Ben Robertson


Introduction To Responsive Web Design - HTML & CSS Tutorial

Introduction To Responsive Web Design - HTML & CSS Tutorial

This tutorial teaches you to build responsive websites from scratch using HTML & CSS

Introduction To Responsive Web Design - HTML & CSS Tutorial

It’s a part of The Responsive Web Design Bootcamp at Scrimba: https://scrimba.com/g/gresponsive

However, this 4-hour tutorial stands fully on its own legs. It starts with explaining the core concepts needed to start thinking responsively, and then it takes you through every single step in building a professional-level responsive website.

Course content

⌨️ (00:00:00) Intro

⌨️ (00:02:59) 1. Starting to think responsively

⌨️ (00:06:01) 2. CSS Units

⌨️ (00:09:16) 3. CSS Units - Percentage

⌨️ (00:15:14) 4. Controlling the width of images

⌨️ (00:20:05) 5. min-width and max-width

⌨️ (00:22:54) 6. CSS Units - The em unit

⌨️ (00:28:25) 7. The problem with ems

⌨️ (00:30:58) 8. The Solution: Rems

⌨️ (00:35:46) 9. Picking which unit to use

⌨️ (00:39:18) 10. ems and rems - an example

⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML

⌨️ (00:55:02) 12. Basic Styles and setting up the columns

⌨️ (01:02:09) 13. Adding the background color

⌨️ (01:06:21) 14. Setting the column widths

⌨️ (01:10:00) 15. Spacing out the columns

⌨️ (01:14:27) 16. Controlling the vertical position of flex items

⌨️ (01:19:42) 17. Media Query basics

⌨️ (01:29:50) 18. Making out layout responsive with flex-direction

⌨️ (01:36:45) 19. flex-direction explained

⌨️ (01:39:54) 20. Creating a navigation

⌨️ (01:44:40) 21. Using flexbox to start styling our navigation

⌨️ (01:52:19) 22. Making out navigation look good

⌨️ (01:59:38) 23. Adding the underline

⌨️ (02:03:40) 24. A more complicated navigation

⌨️ (02:10:25) 25. Making the navigation responsive

⌨️ (02:17:20) 26. Taking a look at the rest of the project

⌨️ (02:21:34) 27. Setting up the structure

⌨️ (02:29:59) 28. Featured article structure

⌨️ (02:35:07) 29. The home page - HTML for the recent articles

⌨️ (02:37:39) 30. Home Page - HTML for the aside

⌨️ (02:43:45) 31. Starting the CSS for our page

⌨️ (02:59:15) 32. Starting the layout - looking at the big picture

⌨️ (03:07:48) 33. Starting to think mobile first

⌨️ (03:10:37) 34. Styling the featured article

⌨️ (03:17:03) 35. Changing the visual order with flex box

⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins

⌨️ (03:27:05) 37. Changing the visual order with flex box

⌨️ (03:31:00) 38. Styling recent articles for large screens

⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints

⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage

⌨️ (03:53:12) 41. Creating the recent posts page

⌨️ (03:56:39) 42. Setting up the About Me page

⌨️ (04:00:54) 43. Fixing up some loose ends

⌨️ (04:05:27) 44. Important Note. The viewport meta tag

⌨️ (04:09:10) 45. Module wrap up

⌨️ (04:12:24) Outro

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

HTML Table uses to represent tabular data like in the Excel Application and arrange the layout of the Web View.

There are some common HTML tags that use by HTML table:

Before start practicing HTML 5 table, make sure all

tag put inside complete and tag.

<!DOCTYPE html>
<html>
 <head>
  <title>Basic HTML Table</title>
 </head>
 <body>
  <table></table>
 </body>
</html>

Basic HTML Table

Here is an example of a basic HTML table or common use of the above HTML tags to define or create a table.

<table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
300</td>
 </tr>
</table>

Output:

As a default, HTML 5 table not defined with border, you should add the border manually in each table cells.

HTML Table with Border

To add a basic border to HTML 5 table, simply add this style attribute in

tag.

<table style="border: solid 1px #aaa999;">

Output:

As you can see, Table Border only draw lines to the table only and cells left borderless. To make border for all cells, add style attribute to all and all .

<table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
300</td>
 </tr>
</table>

If you want a simple coding without writing a style for each cells, use

Animated Text Reveal In Pure CSS

Animated Text Reveal In Pure CSS

Today I am sharing an Animated Text Reveal Program In Pure CSS. I created this program with only HTML and CSS, No javascript or jquery used. This a very basic and simple program but by looks it pretty enough. Let’s take a look at this program.

Animated Text Reveal In Pure CSS, Get Example With Source Code. You must have seen text reveal effect in many videos, even some website use these types of effect on their intro banner. Basically, this concept is: First add text, and add a shape over the text. then animate the shape left to right or right to left. When this animation will run with 2 or 3 seconds then the text reveal effect will create.

Where you can use animated text reveal? You can use it on your banner, about and footer section. This effect will be pretty good for any website. I had also previously shared dynamic website intro with HTML CSS & JavaScript, If you want an advance program then go for this. Otherwise, this program is also good.

So, Today I am sharing an Animated Text Reveal Program In Pure CSS. I created this program with only HTML and CSS, No javascript or jquery used. This a very basic and simple program but by looks it pretty enough. Let’s take a look at this program.

Preview and Example Of This Program

First, See how this program looks like, In this video.


Now you can see this program visually. If you like it, then go for source code.

Animated Text Reveal In Pure CSS Program Source Code

Before sharing source code, I want to say about this program a little bit. I just put one h1 tag for text, Left other work had done in CSS. Also, I put a rectangle over the text. Then animate the rectangles width 0 to 100 to 0 with the help of CSS keyframe and animation property. In other words, this program is fully based on CSS animation property, like animation-delay or animation-duration etc (know more about CSS animation ).

I have to create just 2 files for this program. One for HTML, & one for CSS, that’s all.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Text Reveal In Pure CSS  | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
  <h1 class="reveal">
	Webdevtrick.com
</h1>
</body>
 
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

:root {
	--animation-delay: 0;
	--duration: 800ms;
	--iterations: 1;
}
/* code by webdevtrick ( https://webdevtrick.com) */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #72BDED;
	flex-direction: column;
}
 
.reveal,
.reveal::after {
	        animation-delay: 0;
	        animation-delay: var(--animation-delay, 2s);
	        animation-iteration-count: 1;
	        animation-iteration-count: var(--iterations, 1);
	        animation-duration: 800ms;
	        animation-duration: var(--duration, 800ms);
	        animation-fill-mode: both;
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
 
.reveal {
	position: relative;
	font-size: 6vw;
	animation-name: text;
	color: #FFF;
	white-space: nowrap;
	cursor: default;
	text-transform: uppercase;

}
 
.reveal::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
        transform: scaleX(0);
        transform-origin: 0 50%;
pointer-events: none;
        animation-name: revealer;
}
 
 
 
@keyframes text {
from {
        clip-path: inset(0 100% 0 0);
}
to {
        clip-path: inset(0 0 0 0);
}
}
 
 
 
 
@keyframes revealer {

0%, 50% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 0 50%;
}

60%, 100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 100% 50%;		
}

 

60% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scaleX(1);
}

100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scaleX(0);
}

}

That’s It. Now you have successfully create this program which is animated text reveal in pure CSS. If you have any doubt or question comment down below.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Originally published on webdevtrick.com