welche Textdekoration wird hier verwendet?

Question

https://image.ibb.co/jCLY36/Logo2.png

Ich zeichnete diese Textdekoration an der Point Photography. Wie realisiere ich es in CSS?

Der Farbcode ist #EDEFEC und es geschieht auf Hover

Answer 1

Es ist kein text-decoration, es ist ein einfacher :hover Effekt mit einem padding, wie:

h1 span:hover:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #eee; 
    transform: scale(1.3); 
} 

Werfen Sie einen Blick auf dem snippet:

body { 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    word-spacing: 1.5rem; 
 
} 
 

 
h1 span { 
 
    position: relative; 
 
    cursor: default; 
 
} 
 

 
h1 span:hover:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #eee; 
 
    transform: scale(1.3); 
 
    z-index: -1; 
 
} 
 

 
p { 
 
    color: #aaa; 
 
}

<h1>THIS IS A <span>TEXT</span></h1> 
 
<p>Hover on the word 'TEXT' above</p>

Hoffe, das hilft!