JavaScript >> Javascript 文檔 >  >> Tags >> CSS

5 種帶有 CSS 形狀和濾鏡的精美圖像效果

今天我們為你準備了五張展示現代 CSS 力量的背景圖片。它們可以用作桌面壁紙、引人注目的登錄頁面,甚至可以用作印刷海報。在下面的文章中,我們還將介紹一些關鍵的 CSS 技術,以便您可以根據自己的喜好自定義它們或從頭開始製作自己的技術。

設計

Polyscape (poly =many,scape =風景)是一張包含多張圖片混合在一起的圖像,創造出非常令人愉悅的超現實主義視覺效果。通常這樣的設計是在 Photoshop 或其他圖像編輯軟件中完成的,但由於 CSS 屬性庫的不斷增長,現在只需使用簡單的 Web 技術就可以創建令人敬畏的多景觀!

您可以在我們創建的演示應用程序中查看設計。完整的源代碼以及導出為高清圖像的所有 polyscapes 可以從 下載 下載為 .zip 存檔 此頁面頂部附近的按鈕。

製作這些多景觀非常容易,我們在這個過程中獲得了很多樂趣。對於背景,我們使用了來自 Unsplash 的圖像。其他一切都是通過各種 CSS 形狀、變換和過濾器完成的。

CSS 形狀

這些設計使用了由 CSS 製成的各種幾何形狀。以下是它們的完成方式:

  • 正方形 - HTML 塊默認為矩形。只需選擇 heightwidth .為了讓它們側身,我們使用 transform: rotate(45deg); .
  • Circles - CSS 中的圓形可以通過添加 border-radius: 50%; 來創建 變成方形。
  • 三角形和菱形 - 感謝 clip-path .我們最近在我們的文章 CSS Triangles without Ugly Hacks 中詳細介紹了這一點。看看吧!

我們想要製作的另一個有趣的 CSS 形狀是一個內部透明但有一個圖像作為邊框的正方形:

事實證明有一個 CSS 規範可以做到這一點 - 它被稱為 border-image 並將圖像的路徑、邊框大小以及如何放置圖像作為參數。

background: transparent;
border: 25px solid transparent;
border-image: url(clouds.jpg) 25 stretch;

CSS 過濾器

由於我們在圖像背景之上添加圖像,因此在許多情況下,我們需要應用一些過濾器以使兩個視圖脫穎而出。大多數現代瀏覽器在 filter 下免費支持此功能 屬性。

它允許我們將色調從一種顏色轉換為另一種顏色,提高對比度,使一切變成黑白等等。以下是所有可用 CSS 過濾器的列表:

  • 灰度
  • 色相旋轉
  • 反轉
  • 對比
  • 模糊
  • 亮度
  • 不透明度
  • 飽和
  • 棕褐色
  • 投影

我們可以組合任意數量的過濾器,直到得到想要的結果:

filter: hue-rotate(60deg) contrast(200%) blur(2px);

結論

我們希望您喜歡我們的小 CSS 實驗。演示和所有代碼 100% 免費,您擁有使用、共享和更改設計的所有權利(我們的許可)。


Tutorial JavaScript 教程
  1. 學習 React 之前的 JavaScript 基礎知識

  2. 在 JavaScript 中組合函數

  3. TIL:Element.prototype.matches 可用於檢查元素是否包含某個類

  4. 可選鏈:?。 TypeScript 中的運算符

  5. Node.js 中的自定義錯誤類型

  6. 如何在 AWS 中輕鬆構建 Docker 映像

  7. PWA 到底是什麼?第1部分

  1. 如何在 JavaScript 中訪問對象鍵、值和條目

  2. 在沒有插件的 Wordpress 中添加腳註

  3. Javascript ES6 101:地圖方法

  4. 使用 React 和 GraphQL 創建 Reddit 克隆 - 09

  5. 為什麼沒有人談論 Razzle?

  6. Storebay:具有自定義管理和結帳功能的電子商務應用程序

  7. 破解 JS async/await 以鏈接 Monad

  1. 在 Web 上學習 Web 開發

  2. 前 15 個帶有時間線的 JavaScript 視頻

  3. 如何使用 Strapi 和 React 根據用戶數據/會員資格提供不同的內容

  4. 在 SwiftUI 中構建自定義圖表