《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環(huán)繞）

longmon 發(fā)布于2019-04-23 13:14 / 1119人閱讀

摘要：本篇主要記錄揭秘一書中后面幾章的常用技巧。文字環(huán)繞的重點在于即文字圍繞著路徑來顯示。

本篇主要記錄《CSS3揭秘》一書中后面幾章的常用技巧。

1、偽元素換行

先看下HTML代碼，如下


    
        當愛的故事剩聽說
        我找不到你單純的面孔

默認顯示效果：

一般情況下，我們喜歡直接在第一個span元素后面加個換行符，但是它對于語義來說并不友好,或者將第一個span設置成塊元素。這里說的換行技巧是使用 偽元素+字符 來實現(xiàn)：

.text {
    span:first-child:after{
        display: block;
        content: "A"
    }
}

2、文字條紋背景

之前有遇到這樣一個場景，一個標簽，里面的數(shù)據(jù)是后臺傳入的數(shù)據(jù)源（字數(shù)不定），要求自動換行，且有條紋背景，當時首先想到的是使用js+css的方式來實現(xiàn)。但是現(xiàn)在想來css3也完全可以實現(xiàn)的。
原始代碼：



    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.

默認顯示：

效果分析：
我們現(xiàn)在想給文字加入條紋背景，想到我們在上篇提到的條紋效果沒？這里也是一樣的，直接上代碼，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中的老話題，在之前我們可以采用很多種方式來處理包括文字居中，塊狀元素居中，定寬定高居中，不定寬不定高的居中。。。常規(guī)的解決方法有：

position+margin方法
line-height方法
table-cell方法

這里不再贅述，這邊要匯總的是屬于css3的新方法。
案例演示：要求box（知道寬高）在視圖窗口居中，item（不知寬高）在box視口居中，基本樣式如下：


    
        幸福就像穿鞋子 不舒服的 都只是腳鐐

        倒不如去赤腳奔跑

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的新的視窗單位，相對的不是父節(jié)點而是由視窗大小來決定的。它可以用戶相對于視口做居中處理以及對body元素設置寬高（無需再設置根節(jié)點），適用于做一些響應式的布局。

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、文字環(huán)繞效果

先上個效果圖：

華麗麗的大愛心，再上下代碼，是不是一臉萌？

path

path元素是SVG中最強大的一個，它可以繪制很多不同的形狀。path元素的形狀是通過屬性d來定義的，屬性d的值是一個“命令+參數(shù)”的序列，然后就寫命令。參數(shù)說明：

方法	說明
M	移動到的點的x,y坐標
L	L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。
H	繪制平行線
V	繪制垂直線
Z	從當前點畫一條直線到路徑的起點（回到起點）
A	繪制弧線
Q	二次貝塞爾曲線 Q x1 y1, x y
C	三次貝塞爾曲線 C x1 y1, x2 y2, x y

畫不出來也是沒關系的，其實現(xiàn)在線上有很多的圖形path生成工具，可以幫助我們快速生成path，但是我們需要知道其中字母表示的意思。比如上面的愛心，就是先移動到坐標點(m)，然后繪制2條曲線(c)，最后回到原點(z)。

textPath

文字環(huán)繞的重點在于textPath即文字圍繞著路徑來顯示。定義完path后使用href引用即可。是不是很簡單了~

云服務器 GPU云服務器文字垂直居中 html使文字垂直居中文字環(huán)繞圖片文字垂直滾動

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1614.html

CSS實現(xiàn)模擬float: center文字左右環(huán)繞圖片的效果

摘要：什么是文字左右環(huán)繞圖片就是下圖的效果效果的代碼可以點擊這里查看在中，并沒有這種設置，但是我們可以通過一些小技巧來模擬出類似的效果。下面，就要使用一些技巧來實現(xiàn)左右環(huán)繞的文字效果了。什么是文字左右環(huán)繞圖片？就是下圖的效果：showImg(https://segmentfault.com/img/bVbr3Wt?w=627&h=461); 效果的CSS代碼可以點擊這里查看在CSS中，并...

ShevaKuilin 2019-08-02 16:15 評論0 收藏0
CSS實現(xiàn)模擬float: center文字左右環(huán)繞圖片的效果

摘要：什么是文字左右環(huán)繞圖片就是下圖的效果效果的代碼可以點擊這里查看在中，并沒有這種設置，但是我們可以通過一些小技巧來模擬出類似的效果。下面，就要使用一些技巧來實現(xiàn)左右環(huán)繞的文字效果了。什么是文字左右環(huán)繞圖片？就是下圖的效果：showImg(https://segmentfault.com/img/bVbr3Wt?w=627&h=461); 效果的CSS代碼可以點擊這里查看在CSS中，并...

you_De 2019-08-29 18:45 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學習！

摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

MasonEast 2019-08-02 12:03 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

趙連江 2019-08-29 17:20 評論0 收藏0