在下图中,您可以看到一些我想用HTML和CSS实现的紫色标题。标题可以是任意长的,当然。对我来说难以适当创建紫色标题的自定义下划线。CSS - 用特殊下划线创建标题
我想过使用显示块的标题和使用背景图像和背景重复属性,但我不知道如何在下划线的右侧设置紫色装饰元素。
任何帮助表示感谢,谢谢!
在下图中,您可以看到一些我想用HTML和CSS实现的紫色标题。标题可以是任意长的,当然。对我来说难以适当创建紫色标题的自定义下划线。CSS - 用特殊下划线创建标题
我想过使用显示块的标题和使用背景图像和背景重复属性,但我不知道如何在下划线的右侧设置紫色装饰元素。
任何帮助表示感谢,谢谢!
您可以使用CSS :before
和:after
选择的组合,并fontAwesome来实现这一目标。看看我的例子,并根据需要进行调整。
h1 {
display: block;
border-bottom: solid 1px #6B1E69;
position: relative;
width: 450px;
color: #6B1E69;
}
h1:after {
content: '';
width: 100%;
height: 25px;
position: absolute;
border-bottom: solid 3px #6B1E69;
margin-bottom: -5px;
bottom: 0;
left: 0;
}
h1:before {
content: '\f18c';
font-family: fontAwesome;
height: 25px;
position: absolute;
margin-bottom: -10px;
bottom: 0;
right: -30px;
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1> Thi sis your header text</h1>
您有几种选择来实现这一目标:
声明装饰元素作为第二背景图像,并将其位置与不重复的权利。
浏览器支持:very good
你可以把你的形象,因为它是和它声明为边界图像。
浏览器支持:good (with some exceptions)
使用具有装饰性元件作为背景图像的伪元件,并相应地将其放置在下部拐角。
浏览器支持:excellent - all browsers support this (even down to IE8)
太棒了,感谢您的无限可能! – enne87
我不知道,你怎么可以完全使用CSS实现这一双边框效果,但在一定程度上,这是可能的。 或者你可以使用多个图像,甚至是一个完整的图像的边界和重复它。
注意:在类的下方给出1px border-bottom会带来与图像类似的边框效果。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 80%;
margin: 0 auto;
}
.heading {
color: purple;
margin: 10px 0 15px;
}
.under {
width: 98%;
display:block;
position: relative;
border-bottom: 1px solid purple;
}
.under:after,
.under:before {
content: '';
position: absolute;
margin-top:2px;
top: 100%;
}
.under:after {
border-bottom: 3px solid purple;
width: 98%;
display: block;
z-index: 10;
left: 0;
}
.under:before {
background: #fff url('http://i.stack.imgur.com/SHc6G.png')no-repeat right top;
width: 33px;
height: 28px;
display: block;
right: 0;
top: 100%;
left: auto;
float: right;
margin-top: -11px;
z-index: 100;
}
<div class="container">
<h1 class="heading under">
Some heading
</h1>
</div>
这是我只是纯粹的HTML和CSS得到的最接近和没有图像
*{box-sizing:border-box;}
.container {
padding-right:30px;
position:relative;
width:300px
}
h2 {
color:purple;
border-bottom:1px solid purple;
padding:bottom:5px;
margin-bottom:1px;
}
.line {
height:3px;
background-color:purple;
margin:0;
position:relative;
}
.line:after {
width: 6px;
height: 6px;
background: white;
border:4px solid purple;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:absolute;
right: -20px;
bottom: -5px;
z-index: 100;
content: "";
}
.line:before {
width: 16px;
height: 16px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:absolute;
right: -22px;
bottom: -6px;
z-index: 100;
content: "";
}
.shape {
width: 10px;
height: 10px;
background: purple;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position:absolute;
z-index: 100;
position:absolute;
right:0px;
bottom:0px;
}
.shape:before {
width: 10px;
height: 10px;
background: purple;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position:absolute;
left:0px;
top:5px;
z-index: 100;
content: "";
}
.shape:after {
width: 10px;
height: 10px;
background: purple;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position:absolute;
left: 5px;
top: 2px;
z-index: 100;
content: "";
transform: scale(1,0.8);
}
<div class="container">
<h2>You header</h2>
<div class="shape"></div>
<div class="line"></div>
</div>
酷,但你总是需要这两个额外的div,但。尽管如此,一个纯粹的HTML和CSS解决方案,很好! – enne87
是的。我使用2xbefore和2xafter,因此需要额外的html标记。我希望在不久的将来,我们将能够为每个html元素插入尽可能多的伪元素。 –
使用一个SVG
与备用图片+实bg-color是一个很好的解决方案。我会考虑将图像编码到HTML
,并避免将其作为背景图像。原因是你需要一个包含图像的元素的硬件高度(或最小高度),并且今天的网络可以在具有硬件高度或宽度的多个设备上使用,这可能是一种负面体验,并且更好避免,IMO。
将图像作为块级元素(或行内块)运行时,将为您提供宽度灵活性,而无需显示问题或额外样式。
至于布局的话,你可以构建它作为2张独立的图像,将每个图像转换成一个div和风格display:table-cell;
包装/容器DIV W/display:table;
里面,把width:100%;
边界图像在整个容器伸展并将小装饰图像推向右侧。
This is a good thread for opinions on how to handle the image; css bg vs. inline.
尽管我对svg部分达成了一致,但我会极力不鼓励使用您的解决方案:此问题仅涉及样式/布局,与页面的语义无关。因此,它不应该出现在HTML标记中(甚至更糟糕的是两个单独的元素)。显示表格单元格在这里也是一个非常不恰当的用法。像我在我的回答(例如边界图像)中所陈述的那样,有足够的合理选项可以以响应和多设备兼容的方式处理。 – Christoph
由于我们不是在这里争辩,我只是不同意使用表格布局样式在这种情况下是“非常不合适的”。尽管上述答案中的解决方案都是很好的选择。 – Beepye
没有必要争论。表格布局用于表格数据。如果您将它用于表示目的,您就错了。如果你要添加额外的非语义标记,至少要做适当的样式,例如带有flexbox或网格布局,其中明确引入高级样式。 – Christoph
这听起来像的东西,会得到更好的投入使用一个基本的PNG图像,或实现最大的灵活性的SVG。一个提示可能有帮助;在支持的浏览器上,可以通过在一个属性中依次指定所有背景图像(或背景渐变等),然后赋予每个未来背景属性的倍数来实现。 (细节将在CSS属性的文档中) – Katana314
嘿,多个背景图像是我从来没有听说过的。很酷的提示,谢谢队友! – enne87