Creating Stylish Typography with CSS3

Question

Creating Stylish Typography with CSS3

Seeking Inspiration

Despite my efforts, I haven't been able to identify the name of a particular CSS effect that I'm trying to recreate. This has made it challenging to find examples or tutorials on how to achieve this look using CSS3.

I have explored various related terms such as bootstrap grid layout, text web designs, scaffolding, masonry, and word art, but none of them quite match what I am envisioning. The concept of word art comes closest, leaving me feeling frustrated that I can't pinpoint the exact design name.

My aim is to construct a header using pure CSS and the bootstrap grid system to display article tags in an elegant manner. Unfortunately, my artistic vision falls short, so I would greatly appreciate an example to guide me!

Inquiries

Can anyone provide insight into the specific CSS styling technique I am referring to?

Showcase

https://i.sstatic.net/rDlzv.png

css bootstrap-4

Answer 1

Answer №1

If you're searching for it, what you want is referred to as a "word cloud" or a "tag cloud".

An easy demonstration would resemble this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.tagcloud
{
/*    height:300px;*/
}
.tag-1
{
    font-size: 12px; 
    color: rgb(52, 152, 219);
}
.tag-2
{
    font-size: 16px; 
    color: rgb(52, 152, 219);
}
.tag-3
{
    font-size: 20px; 
    color: rgb(52, 152, 219);
}
.tag-4
{
    font-size: 28px; 
    color: rgb(52, 152, 219);
}
.tag-5
{
    font-size: 36px; 
    color: rgb(70, 207, 176);
}
</style>

<div class="container">
    <div class="row">
        <div id="tagcloud" class="col-10 offset-1 mt-3">
            <a href="#" class="p-2">Cookies</a>
            <a href="#" class="p-2">Pies</a>
            <a href="#" class="p-2">Beer</a>
            <a href="#" class="p-2">Butter</a>
            <a href="#" class="p-2">Coding</a>
            <a href="#" class="p-2">Apples</a>
            <a href="#" class="p-2">Cheese</a>
            <a href="#" class="p-2">Hamburger</a>
            <a href="#" class="p-2">Lunch</a>
            <a href="#" class="p-2">Dinner</a>
            <a href="#" class="p-2">Ice Cream</a>
            <a href="#" class="p-2">Steak</a>
            <a href="#" class="p-2">JavaScript</a>
            <a href="#" class="p-2">HTML</a>
            <a href="#" class="p-2">CSS</a>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){
        var classes = ["tag-1", "tag-2", "tag-3", "tag-4", "tag-5"];

        $("#tagcloud a").each(function(){
            $(this).addClass(classes[~~(Math.random()*classes.length)]);
        });
    });
</script>

To modify the padding between different tags, you can utilize the inherent Bootstrap 4 spacing classes such as p-2 or p-3, and so on.

Answer 2

If you're searching for it, what you want is referred to as a "word cloud" or a "tag cloud".

An easy demonstration would resemble this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.tagcloud
{
/*    height:300px;*/
}
.tag-1
{
    font-size: 12px; 
    color: rgb(52, 152, 219);
}
.tag-2
{
    font-size: 16px; 
    color: rgb(52, 152, 219);
}
.tag-3
{
    font-size: 20px; 
    color: rgb(52, 152, 219);
}
.tag-4
{
    font-size: 28px; 
    color: rgb(52, 152, 219);
}
.tag-5
{
    font-size: 36px; 
    color: rgb(70, 207, 176);
}
</style>

<div class="container">
    <div class="row">
        <div id="tagcloud" class="col-10 offset-1 mt-3">
            <a href="#" class="p-2">Cookies</a>
            <a href="#" class="p-2">Pies</a>
            <a href="#" class="p-2">Beer</a>
            <a href="#" class="p-2">Butter</a>
            <a href="#" class="p-2">Coding</a>
            <a href="#" class="p-2">Apples</a>
            <a href="#" class="p-2">Cheese</a>
            <a href="#" class="p-2">Hamburger</a>
            <a href="#" class="p-2">Lunch</a>
            <a href="#" class="p-2">Dinner</a>
            <a href="#" class="p-2">Ice Cream</a>
            <a href="#" class="p-2">Steak</a>
            <a href="#" class="p-2">JavaScript</a>
            <a href="#" class="p-2">HTML</a>
            <a href="#" class="p-2">CSS</a>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){
        var classes = ["tag-1", "tag-2", "tag-3", "tag-4", "tag-5"];

        $("#tagcloud a").each(function(){
            $(this).addClass(classes[~~(Math.random()*classes.length)]);
        });
    });
</script>

To modify the padding between different tags, you can utilize the inherent Bootstrap 4 spacing classes such as p-2 or p-3, and so on.

Creating Stylish Typography with CSS3

Seeking Inspiration

Inquiries

Showcase

Answer №1

Similar questions

Changing the size of a responsive navigation bar with React and adjusting it based on the window.scrollY position switches between collapsed and un

Steps to Launch a Fresh Modal Without Exiting the Current Modal

Arranging elements and buttons inside of components to create a cohesive design

React-Three-Fiber isn't moving with scrolling

Struggling to make the text color change when hovering

How can I create a hover effect for multiple divs sharing the same id using CSS or JavaScript in the easiest way possible?

Struggling with CSS, seeking improvements to align with my previous coding style

What is the reason for requiring the addition of "repeat" to ensure that it appears on the

Scrolling up the page following the addition of a new row

What is the best way to center the 'email promo' text in the top navigation bar alongside the image and other text links?

The animation using Jquery and CSS is experiencing some glitches on Safari when viewed on an

The image on Bootstrap isn't showing up

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Revamp the hues of numerous elements simultaneously using just a single click!

Navigation bar at the bottom using Twitter Bootstrap 3 that includes a combination of full-width and regular containers

Adjusting label color when input is deactivated in a React application using TypeScript

Shifting hues of colors on website based on geographical location

Making alterations to the bootstrap.scss document

Achieving Bottom or Center Alignment for a Div within Another Div Using Bootstrap 5

What is the best way to adjust padding within a flexbox layout?