傍晚的陽光通過葉子過濾會產生寧靜,溫暖的光芒。藝術家精心運用這種“斑駁的光”來實現柔和,令人著迷的效果。我們可以在網絡設計中復制這種迷人的外觀,將新的生命呼吸到平凡的內容中,通過將其應用於照片和插圖。該教程展示了一種基於CSS的簡單方法。
在深入探討代碼之前,了解Light的構圖至關重要。它由大型,圓形或橢圓形的光斑塊組成,上面散佈著葉子鑄造的陰影 - 光滑過葉子和樹枝。這些陰影通常表現出柔軟的,模糊的邊緣,這是光線穿過許多,較少定義的空間的結果,在光線從遠處施放陰影時散射和扭曲。
觀察純白色的牆壁和用斑駁的光照亮的牆壁之間的區別:[說明性比較會在這裡進行]
該教程使用文本(字母,符號,表情符號)重新創建效果,利用CSS陰影並融合模仿自然的藝術性。還將探索替代方法。
我們將使用文本元素(字母,符號,表情符號)來表示光斑。這些將是蒼白,半透明的顏色,旨在產生柔軟的,擴散的效果,而不是鮮明的對比。橢圓形或長方形的字符是理想的,反映了斑駁的光的各種形狀。實驗是實現所需美學的關鍵。在此示例中,我們將使用?,?和\作為其橢圓形和傾斜的形式。
這些字符包裹在.backdrop
父元素中的段落中:
<div class="backdrop"> <p class="shapes">?</p> <p class="shapes">?</p> <p class="shapes">\ \</p> </div>
.backdrop
充當光線和陰影的表面。它使用背景圖像進行紋理,具有明顯的寬度和高度,並且overflow: hidden
以包含超越其邊界的陰影。 CSS電網將光元素集中為中心:
.backdrop { 背景:中心 /封面no-repeat URL('image.jpeg'); 寬度:400px;身高:240px; 溢出:隱藏; 顯示:網格; } .backdrop> * { 網格區域:1/1; }
精確的形狀對齊並不關鍵;重疊就足夠了。可以隨意調整定位,以獲取獨特的亮光圖案。
表情符號的關鍵CSS屬性是:透明顏色,半透明的黑色背景(使用rgba()
),模糊的白色文本遮陽,大字體大小和用於平滑的mix-blend-mode
:
。形狀{ 顏色:透明; 背景色:RGBA(0,0,0,0.3); 文本陰影:0 0 40px #fff; 字體:Bolder 320pt/320pt Monospace; 混合模式:乘法; }
mix-blend-mode: multiply
元素的顏色與其容器混合在一起,從而使背景可以通過淺色顯示,同時保持深色,從而產生更自然的淡淡的光效果。
為了增強背景圖像的亮度, filter: brightness(1.6)
。另外, background-blend-mode
可以混合多個背景。表情符號也可以用作背景圖像,如下所示:
<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace; color: transparent; text-shadow: 0 0 40px floralwhite; background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml"> ? </div> </foreignobject></svg>
對於自定義圖像形狀,使用CSS blur()
濾波器模糊邊緣以形成軟光效果。 @supports
可用於特定於瀏覽器的陰影調整。
讓我們重新審視初始示例並添加內容:
<div class="backdrop"> <p class="shapes">?</p> <p class="shapes">?</p> <p class="shapes">\ \</p> </div>
暑假的十大旅遊景點
這是最受歡迎的地方...
.backdrop
和.shapes
樣式保持不變。 <code>.content
使用.backdrop:hover
上的@keyframes
添加了一個微妙的動畫:
.backdrop:懸停>。形狀:nth-type(1){ 動畫:2s輕鬆無限的備用移動; } .backdrop:懸停>。形狀:type(2):徘徊{ 動畫:4s輕鬆無限的備用移動1; } @keyframes移動{ 來自{text -indent:-20px; } 到{text-indent:20px; } } @keyframes move-1 { 來自{text -indent:-60px; } 到{text-indent:40px; } }
動畫text-indent
會產生微妙的動作,模擬雲的變化並改變光方向。
該教程演示瞭如何使用CSS創建斑駁的光效果,從自然和藝術中汲取靈感。關鍵在於使用模糊的文本陰影將顏色應用於文本元素,以使陰影的光和半透明背景。具有足夠對比度的紋理背景完成了效果。
以上是寧靜的CSS發光效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!