真ん中に白い線が入ったテキスト

Question

私は下の図のようにテキストの真ん中に白い線で素敵なテキストを作るという仕事をしています。 cssとすることは可能ですか？ここでFiddle

.container{ 
 
    height:200px; 
 
    width:400px; 
 
    background-color:#EB8A1C; 
 
} 
 

 
.container h1{ 
 
    color:#2CDB1D; 
 
    text-align: center; 
 
    padding-top:40px; 
 
    font-size:400%; 
 
}

<div class="container"> 
 
    <h1> filosofia </h1> 
 
</div>

Answer 1

あなたがSVGとLinear Gradientでこれを行うことができます。ここでは別のDemo

svg { 
 
    border: 1px solid black; 
 
    background: #EB8A1C; 
 
} 
 

 
text { 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
}

<svg width="250px" height="50px"> 
 
    <defs> 
 
    <linearGradient id="textGradient" x1="0" x2="0" y1="0" y2="1"> 
 
     <stop offset="0%" stop-color="#A5DE4A" /> 
 
     <stop offset="45%" stop-color="#A5DE4A" /> 
 
     <stop offset="50%" stop-color="white" /> 
 
     <stop offset="60%" stop-color="#A5DE4A" /> 
 
     <stop offset="100%" stop-color="#A5DE4A" /> 
 
    </linearGradient> 
 
    </defs> 
 

 
    <text fill="url(#textGradient)" x="0" y="35">LOREM IPSUM</text> 
 
</svg>

はposition: absoluteと固定heightを持っており、最も重要な部分はspanの

@import url(https://fonts.googleapis.com/css?family=Montserrat:700); 
 

 
.text { 
 
    width: 200px; 
 
    height: 50px; 
 
    padding: 10px; 
 
    background: #EB8A1C; 
 
    color: white; 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-weight: 700; 
 
} 
 

 
span { 
 
    font-size: 45px; 
 
    left: 20px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 

 
span:nth-child(1) { 
 
    color: #A5DE4A; 
 
    height: 50; 
 
} 
 

 
span:nth-child(2) { 
 
    color: white; 
 
    height: 33px; 
 
} 
 

 
span:nth-child(3) { 
 
    color: #A5DE4A; 
 
    height: 29px; 
 
}

<div class="text"> 
 
    <span>filosofia</span> 
 
    <span>filosofia</span> 
 
    <span>filosofia</span> 
 
</div>

に overflow: hiddenですされ、重複要素でこれを行うための別の方法があります

Answer 2

は、あなたのH1要素にクラスを追加しています。

<h1 class="strike">....</h1> 

これもあなたのCSSを追加します。

.strike{ 
text-decoration: white line-through; 
} 

Answer 3

これは、私はそれをやった方法です：

.container h1 { 
    text-align: center; 
    padding-top: 40px; 
    font-size: 400%; 
    background: -webkit-linear-gradient(#2CDB1D 68%, white 70%, #2CDB1D 0%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

Here is the JSFiddle demo

Answer 4

これは、上記のコメントで述べたように、非標準の-webkit-text-fill-colorのおかげで、Webkitでは簡単です。しかし、Webkit以外のブラウザでは扱いにくいです。

SVG線形勾配を使用すると、同じ効果を得ることができます。これは私がテストしたすべてのものにうまく動作するようです：ライン・スルー：

body { 
 
    background: orange; 
 
} 
 

 
.svg_text, h1 { 
 
    font-size: 72px; 
 
    font-weight: bold; 
 
    margin: 0; 
 
} 
 

 
/* webkit-only ... */ 
 
.fancy { 
 
    background: #8bed89; 
 
    background: -moz-linear-gradient(top, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%); 
 
    background: -webkit-linear-gradient(top, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%); 
 
    background: linear-gradient(to bottom, #8bed89 0%, #8bed89 45%, #ffffff 51%, #8bed89 56%, #8bed89 100%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<h4>Webkit only...</h4> 
 

 
<h1 class="fancy"> 
 
    filosofia 
 
</h1> 
 

 
<h4>Others...</h4> 
 

 
<svg height="60" width="500"> 
 
    <defs> 
 
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
 
     <stop offset="0%" style="stop-color:rgb(139,237,137); stop-opacity:1"/> 
 
     <stop offset="45%" style="stop-color:rgb(139,237,137); stop-opacity:1"/> 
 
     <stop offset="50%" style="stop-color:rgb(255,255,255); stop-opacity:1"/> 
 
     <stop offset="55%" style="stop-color:rgb(139,237,137); stop-opacity:1"/> 
 
     <stop offset="100%" style="stop-color:rgb(139,237,137); stop-opacity:1"/> 
 
    </linearGradient> 
 
    </defs> 
 
    <text x="0" y="50" fill="url(#gradient)" class="svg_text"> 
 
    filosofia 
 
    </text> 
 
</svg>