WebSlides is an open-source library used to create presentations, landings, tables of content, longforms, and portfolios with basic knowledge of HTML and CSS. You might wonder about the need and importance of WebSlides when we have plenty of stunning third-party applications for this purpose. We can easily infer the indispensable importance of showcasing our skills, ideas, and work across the internet. What if we can design our desired showcasing with the use of a compact, beautiful, and easy-to-use library. Easy design, easiest sharing, and no compatibility issues. WebSlides do this for us!
Approach: We can create WebSlides designs from scratch or customize demos. To explore WebSlides we will create a few slides from scratch. First, we will design two slides individually. Then we will design a third one and combine all of them to make a Web Slide Desk.
Let’s first explore some features of WebSlides.
1. Background: We can add different backgrounds to slides:
- Add class bg-primary in section to set #44d as background.
- Add class bg-black-blue in section to set #123 as background.
- Add class bg-gradient-v in section to set vertical gradient background.
- Add class bg-gradient-r in section to set radial gradient background.
- Add class bg-gradient-h in section to set horizontal gradient background.
- Add class dark for transparent background with low opacity and class light for relatively high opacity in span tag for background.
- You can also use video as background by specifying class background-video in the video tag.
And a lot more colors can be used as background by specifying the proper class in the section of the slide. We can place background at different positions on screen by use of appropriate class in span tag for background. Some of the classes are:
- background-center
- background-center-top
- background-center-bottom
- background-left
- background-right-top
2. Wrap: Use a div with the class wrap to layout content and classes work properly. Place content inside this div.
3. Alignment: You can align your content at different locations. you can align it left, right, or centralize it. Also, you can place it at the top or bottom of the slide. Some classes are:
- content-left
- content-right
- content-center
- slide-top
- slide-bottom
- alignleft
- alignright
- size-30
- size-50
You can use a combination of these classes also.
4. Animations: You can Use different Animations in your content. Just use the appropriate class with the content you want to animate. Classes are:
- fadeIn
- fadeInUp
- zoomIn
- slideInLeft
- slideInRight
5. Typography: You can present your content with the use of semantic typography classes. These all classes use Roboto font that’s why we linked to it in the head tag. The text-subtitle class turns text into capital caps. Some typography classes are following:
- text-landing
- text-intro
- text-shadow
- text-data
- text-context
- text-cols
- text-label
- text-serif
- text-pull-left
- text-pull-right
Steps to design slides:
- Download WebSlides.
- Create a HTML file “yourFileName.html” in root.
- Start coding, add the following code to HTML file.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Linking to Roboto Google Fonts
used in webSlides -->
<link rel="preconnect" href=
<link rel="preconnect" href=
<link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Linking to CSS WebSlides -->
<link rel="stylesheet" type='text/css'
media='all' href="static/css/webslides.css">
</head>
<body></body>
</html>
|
Here we are linking to Roboto google font and CSS used throughout the slides. Before jumping into the code don’t forget to go through the following key takeaways
- create an article tag with the id “webslides”.
- Inside this article, each parent section indicates an individual slide.
- HTML class attribute is used to apply desired changes.
Example 1: In this example, we will be going to use:
- Article tag with id webslides. This tag works as a container for all slides.
- Section tag. This tag indicates an individual slide.
- Span tag. This tag sets background for the slide.
- Div tag with class wrap. This tag act as wrapper for all the div tags that layouts and manages whole content.
- Div tag with two classes content-center and zoomIn.
- content-center centralizes whole content of the div.
- ZoomIn creates a zoom in animation for content of the div.
- Div tag with class text-subtitle. This class converts the text to capital caps.
index.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Linking to Roboto Google Fonts
used in webSlides -->
<link rel="preconnect" href=
<link rel="preconnect" href=
<link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Linking to CSS WebSlides -->
<link rel="stylesheet" type='text/css'
media='all' href="static/css/webslides.css">
<style>
/* To customize the look and feel of font. */
p,
h4 {
color: white;
}
h2 {
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Use class of vertical if you want
to add vertical sliding in slides -->
<article id="webslides">
<!--Slide # 1 -->
<section>
<!-- Set BackGround -->
<span class="background light"
style="background-image:url(
"></span>
<div class="wrap">
<div class="content-center zoomIn">
<h4>HTML 5 Presentations</h4>
<div class="text-subtitle">
<p>Using WebSlides</p>
</div>
</div>
</div>
</section>
</article>
</body>
</html>
|
Output:
Slide#1
you’re done with the first slide.
Example 2: Here we are using,
- Section tag with class bg-white. This tag indicates an individual slide with white background.
- Div tag with class wrap. This tag act as wrapper for all the div tags that layouts and manages whole content.
- Div tag with two classes card-50 and bg-gray.
- card-50 creates a card of size 50.
- bg-gray sets the background color of card as gray.
- This div contains a figure tag and another div tag.
- Figure tag contains an image for left side of card.
- Div tag with class flex-content. This tag contains content for right side of card.
- Flex-content class layouts the content relatively.
index.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!--Linking to Roboto Google Fonts
used in webSlides-->
<link rel="preconnect" href=
<link rel="preconnect" href=
<link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Linking to CSS WebSlides -->
<link rel="stylesheet" type='text/css'
media='all' href="static/css/webslides.css">
<style>
/* To customize the look and feel of font. */
.slide-top {
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Use class of vertical if you want to
add vertical sliding in slides -->
<article id="webslides">
<!--Slide # 2 -->
<section class="bg-white">
<div class="wrap">
<div class="card-50 bg-gray">
<figure>
<img src=
alt="Nature">
</figure>
<div class="flex-content">
<h2>
Magic Of Nature
</h2>
<p class="text-subtitle">
Don't you feel?
</p>
<p class="text-intro">
"God is the most beautiful, and
beauty is the expression of God.
If you can't appreciate beauty
in the world how can you
understand God?"
</p>
<p class="text-context">
A quote about Nature by Amit Ray.
</p>
<p class="text-intro text-shadow">
Nature teaches more than she
preaches. There are no sermons
in stones. It is easier to get
a spark out of a stone than a
moral.
—John Burroughs
</p>
</div>
</div>
</div>
</section>
</article>
</body>
</html>
|
Output:
Slide#2
Web Slide Desk
Web Slide Desk is a combination of Web Slides. Let’s create one new slide and then make a deck. Here, we will use the first and second slide, create a new slide and combine all of them to create a Web Slide Desk.
In third slide, we are using,
- Section with class bg-gradient-r. This tag sets a radial gradient background for the slide.
- Div with content-center. This tag centralize the content of the div.
- P tags with classes text-landing and text-shadow. These tags applies the specified effects to text.
- Script tag to Link Web Slides JS.
- script tag to initialize webslides.
index.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!--Linking to Roboto Google Fonts
used in webSlides-->
<link rel="preconnect" href=
<link rel="preconnect" href=
<link href=
wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Linking to CSS WebSlides -->
<link rel="stylesheet" type='text/css'
media='all' href="static/css/webslides.css">
<style>
.zoomIn {
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Use class of vertical if you want to
add vertical sliding in slides -->
<article id="webslides">
<!--Slide # 1 -->
<section>
<!-- Set BackGround -->
<span class="background light"
style="background-image:url(
'https://media.geeksforgeeks.org/wp-content/uploads/20211009150155/Untitleddrawing12-300x225.jpg')">
</span>
<div class="wrap">
<div class="content-center zoomIn">
<h3>HTML 5 Presentations</h3>
<div class="text-subtitle">
<p>Using WebSlides</p>
</div>
</div>
</div>
</section>
<!--Slide # 2 -->
<section class="bg-white">
<!-- Set BackGround -->
<div class="wrap">
<div class="card-50 bg-gray">
<figure>
<img src=
alt="Nature">
</figure>
<div class="flex-content">
<h2>
Magic Of Nature
</h2>
<p class="text-subtitle">
Don't you feel?
</p>
<p class="text-intro">
"God is the most beautiful,
and beauty is the expression
of God. If you can't appreciate
beauty in the world how can you
understand God?"
</p>
<p class="text-context">
A quote about Nature by Amit Ray.
</p>
<p class="text-intro text-shadow">
Nature teaches more than she
preaches. There are no sermons
in stones. It is easier to get
a spark out of a stone than a
moral.
—John Burroughs
</p>
</div>
</div>
</div>
</section>
<!--Slide # 3 -->
<section class="bg-gradient-r">
<div class="slide-top content-center">
<h2>GeeksforGeeks</h2>
</div>
<div class="content-center">
<p class="text-landing">
Leave the road, take the trails.
</p>
<p class="text-shadow">
—Pythagoras
</p>
</div>
</section>
</article>
<!--Linking to JS WebSlides -->
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
</body>
</html>
|
Output:
Web Slide Desk
It is not the whole story! You can do a lot more with WebSlides. Head towards the web slides folder you downloaded. Explore more classes, components, and templates. The ball is in your court now!