CODEWITHSUNDEEP
htmlcss
Tomas Bajoras
Tomas Bajoras

Reputation: 349

Text with a white line in the middle CSS

I have a task to make nice text with a white line in the middle of text, like in this picture below. Is it possible to make it with css? Here is Fiddle

enter image description here 

.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>

Upvotes: 3

Views: 1132

Answers (4)

Nenad Vracar
Nenad Vracar

Reputation: 122087

You could do this with SVG and Linear Gradient. Here's another 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>

There is another way to do this with overlapping elements that are that have position: absolute and fixed height and most important part is overflow: hidden on span's

@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>

Upvotes: 5

Turnip
Turnip

Reputation: 36702

This is easy in webkit, as I mentioned in the comment above, thanks to the non-standard -webkit-text-fill-color. But it's trickier in non-webkit browsers.

You could use an SVG linearGradient to achieve the same effect. This seems to work well in everything I've tested:

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>

Upvotes: 3

Ahs N
Ahs N

Reputation: 8386

This is how I did it:

.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

Upvotes: 2

andnowchris
andnowchris

Reputation: 149

Add a class to your H1 element.

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

then add this too your CSS:

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

Upvotes: -2

Related Questions