CSS3實現字元的美化方法

來源:互聯網
上載者:User
CSS不僅是一種技術,也是一種藝術,如果你運用的好,可以用它創造出各種神奇的效果,隨著現代瀏覽器技術的進步,CSS3的革新,也給了程式員更大的空間和可能性來發揮自己的奇思妙想。那麼如何用CSS美化半個字元。其實就是把一個字元劈成兩半,一半是A樣式,一半是B樣式。當然,大家都知道,不論是中文字元還是西文字元,單個字元否是無法拆分的,它們是文字的最新單元,如果是美化半個詞或半個句子,這估計大家都知道如何做,也很常見。但半個字元如何美化呢?當然有辦法,這裡需要的就是藝術。

先看看需要的:

左邊是一種顏色,右邊是一種顏色。如果是用圖片做,這當然很容易,但圖片有圖片的局限性,比如不能動態產生字元樣式。下面我們就來看看用純CSS如何?這樣的效果。

CSS美化半個字元的基本思路

思路很簡單,就是一個字寫兩遍,分別顯示一半。思路很清楚,也很簡單,但如何?呢?當然不能真的把一個字寫兩遍,這樣也太愚蠢了,而且當使用者拷貝粘貼這段文字時會粘出同樣的文字兩份。這裡就需要用到CSS虛擬元素:before和:after,記住這個“虛擬元素”的“偽”字,表明它本來是不存在的。我們的方法就是在虛擬元素裡放置相同的字元,只顯示半個,而原字元顯示另外一半,最後把它們拼成一個字。

CSS代碼

.halfStyle {    position:relative;    display:inline-block;    font-size:80px; /*  任何寬度都可以 */    color: black; /* 任何顏色,或透明 */    overflow:hidden;    white-space: pre; /* 處理空格 */}.halfStyle:before {    display:block;    z-index:1;    position:absolute;    top:0;    left:0;    width: 50%;    content: attr(data-content); /* 虛擬元素的動態擷取內容 */    overflow:hidden;    color: #f00;}

HTML代碼

<p>單個字元</p><span class="halfStyle lazy " data-content="風">風</span><span class="halfStyle lazy " data-content="流">流</span><span class="halfStyle lazy " data-content="倜">倜</span><span class="halfStyle lazy " data-content="儻">儻</span><hr/><p>用指令碼自動美化:</p><span class="textToHalfStyle lazy ">戀愛容易婚姻不易,且行且珍惜。</span>

需要做的就是將.halfStyleCSS類應用到每個需要半邊美化的字元上。在上面的程式碼範例中,每個span裡都包含了一個字元,我們在上面放置了data-屬性,例如data-content="風",之後在虛擬元素裡我們使用了attr(data-content)方法,這樣.halfStyle:before就會變得動態,不需要你手工的寫入程式碼它們的內容。

對於多個字元需要美化的情況,我們可以建立一段jQuery代碼自動將所有有.textToHalfStyleCSS類字元添加這種效果:

jQuery(function($) {    var text, chars, $el, i, output;    // 遍曆所有字元    $('.textToHalfStyle').each(function(idx, el) {        $el = $(el);        text = $el.text();        chars = text.split('');        // Set the screen-reader text        $el.html('        <span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">'         + text + '</span>'        );        // Reset output for appending        output = '';        // Iterate over all chars in the text        for (i = 0; i < chars.length; i++) {            // Create a styled element for each character and append to container            output += '<span aria-hidden="true" data-content="' + chars[i] + '">' + chars[i] + '</span>';        }        // Write to DOM only once        $el.append(output);    });});

這樣,不論是一段文字還是整篇文字,我們都能一次搞定,不必手工一個一個的設定,也不必一個一個的做圖!

進階做法:左右半個字元都用虛擬元素產生

上面我們的做法中,文字的左半邊是用:before虛擬元素產生的,而右半邊使用的是原文字。但實際上我們可以將左右兩邊都用虛擬元素產生——右半邊用:after實現。

CSS代碼

.halfStyle {    position:relative;    display:inline-block;    font-size:80px; /* or any font size will work */    color: transparent; /* hide the base character */    overflow:hidden;    white-space: pre; /* to preserve the spaces from collapsing */}.halfStyle:before { /* creates the left part */    display:block;    z-index:1;    position:absolute;    top:0;    width: 50%;    content: attr(data-content); /* dynamic content for the pseudo element */    overflow:hidden;    pointer-events: none; /* so the base char is selectable by mouse */    color: #f00; /* for demo purposes */    text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the right part */    display:block;    direction: rtl; /* very important, will make the width to start from right */    position:absolute;    z-index:2;    top:0;    left:50%;    width: 50%;    content: attr(data-content); /* dynamic content for the pseudo element */    overflow:hidden;    pointer-events: none; /* so the base char is selectable by mouse */    color: #000; /* for demo purposes */    text-shadow: 2px 2px 0px #0af; /* for demo purposes */}

你會發現,我們的實現方法可以很靈活,現在表象上是有三個字重疊,我們可以讓每個字都各佔1/3,這樣,我得到一個三色字。上面這些例子都是左右分色,其實我們也可以讓它上下分色或上中下分色。

作為Web程式員也是如此,只有我們用於探索和創新,有很多任務我們都可以用更簡單,更方便的方法完成。你有此同感嗎?

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。