Many popular online newspapers (e.g. The Wall Street Journal, Le Figaro, The Telegraph) offer some free content, but require users to purchase a subscription if they want unlimited reading.
And in a world where many people expect content on the internet to be free, finding the most suitable payment model is an ongoing challenge for online publishers.
“One of the most essential all-time challenges for journalism is its economic sustainability.” – Aurelija Gackaitė
Take for example a post from The Wall Street Journal, where users are permitted an excerpt of an article for free, but need to subscribe to gain access to the full piece:

In this short tutorial, we’ll use JavaScript to mimic this behavior. First we’ll create a post with restricted content, masked by a gradient, and then we’ll let subscribed users reveal the full post.
Here’s our demo:
1. Begin With the Page Markup
We’ll start by using the article
element to represent a typical blog post or newspaper article. We’ll also wrap it inside a .container
for setting a maximum page width.
Here’s the relevant markup:
<div class="container"> <article class="post"> <header> <h1 class="post-title">...</h1> <div class="post-meta">...</div> </header> <div class="post-content">...</div> <div class="actions"> <p>...</p> <div class="links">...</div> </div> </article> </div>
2. Add the CSS
By default we’ll add a not-member
class to the html
element (here we’re using the Add Class tool provided by CodePen:

This ensures that only a small part of the post will initially be visible to the readers:

More specifically we’ll show just the header, the first two paragraphs, and the call-to-action links. We do this by using the “general sibling combinator” to select everything after the second paragraph (p:nth-child(2) ~ *
) where .not-member
is present:
.not-member .post-content p:nth-child(2) ~ * { display: none; } .not-member .actions { display: block; }
Next we’ll add a few styles to the last visible paragraph (second). We’ll gradually hide its contents and add a padlock icon on top of it. These styles will let readers know that access is restricted to the whole article.
Here’s the CSS needed for this bit:
.not-member .post-content p:nth-child(2) { position: relative; } .not-member .post-content p:nth-child(2)::before, .not-member .post-content p:nth-child(2)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; } .not-member .post-content p:nth-child(2)::before { background: url(padlock.svg) no-repeat center; z-index: 1; height: 24px; } .not-member .post-content p:nth-child(2)::after { background: linear-gradient(rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.36) 36%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.72) 72%, rgba(255,255,255,0.9) 90%); height: 100%; }
To round off these basic styling rules, we’ll style the call-to-action section:
.not-member .actions { font-weight: bold; text-align: center; margin-top: 2rem; } .not-member .links { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; } .not-member .links a { background: firebrick; color: white; padding: 0.5rem 0; transition: background 0.3s; } .not-member .links a:hover { background: #9d1e1e; }
3. Unlock Premium Content
For the purposes of our simple demo, let’s assume that a reader becomes a premium member each time he or she clicks on a call-to-action.
In our case, at that point the not-member
class is removed from the html
element and the full post content becomes visible.
Here's the JavaScript code responsible for that functionality:
const links = document.querySelectorAll(".not-member .links a"); for(const link of links) { link.addEventListener("click", e => { e.preventDefault(); document.documentElement.classList.remove("not-member"); }); }
By the time the full post appears, there’s no need to style the second paragraph differently as well as show the initial call-to-actions. So, let’s hide them all:
.post-content p:nth-child(2)::before, .post-content p:nth-child(2)::after, .actions { display: none; }
Finally, we can restart the subscription/unsubscription process by clicking on the Unsubscribe/Sign Out link which can be found at the bottom of the post content:

Here’s the required JavaScript code:
const unsubscribe = document.querySelector(".unsubscribe"); unsubscribe.addEventListener("click", e => { e.preventDefault(); document.documentElement.classList.add("not-member"); });
Conclusion
In this quick tutorial, we built a simple demo that covered some ideas for styling restricted content. Similar techniques are used by big online newspapers and publishers, but you may find a use for this yourself.
We only simulated the subscription, so to implement this properly you would have to work out the signup process behind the scenes. And it’s important to note that the content we’ve hidden is only hidden visually–the page source still contains the restricted content. Bear this in mind if you’re publishing genuinely sensitive material.
As always, thanks for reading!
Read All About it!
- WordPress Themes7 Principles of Good Website Design for Newspaper WordPress ThemesAlina Silvasan
- WordPress ThemesBest WordPress Magazine Themes for Blog and News Websites in 2020Brenda Barron
- InspirationA Clear Look at Big Type Reading ExperiencesIan Yates
- FlexboxHow to Build a Full-Screen Responsive Page With FlexboxGeorge Martsoukos
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post