《css揭祕》下(偽元素,文字背景,垂直居中技巧,文字環繞)
本篇主要記錄《CSS3揭祕》一書中後面幾章的常用技巧。
1、偽元素換行
先看下HTML程式碼,如下
<div class="demo1">
<div class="text">
<span>當愛的故事剩聽說</span>
<span>我找不到你單純的面孔</span>
</div>
</div>
預設顯示效果:
一般情況下,我們喜歡直接在第一個span
元素後面加個換行符<br>
,但是它對於語義來說並不友好,或者將第一個span
設定成塊元素。這裡說的換行技巧是使用 偽元素+字元
.text {
span:first-child:after{
display: block;
content: "\A"
}
}
2、文字條紋背景
之前有遇到這樣一個場景,一個標籤,裡面的資料是後臺傳入的資料來源(字數不定),要求自動換行,且有條紋背景,當時首先想到的是使用js+css
的方式來實現。但是現在想來css3也完全可以實現的。
原始程式碼:
<style> .demo{ width: 150px; line-height: 30px; } </style> <div class="demo"> When I was young, my homesickness was a small stamp, I was here, my mother was there. After growing up, my homesickness was a narrow ticket, I was here, my bride was there. </div>
預設顯示:
效果分析:
我們現在想給文字加入條紋背景,想到我們在上篇提到的條紋效果沒?這裡也是一樣的,直接上程式碼,2行程式碼搞定,so amazing!
.demo{
background-image: linear-gradient(rgba(255, 0, 0, 0.24) 50%, rgba(0, 0, 255, 0.25) 0);
background-size: 100% 60px;
}
3、垂直居中新技巧
垂直居中是CSS中的老話題,在之前我們可以採用很多種方式來處理包括文字居中,塊狀元素居中,定寬定高居中,不定寬不定高的居中。。。常規的解決方法有:
- position+margin方法
- line-height方法
- table-cell方法
這裡不再贅述,這邊要彙總的是屬於css3的新方法。
案例演示:要求box(知道寬高)在檢視視窗居中,item(不知寬高)在box視口居中,基本樣式如下:
<div class="box">
<div class="item">
幸福就像穿鞋子 不舒服的 都只是腳鐐<br>
倒不如去赤腳奔跑
</div>
</div>
<style>
.box {
width: 500px;
height: 400px;
border: #b8b8b8 1px dashed;
.item {
display: inline-block;
background-color: aquamarine;
padding: 20px;
}
}
</style>
position + translate
.box {
position: relative;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
.item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); // 表示向左移動自身寬的一半,向上移動自身高的一半
}
}
先通過定位的方式,將元素向左邊和頂部移動50%,這裡的50%是相對於relative的父元素的,然後使用 translate(-50%,-50%)
移動自身寬高的50%,沒錯,這裡的重點就是,translate移動的是自身的寬高,不管是否知道自身的寬高,是不是比margin更靈活了?
vw + vh
vm
和vh
是一種css3的新的視窗單位,相對的不是父節點而是由視窗大小來決定的。它可以使用者相對於視口做居中處理以及對body元素設定寬高(無需再設定根節點),適用於做一些響應式的佈局。
vm
:視窗寬度的百分百(1表示1%)vh
:視窗高度的百分百(1表示1%)vmin
:當前 vw 和 vh 中較小的一個值vmax
:當前 vw 和 vh 中較大的一個值
因此可以將box的程式碼改為:
.box{
margin: 50vh auto 0;
transform: translateY(-50%);
}
flex
其實最好的佈局方式就是使用flex
啦!熟讀一下阮大神的 flex教程 就可以對各個屬性一目瞭然了~這裡,我們可以把box設定成容器(display:flex
),再將 justify-content
和 align-items
設定成 center
就可以使item垂直居中了。
.box{
display: flex;
justify-content: center;
align-items: center;
}
最終方案:上面三種方法,單獨使用都可以達到垂直居中的效果,我們也可以三合一來使用,達到程式碼最簡,即僅僅對box進行樣式設定:
.box{
margin: 45vh auto 0;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
}
最終效果:
4、文字環繞效果
先上個效果圖:
華麗麗的大愛心,再上下程式碼,是不是一臉萌?
<svg width="400" height="400" class="demo">
<path id="svgLove"
d="m209.19776,126.00144c63.28732,-157.11301 311.2491,0 0,202.00244c-311.2491,-202.00244 -63.28732,-359.11545 0,-202.00244z"
stroke-width="0"
fill="red"/>
<text stroke="#780879">
<textPath xlink:href="#svgLove">
you feel lonely Do you feel blue Alright too Leaves dancing in the wind No brakes in your broken world Don't prey happy~
</textPath>
</text>
</svg>
path
path
元素是SVG中最強大的一個,它可以繪製很多不同的形狀。path元素的形狀是通過屬性d來定義的,屬性d的值是一個“命令+引數”的序列,然後就寫命令。引數說明:
方法 | 說明 |
---|---|
M | 移動到的點的x,y座標 |
L | L命令將會在當前位置和新位置(L前面畫筆所在的點)之間畫一條線段。 |
H | 繪製平行線 |
V | 繪製垂直線 |
Z | 從當前點畫一條直線到路徑的起點(回到起點) |
A | 繪製弧線 |
Q | 二次貝塞爾曲線 Q x1 y1, x y |
C | 三次貝塞爾曲線 C x1 y1, x2 y2, x y |
畫不出來也是沒關係的,其實現在線上有很多的圖形path生成工具,可以幫助我們快速生成path,但是我們需要知道其中字母表示的意思。比如上面的愛心,就是先移動到座標點(m),然後繪製2條曲線(c),最後回到原點(z)。
textPath
文字環繞的重點在於textPath
即文字圍繞著路徑來顯示。定義完path後使用href
引用即可。是不是很簡單了~