Question

我试图在div中设置一些文本的样式。如果你看一下下面我的livelink，你会看到我需要添加风格化文本的方块，下面是我创建的关于我希望风格化文本如何发布的图像。

Here is the image I'm trying to duplicate using CSS and text

有人可以告诉我如何实现这个目标吗？

CSS

.trigger {
width:200px;
height:200px;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.hover-img, .hover-img.hover_effect {
background-color: #FFFFFF;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.trigger:hover > .hover-img {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
font-size: 14px;
color: #FFF;
}
.img1 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5 {
background-size: 100% 100%;
background-repeat: no-repeat;
} 
.img5:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}

HTML

<div id="container">
<div class="row">
    <div class="col">
        <div class="trigger vertical">
            <div tabindex="0" class="maincontent hover-img img"></div>
      </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img3"><span  class="step">Step</span> <span class="number">1</span></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"></div>
        </div>
    </div>
    <!-- </div>
 <div  class="row">-->
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img5"></div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img6"></div>
    </div>
    <div class="trigger large">
        <div tabindex="0" class="maincontent hover-img img5"></div>
    </div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img1"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img2"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"> </div>
</div>
</div>

Answer 1

如果这是一种不常见的字体，您应该坚持使用图像。如果用户没有你在CSS中指定的字体，那么它将默认为丑陋的东西。是的 - 你可以在CSS3中使用@ font-face将字体嵌入到CSS中。但是您必须将您的网站限制为符合CSS3标准的浏览器，并且只使用TTF / OTF和WOFF字体。

在div中样式化文本

1 个答案: