html - 使用 css 创建一个程式化的 html 标题

标签 html css twitter-bootstrap

我正在为我的主页创建一些程式化的标题。我迷上了这种类型的标题,我想知道是否可以用 css 创建类似的东西。如果有一定的重要性,我会使用 Bootstrap 样式。

Stylized Header

它可能非常微弱,但标题后面有一个条纹“条”填充了容器的其余部分。我试着寻找它,但只找到了以标题前后一行为中心的标题。只有两行的标题类型(一行在标题顶部,一行在标题底部)也可能对我有用。

header 放在 .container 内,我希望 header 长度为 .container 的整个长度:

<div class="container">
  <h3><span>Projects</span></h3>
</div>

JSFiddle:https://jsfiddle.net/ozxk82j1/1/

提前致谢!

最佳答案

首先,HTML 无效。 spaninline 元素不能包含 h3,因为它们是 block 级的。

除此之外,这里使用重复线性渐变的伪元素没问题:

使用 flexbox 的例子,虽然你可以绝对定位伪元素,给它一个很长的宽度,并在 h3 上应用 overflow:hidden 任何......呃, 溢出。

h3 {
  display: flex;
}
h3::after {
  content: '';
  background: repeating-linear-gradient(135deg, 
    transparent, transparent 2px, 
    lightgrey 4px, lightgrey 6px);
  flex: 1;
  margin-left: .25em;
}
<div class="container">
  <h3>Projects</h3>
  <h3>Lorem ipsum dolor ipsum.</h3>
</div>

可以调整伪元素的高度(align-items:center 将使其垂直居中)并且可以使用 RGBA 颜色调整“线条”的不透明度。

h3 {
  display: flex;
  align-items: center;
}
h3::after {
  content: '';
  
  background: repeating-linear-gradient(135deg, 
    transparent, transparent 2px, 
    rgba(0,0,0,0.1) 4px, rgba(0,0,0,0.1)  6px);
  
  height:.5em;
  flex: 1;
  margin-left: .25em;
}
<div class="container">
  <h3>Projects</h3>
  <h3>Lorem ipsum dolor ipsum.</h3>
</div>

关于html - 使用 css 创建一个程式化的 html 标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36113560/

相关文章:

javascript - 在触发 x-editable 之前运行一个函数

javascript - onclick 事件仅适用于按钮,不适用于与按钮一起使用的字形

javascript - 使用 javascript 更改完整的 HTML 内容(不扭曲 CSS/Img 文件)

HTML、HEAD、BODY css 问题

html - HTML/CSS 中的定位/解析问题,以及向页面添加图像

CSS 帮助看星星

html - 即使在添加 btn 类后,bootstrap 提交按钮仍显示蓝色

javascript - 如何在按下按键时在 typeahead 中触发 ajax

html - CSS HTML 选择器与类选择器

jquery - 多个定位对齐的类被拉到一个 div 而不是它们各自的 div