<tt id="q85uj"><address id="q85uj"></address></tt>

  1. <tt id="q85uj"><span id="q85uj"></span></tt>
    <i id="q85uj"><address id="q85uj"></address></i>

    <u id="q85uj"></u>

  2. <b id="q85uj"><address id="q85uj"></address></b>
    <ruby id="q85uj"></ruby><acronym id="q85uj"></acronym>
      <tt id="q85uj"><address id="q85uj"></address></tt>
      Menu

      將半色調效果與代碼結合的示例

      <返回列表

      半色調圖案,那些濃密的斑點圖案,是印刷品和網頁設計的支柱。同時傳統上作為一種在印刷品中忠實再現圖像的手段,它也成為一種獨特的風格。

      今天,半色調圖案被用作背景,或者為圖像提供一些超現實的特效。而且,隨著CSS和JavaScript的發展,設計者也找到了一種將效果集成到代碼中的方法。結果是驚人的。

      讓我們看看如何通過代碼實現半色調的一些示例。正如您將看到的,有許多不同的方法和技術將這個經典的模式帶到web上。

      半色調您的貓(或非貓)照片

      這可能是最熟悉的半色調實現。它包括將效果添加到現有照片(在本例中是一只貓)。但是這個片段也是完全可定制的。例如,可以將點替換為表情符號或文本。此外,還可以更改每個點的大小。而且,是的,你可以把貓換成一張臉——但為什么呢?

      看到鋼筆了嗎
      中間調ycw提供

      按半色調

      這里有一個非常有創意的使用半色調。有一個微妙的模式顯示在這個按鈕上,稍微粗體懸停效應. 但點擊會打開一個高對比度的圖案,肯定會吸引你的注意力。

      看到鋼筆了嗎
      半色調按鈕泰勒·亨特

      泄露秘密

      這個手電筒這種效果在最近一段時間很流行。在這里,它與半色調模式相結合,“照亮”隱藏文本。這是一個有趣的互動,模式帶來了一點復古/野蠻的氛圍。

      看到鋼筆了嗎
      顯示隱藏文本泰勒·德雷特

      以更微妙的語氣

      沒有法律規定半色調一定要響亮,這個片段就是證據。半色調效果完美地融合到一個交叉線圖案中。結果是獨特而微妙的。使用純CSS構建的獎勵點數。

      看到鋼筆了嗎
      半色調交叉圖案德文·普萊斯

      遠距懸停效果

      這是科幻片里的片段。一張藍底黑的半色調照片從屏幕的另一邊凝視著我們。把你的光標放在上面,圖像的一部分就會消失。

      看到鋼筆了嗎
      半色調像差顆粒狀的吉爾

      無BS視差

      另一個超現實的效果,這張照片的特點是令人目眩的彩色點陣列。更重要的是,移動光標會帶來一個3D視差效果,在主圖像上方顯示一個微妙的輪廓。增加的維度使效果更加有趣。

      看到鋼筆了嗎
      半色調視差作者:埃里克·杰克遜·伍德

      二人一組

      多虧了CSS混合模式,半色調效果可以添加到任何東西。在這個例子中,一個美麗的混合放置在各種照片的頂部。懸停在其中一個上面就會顯露出它的本色。這是一個非常實際的用途,很有說服力,但又不過分。

      看到鋼筆了嗎
      CSS混合模式作者:Jos van Weesel

      比你的平均文本陰影

      讓我們用另一個實際用例來結束這件事。這里我們有一些基本的輪廓排版利用偏移陰影。前兩個示例使用純色陰影,效果很好。但第二組的特點是半色調圖案,這提供了一個更藝術的感覺。

      看到鋼筆了嗎
      筆劃、陰影半色調效果按標記

      創新模式

      將代碼與經典圖像效果相結合的偉大之處在于它打開了一個全新的可能性世界。當然,我們可以在設計元素中添加半色調圖案,但為什么要到此為止呢?

      設計師們正在為這些效果找到新的聰明的用途。在上面的代碼片段中,半色調的使用既傳統又創新。舊的界限只有在我們想要的時候才存在。

      想看看更多的半色調圖案的例子嗎?看看我們的CodePen系列用于其他創造性用途


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      夫妻性生生活视频 - 视频 - 在线观看 - 电影影院 - 品赏网