create account


advanced mode

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

View this thread on steemit.com
View on official site
· @thedevchick · (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.
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
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"}
last_update2017-09-21 16:52:39
created2017-09-21 16:08:45
active2017-09-30 11:33:39
last_payout2017-09-28 16:08:45
depth0
children3
net_rshares0
vote_rshares0
children_abs_rshares8,280,033,590
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value10.909 SBD
curator_payout_value0.381 SBD
author_rewards9,945
net_votes68
root_comment13,415,295
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[CSS] - Knock Out Text Using SVG or CSS"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation1,011,783,888,537
promoted0.000 SBD
body_length0
reblogged_by[]
author_curate_reward""
vote details (68)

vote your-acct "thedevchick" "css-knock-out-text-using-svg-or-css" 100 true
post_comment your-acct "re-thedevchick-css-knock-out-text-using-svg-or-css-20171019t090619540z" "thedevchick" "css-knock-out-text-using-svg-or-css" "" "your reply.." "{}" true

View on official site
@minnowbooster ·
@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)
created2017-09-21 16:10:18
active2017-09-21 16:10:18
last_payout2017-09-28 16:10:18
depth1
children0
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
author_rewards0
net_votes0
root_comment13,415,295
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[CSS] - Knock Out Text Using SVG or CSS"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation32,903,091,709,757
promoted0.000 SBD
body_length0
reblogged_by[]

vote your-acct "minnowbooster" "comment-1506010218944" 100 true
post_comment your-acct "re-minnowbooster-comment-1506010218944-20171019t090619541z" "minnowbooster" "comment-1506010218944" "" "your reply.." "{}" true

View on official site
@minnowsupport ·
<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>
json_metadata{"tags":["css"],"app":"cosgrove/0.0.1rc9"}
created2017-09-21 16:39:39
active2017-09-21 16:39:39
last_payout2017-09-28 16:39:39
depth1
children0
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
author_rewards0
net_votes0
root_comment13,415,295
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[CSS] - Knock Out Text Using SVG or CSS"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation32,770,028,045,449
promoted0.000 SBD
body_length0
reblogged_by[]

vote your-acct "minnowsupport" "re-thedevchick-css-knock-out-text-using-svg-or-css-20170921t163939859z" 100 true
post_comment your-acct "re-minnowsupport-re-thedevchick-css-knock-out-text-using-svg-or-css-20171019t090619542z" "minnowsupport" "re-thedevchick-css-knock-out-text-using-svg-or-css-20170921t163939859z" "" "your reply.." "{}" true

View on official site
@sanees ·
$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?
👍  
json_metadata{"tags":["css"],"app":"steemit/0.1"}
created2017-09-30 11:33:39
active2017-09-30 11:33:39
last_payout2017-10-07 11:33:39
depth1
children0
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.017 SBD
curator_payout_value0.004 SBD
author_rewards15
net_votes1
root_comment13,415,295
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[CSS] - Knock Out Text Using SVG or CSS"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation1,294,123,919,491
promoted0.000 SBD
body_length0
reblogged_by[]
author_curate_reward""
vote details (1)

vote your-acct "sanees" "re-thedevchick-css-knock-out-text-using-svg-or-css-20170930t113344838z" 100 true
post_comment your-acct "re-sanees-re-thedevchick-css-knock-out-text-using-svg-or-css-20171019t090619543z" "sanees" "re-thedevchick-css-knock-out-text-using-svg-or-css-20170930t113344838z" "" "your reply.." "{}" true


created by @roadscape