[CSS] - Knock Out Text Using SVG or CSS by thedevchick

View this thread on: hive.blog | peakd.com | ecency.com

css · @thedevchick · Sep 21 '17 (edited)

$11.29

[CSS] - Knock Out Text Using SVG or CSS

<center>
![Screen Shot 2017-09-21 at 11.01.39 PM.png](https://steemitimages.com/DQmeHc3urGXMYuNR2FDDeY3o2Evyh7iDoTL1EdqTfNCQPka/Screen%20Shot%202017-09-21%20at%2011.01.39%20PM.png)
</center>

## Knock Out Text Is Slick!
In a world where apps and website are constantly pushing the limits to try to grab the users attention, doing something a little different can go a long way.

Knock Out Text lets you achieve that. It's hip, it slick, and if you have a nice image behind it, looks pretty awesome. It's such a simple effect that we've been able to achieve in image-editors for over a decade, but on the web it's still quite the rarity. You can even add some animation to it, and if it's subtle enough, using knockout you can take a tier 4 site right up to tier 5.

## SVG or Pure CSS?
Knock Out text in pure css is still not fully supported by all major browsers so while it's **much** easier to work with and has a **lot** less code, it may not be the right solution for you depending on the visitors to your site, and how important the knockout text is.

If you need the knock out text to be viewed by a wider audience then you have to go the SVG route. Below I've explained how to do both. You can checkout the demo by [clicking here](http://thedevchick.io.php7-29.phx1-1.websitetestlink.com/examples/knockout/)!

## The Code

### Pure CSS Route

##### HTML

<div class="pull-left">

![Screen Shot 2017-09-21 at 11.52.15 PM.png](https://steemitimages.com/DQmQ3cGKxnLw6Px7bNpN4HukCaMK3fyodkoUewL7c4ar8je/Screen%20Shot%202017-09-21%20at%2011.52.15%20PM.png)

</div>

<div class="pull-right">

```
<!DOCTYPE html>
<html>
	<head>
		<title>Knockout Example</title>
		<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<div class="knockout">
			<p>
				Knock Out Using CSS
			</p>
		</div>	
		</div>
	</body>
</html>
```

</div>

<hr>

##### CSS

<div class="pull-left">

![Screen Shot 2017-09-21 at 11.52.27 PM.png](https://steemitimages.com/DQmcFdu1GZr1bdDAHeoANCbQxyUv47mzrr7ywpBzW9TbFAm/Screen%20Shot%202017-09-21%20at%2011.52.27%20PM.png)

</div>

<div class="pull-right">

```
body{
	margin: 0;
	background: #000;
}
.knockout{
	background: url('coast.jpg') center center no-repeat;
	background-size: cover;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}
.knockout {
	color: red;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-text-fill-color: transparent;
	-moz-background-clip: text;
	text-fill-color: transparent;
	background-clip: text;
	font-size: 7em;
	width: 700px;
	margin: 50px auto;
	text-align: center;
}
```


</div>

<hr>

### SVG Route

##### HTML

<div class="pull-left">

![Screen Shot 2017-09-22 at 12.00.27 AM.png](https://steemitimages.com/DQmYxecfzAm9HTSzAtwzf585uRURX7XFbwoGc2yj43XpcKk/Screen%20Shot%202017-09-22%20at%2012.00.27%20AM.png)

</div>

<div class="pull-right">

```
<!DOCTYPE html>
<html>
	<head>
		<title>Knockout Example</title>
		<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<div class="svg-knockout">		
			<svg class="svg-knockout-text-container" width="100%" height="100%">			
				<rect class="svg-knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#svg-knockout-text)"/>				
				<mask id="svg-knockout-text">
					<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
					<text x="50%" y="100" fill="#000" text-anchor="middle">Knock Out</text>
					<text x="50%" y="200" fill="#000" text-anchor="middle">Using SVG</text>
				</mask>			
			</svg>			
		</div>
	</body>
</html>
```

</div>

<hr>

##### CSS

<div class="pull-left">

![Screen Shot 2017-09-22 at 12.00.18 AM.png](https://steemitimages.com/DQmdy42FKTaexNnr5fy4jkWeJRa9Mk7Gh6pxD7FcoqTN3G4/Screen%20Shot%202017-09-22%20at%2012.00.18%20AM.png)

</div>

<div class="pull-right">

```
body{
	margin: 0;
	background: #000;
}
.svg-knockout{
	background: url('coast.jpg') center center no-repeat;
	background-size: cover;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}
.svg-knockout {
	height: 100vh;
	width: 100%;
}

text {
	font-size: 7em;
}
```


</div>

<hr>

### Both Together (*as in the demo*)

##### HTML

<div class="pull-left">

![Screen Shot 2017-09-22 at 12.05.07 AM.png](https://steemitimages.com/DQmaVXRZk11i3qgBpdiBv3g8YmbHiQbscwEGYdgcAWHPb8x/Screen%20Shot%202017-09-22%20at%2012.05.07%20AM.png)

</div>

<div class="pull-right">

```
<!DOCTYPE html>
<html>
	<head>
		<title>Knockout Example</title>
		<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<div class="knockout">
			<p>
				Knock Out Using CSS
			</p>
		</div>
		<div class="svg-knockout">		
			<svg class="svg-knockout-text-container" width="100%" height="100%">			
				<rect class="svg-knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#svg-knockout-text)"/>				
				<mask id="svg-knockout-text">
					<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
					<text x="50%" y="100" fill="#000" text-anchor="middle">Knock Out</text>
					<text x="50%" y="200" fill="#000" text-anchor="middle">Using SVG</text>
				</mask>			
			</svg>			
		</div>
	</body>
</html>
```

</div>

<hr>

##### CSS

<div class="pull-left">

![Screen Shot 2017-09-22 at 12.05.20 AM.png](https://steemitimages.com/DQmen1L1rPRbBg6DGSiRThi8gvJXvyDPrFmJDPoYoLD2gLM/Screen%20Shot%202017-09-22%20at%2012.05.20%20AM.png)

</div>

<div class="pull-right">

```
body{
	margin: 0;
	background: #000;
}
.svg-knockout,
.knockout{
	background: url('coast.jpg') center center no-repeat;
	background-size: cover;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}
.svg-knockout {
	height: 100vh;
	width: 100%;
}

text {
	font-size: 7em;
}

.knockout {
	color: red;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-text-fill-color: transparent;
	-moz-background-clip: text;
	text-fill-color: transparent;
	background-clip: text;
	font-size: 7em;
	width: 700px;
	margin: 50px auto;
	text-align: center;
}
```


</div>

<hr>

## I hope you learned something!
I hope you learned something and already have some great ideas for how/where to implement knockout text. It's a great feature but obviously *not* to be abused. Don't forget to [Checkout the Demo](http://thedevchick.io.php7-29.phx1-1.websitetestlink.com/examples/knockout/) and if you have any requests for tutorials or anything of the sort to drop them in the comments.

👍 minnowbooster, craftech, randowhale1, sasha.shade, minnowsupport, haleyaerith, keik, ninjace, jazzybells, chinito, teamphilippines, chrisdavidphoto, lemonchum, thedevchick, lastminuteman, cheftony, descterity, janmarysmith, unknownmnl, steemprentice, stephen.king989, raymondspeaks, abdel-ali, resheep, gamerveda, upgoat, randowhaletrail, kurtmnl, gindor, jhermanbeans, pomperipossa, adrianobalan, etsur, n1kofi, teamph, pusteblume, banjo, edrivegom, head10, professorbromide, ch00fy, bitcoinparadise, cryptohustler, pkvlogs, beng05, taica, bluchr, myday, shehbaznawaz, tinashe, endaksi1, whatamidoing, holdmydrink, decibel, primetimesports, starsteem, numpypython, qwasert, timbalabuch, businesswri, markfitzgerald, jhagi.bhai, valth, nesbitt, and 5 others

`author`	thedevchick
`permlink`	css-knock-out-text-using-svg-or-css
`category`	css
`json_metadata`	{"tags":["css","webdev","programming","technology","steemiteducation"],"image":["https://steemitimages.com/DQmeHc3urGXMYuNR2FDDeY3o2Evyh7iDoTL1EdqTfNCQPka/Screen%20Shot%202017-09-21%20at%2011.01.39%20PM.png","https://steemitimages.com/DQmQ3cGKxnLw6Px7bNpN4HukCaMK3fyodkoUewL7c4ar8je/Screen%20Shot%202017-09-21%20at%2011.52.15%20PM.png","https://steemitimages.com/DQmcFdu1GZr1bdDAHeoANCbQxyUv47mzrr7ywpBzW9TbFAm/Screen%20Shot%202017-09-21%20at%2011.52.27%20PM.png","https://steemitimages.com/DQmYxecfzAm9HTSzAtwzf585uRURX7XFbwoGc2yj43XpcKk/Screen%20Shot%202017-09-22%20at%2012.00.27%20AM.png","https://steemitimages.com/DQmdy42FKTaexNnr5fy4jkWeJRa9Mk7Gh6pxD7FcoqTN3G4/Screen%20Shot%202017-09-22%20at%2012.00.18%20AM.png","https://steemitimages.com/DQmaVXRZk11i3qgBpdiBv3g8YmbHiQbscwEGYdgcAWHPb8x/Screen%20Shot%202017-09-22%20at%2012.05.07%20AM.png","https://steemitimages.com/DQmen1L1rPRbBg6DGSiRThi8gvJXvyDPrFmJDPoYoLD2gLM/Screen%20Shot%202017-09-22%20at%2012.05.20%20AM.png"],"links":["http://thedevchick.io.php7-29.phx1-1.websitetestlink.com/examples/knockout/"],"app":"steemit/0.1","format":"markdown"}
`created`	2017-09-21 16:08:45
`last_update`	2017-09-21 16:52:39
`depth`	0
`children`	5
`last_payout`	2017-09-28 16:08:45
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	10.909 HBD
`curator_payout_value`	0.381 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	6,758
`author_reputation`	1,011,783,888,537
`root_title`	"[CSS] - Knock Out Text Using SVG or CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,536,233
`net_rshares`	4,301,022,537,824
`author_curate_reward`	""

properties (23)vote details (69)

voter	rshares	pct
cheftony	2,348,389,855	1%
endaksi1	153,111,065	1%
edrivegom	209,787,225	0.1%
raymondspeaks	837,269,861	1%
ninjace	6,806,760,578	100%
stephen.king989	1,012,983,251	0.2%
bitcoinparadise	188,234,879	0.02%
jhermanbeans	399,883,066	0.1%
keik	7,851,179,484	100%
steemprentice	1,237,174,602	0.1%
valth	82,553,622	1%
lastminuteman	3,106,201,940	0.1%
janmarysmith	1,293,126,912	100%
pomperipossa	317,052,667	0.1%
sixexgames	54,683,393	1%
banjo	211,924,242	1%
businesswri	99,883,160	1%
numpypython	110,684,245	0.1%
decibel	137,583,352	0.5%
starsteem	123,260,535	0.3%
jhagi.bhai	91,187,191	0.1%
adrianobalan	304,441,693	1%
gindor	404,024,090	0.2%
whatamidoing	152,758,738	0.1%
beng05	175,790,989	1%
timbalabuch	101,550,205	1%
qwasert	109,910,499	0.2%
taica	167,858,827	0.1%
pusteblume	216,665,679	1%
cryptohustler	183,996,794	1%
minnowsupport	17,744,003,125	1%
tinashe	153,642,809	1%
n1kofi	258,090,895	1%
ch00fy	191,511,192	1%
sasha.shade	35,767,324,612	100%
haleyaerith	12,924,401,095	100%
myday	161,249,829	0.1%
chinito	5,605,414,058	100%
gamerveda	701,700,637	0.5%
professorbromide	193,456,224	0.2%
markfitzgerald	98,151,356	1%
head10	194,173,048	100%
randowhale1	305,484,132,785	1.61%
descterity	1,678,393,754	100%
kurtmnl	620,880,486	100%
nesbitt	81,530,721	1%
dwaeji-aizelle	66,568,725	1%
unknownmnl	1,258,351,377	100%
bluchr	165,802,731	0.2%
teamphilippines	5,068,479,238	100%
minnowbooster	3,121,295,969,407	5%
lemonchum	3,892,800,718	100%
craftech	741,322,113,758	100%
upgoat	670,374,915	5%
resheep	767,840,963	5%
pkvlogs	183,333,575	0.1%
shehbaznawaz	159,729,985	0.8%
randowhaletrail	644,053,218	0.5%
chrisdavidphoto	3,942,911,203	20%
jazzybells	6,269,749,832	100%
teamph	250,521,144	100%
primetimesports	126,986,455	0.02%
etsur	277,546,896	100%
eliashanna	80,361,006	1%
abdel-ali	832,936,447	100%
rebele93	71,915,700	1%
thedevchick	3,175,343,288	100%
holdmydrink	150,877,978	100%
ivelton	0	0%

@minnowbooster · Sep 21 '17

@minnowbooster upvoted this post!

![@thedevchick got you a $7.56 @minnowbooster upgoat, nice!](http://minnowshares.net/upgoat/?user=thedevchick&receiver=thedevchick&value=7.56&hash=542)
*@thedevchick got you a $7.56 @minnowbooster upgoat, nice! (Image: pixabay.com)*
---
[Want a boost? Click here to read more!](https://steemit.com/minnowbooster/@minnowbooster/6rt2mn-introducing-minnowbooster-beta)

properties (22)

`author`	minnowbooster
`permlink`	comment-1506010218944
`category`	css
`json_metadata`	""
`created`	2017-09-21 16:10:18
`last_update`	2017-09-21 16:10:18
`depth`	1
`children`	0
`last_payout`	2017-09-28 16:10:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	365
`author_reputation`	230,546,282,483,083
`root_title`	"[CSS] - Knock Out Text Using SVG or CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,536,373
`net_rshares`	0

@minnowsupport · Sep 21 '17

<p>Congratulations!  This post has been upvoted from the communal account, @minnowsupport, by thedevchick from the Minnow Support Project.  It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso.  The goal is to help Steemit grow by supporting Minnows and creating a social network.  Please find us in the <a href="https://discord.gg/HYj4yvw">Peace, Abundance, and Liberty Network (PALnet) Discord Channel</a>.  It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.</p>

properties (22)

`author`	minnowsupport
`permlink`	re-thedevchick-css-knock-out-text-using-svg-or-css-20170921t163939859z
`category`	css
`json_metadata`	{"tags":["css"],"app":"cosgrove/0.0.1rc9"}
`created`	2017-09-21 16:39:39
`last_update`	2017-09-21 16:39:39
`depth`	1
`children`	0
`last_payout`	2017-09-28 16:39:39
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	612
`author_reputation`	148,902,805,319,183
`root_title`	"[CSS] - Knock Out Text Using SVG or CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,538,863
`net_rshares`	0

@sanees · Sep 30 '17

$0.02

saw your post.Very helpful... dont see you bloggin much. For us developers its always tough or is it people loose interest fast?

👍 sanees

`author`	sanees
`permlink`	re-thedevchick-css-knock-out-text-using-svg-or-css-20170930t113344838z
`category`	css
`json_metadata`	{"tags":["css"],"app":"steemit/0.1"}
`created`	2017-09-30 11:33:39
`last_update`	2017-09-30 11:33:39
`depth`	1
`children`	0
`last_payout`	2017-10-07 11:33:39
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.017 HBD
`curator_payout_value`	0.004 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	128
`author_reputation`	2,019,131,877,450
`root_title`	"[CSS] - Knock Out Text Using SVG or CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	16,368,868
`net_rshares`	8,280,033,590
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
sanees	0 B		8,280,033,590	100%

@steemitboard · Sep 6 '18

Congratulations @thedevchick! You have received a personal award!

[![](https://steemitimages.com/70x70/http://steemitboard.com/@thedevchick/birthday1.png)](http://steemitboard.com/@thedevchick)  1 Year on Steemit
<sub>_Click on the badge to view your Board of Honor._</sub>


**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemfest/@steemitboard/steemfest-steemitboard-support-the-travel-reimbursement-fund"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmawPYDAwfrQM8YU6ejD1f87g64cvsmEFn8RQKHJMs4zxg/image.png"></a></td><td><a href="https://steemit.com/steemfest/@steemitboard/steemfest-steemitboard-support-the-travel-reimbursement-fund">SteemFest³ - SteemitBoard support the Travel Reimbursement Fund.</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-thedevchick-20180906t053435000z
`category`	css
`json_metadata`	{"image":["https://steemitboard.com/img/notify.png"]}
`created`	2018-09-06 05:34:33
`last_update`	2018-09-06 05:34:33
`depth`	1
`children`	0
`last_payout`	2018-09-13 05:34:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	1,016
`author_reputation`	38,975,615,169,260
`root_title`	"[CSS] - Knock Out Text Using SVG or CSS"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	70,469,609
`net_rshares`	0

@steemitboard · Sep 6 '19

Congratulations @thedevchick! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@thedevchick/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@thedevchick) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=thedevchick)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!

properties (22)