CSS3文本（艺术字）效果

Question

背景

我没有运气试图弄清楚这个效果的名称，因此无法找到如何在CSS3中使这看起来很漂亮的例子。

我搜索了与之相关但不准确的措辞：bootstrap网格布局文本网页设计，脚手架，砌体，文字艺术。文字艺术似乎非常接近，我很失望，我找不到这个设计名称。

我的目标是从纯css和bootstrap网格创建一个标题，以一种简洁的方式显示文章的标签。我的艺术能力是这样的，不存在:)所以需要一个例子！

帮助

这个CSS样式的名称是什么？

实施例

Answer 1

您要找的是“词云”或“标签云”。

一个简单的例子如下：

<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>

要调整不同标记之间的填充，可以使用本机Bootstrap 4间距类，例如p-2或p-3等。