After searching the web for other's solutions to coloring half of a character using CSS, I found this: http://jsbin.com/rexoyice/1. After a small adjustment to suit my purposes, I implemented it. I had planned to use text-shadow on this. The shadow covers the "text," which is actually colored by the background. I am a novice at CSS and have no clue how to use z-indexing to put the text-shadow behind the background. I'm open to other solutions that others may come up with if z-indexing isn't the ideal solution.
In the code below, the top line has the shadow applied, while the lower one doesn't.
.HalfColor
{
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
/*text-shadow:0 0 0 #0000 !important*/
}
p
{
text-shadow: 1px 1px 2px #000;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>
Use drop-shadow filter instead:
.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
}
p {
filter: drop-shadow(1px 1px 2px #000);
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>
Try using pseudo-elements
.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
p.HalfColor {
position: relative;
}
p.HalfColor:after {
content: 'TEST!';
position: absolute;
top: 0;
left: 0;
text-shadow: 1px 1px 2px #000;
z-index: -1;;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>
Related
Transforming a header text element which has its css property background-clip: text; set - is applied 2 times on Firefox (Version 90.0.2).
The same css runs as expected in Chrome.
You can see in the example below that the element (which has a 1px border) is rotated 45degs but the the clipped text is rotated again (to 90 degs) - in Firefox
.center-text {
margin-top: 25vh;
text-align: center;
}
.heading-transform {
background-image: linear-gradient(to right, #ff0066, #0066cc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
border: 1px solid #000;
}
.heading-transform:hover {
transform: rotateZ(45deg);
}
<div class="center-text">
<h2 class="heading-transform">
Should rotate around z only 45degs
</h2>
</div>
This only happens when the background-clip: text; is set.
Any possible workarounds to prevent that?
This is obviously a bug and I recommend reporting it to Mozilla
This behavior can be easily avoided! Simply transform any parent element.
.center-text {
margin-top: 25vh;
text-align: center;
}
.center-text:hover {
transform: rotateZ(45deg);
}
.heading-transform {
background-image: linear-gradient(to right, #ff0066, #0066cc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
border: 1px solid #000;
}
<div class="center-text">
<h2 class="heading-transform">
Should rotate around z only 45degs
</h2>
</div>
Interactive Code
In case .center-text cannot be transformed, wrap h2 in another container.
I'm using the below code for gradient color texts.
h3 {
background: linear-gradient( to right, #D3EDFF ,#FCAAA3 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
It's working but the gradient color effect is different in each text due to the length difference.
How do I apply the same pattern of gradient color regardless of the length of texts?
This is happening because the background that you are setting is in the <h3 />, so the background linear-gradient its in all the element.
You must have to change the element's display to inline-block.
h3 {
background: linear-gradient( to right,#D3EDFF 0%, #FCAAA3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
<h3>Test</h3>
<br />
<h3>TestTestTest</h3>
Now the linear-gradient have the correct length.
You can use width: fit-content; instead of display: inline-block; and it will have the same result but without the <br />
h3 {
background: linear-gradient( to right,#D3EDFF 0%, #FCAAA3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: fit-content;
}
<h3>Test</h3>
<h3>TestTestTest</h3>
Preview:
How can I remove this white space from the header? I didn't play with the paddings of the header.
I have a section for Header and Footer. Also, I have a section for the whole thing including Header, Body, Footer. What is causing this white space in the header and how can I remove it?
my CSS code:
*{
font-family: sans-serif;
}
h2.header_headings{
font-size: 45px;
text-indent: 10px;
line-height: 1px;
}
h3.header_headings{
font-size: 20px;
text-indent: 25px;
line-height: 1px;
}
h1.body_headings{
font-size: 27px;
}
h1.body_headings:first-letter{
font-size: 200%;
}
img{
float: left;
}
p{
font-family: tahoma;
}
ul
{
font-weight: bold;
font-size: 18px;
}
a
{
color: orange;
}
a:hover
{
color: green;
}
li
{
margin: 5px;
}
footer{
font-size: 15px;
text-align: center;
}
#copyright{
vertical-align: middle;
}
#body{
width: 800px;
background-color: white;
border-width: thick;
border-color: black;
border-style: solid;
margin: auto;
box-shadow: 0 0 30px #000000;
}
body{
background-image: url("../images/bats.gif");
background-repeat: repeat;
}
#header{
border-bottom: 2px solid black;
background: orange; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, white, orange 75%, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, white, orange 75%, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, white, orange 75%, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, white, orange 75%, black); /* Standard syntax */
}
#footer{
height: 50px;
border-top: 2px solid black;
background: orange; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, black, orange, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, black, orange, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, black , orange, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, black, orange, white); /* Standard syntax */
}
My HTML5:
<!DOCTYPE html>
<html lang="en">
<section id="body">
<section id="header">
<head>
<title>Halloween Store</title>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="stylesheet" type="text/css" href="styles/normalize.css"/>
<img src="images/pumpkin.gif" alt="Pumpkin Picture">
<h2 class="header_headings">The Halloween Store</h2>
<h3 class="header_headings">For the little Goblin in all of us!</h3>
</head>
</section>
<body>
<h1 class="body_headings">Welcome to my site. Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2 class="body_headings">Product categories</h2>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h2 class="body_headings">My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b></p>
</body>
<section id="footer">
<footer>
<p id="copyright">© 2016 Ben Murach</p>
</footer>
</section>
</section>
</html>
That was because of the <h2>, which had a margin-top of 20px. The following should work!
* {
font-family: sans-serif;
}
h2.header_headings {
font-size: 45px;
text-indent: 10px;
margin-top: 0;
}
h3.header_headings {
font-size: 20px;
text-indent: 25px;
}
h1.body_headings {
font-size: 27px;
}
h1.body_headings:first-letter {
font-size: 200%;
}
img {
float: left;
}
p {
font-family: tahoma;
}
ul {
font-weight: bold;
font-size: 18px;
}
a {
color: orange;
}
a:hover {
color: green;
}
li {
margin: 5px;
}
footer {
font-size: 15px;
text-align: center;
}
#copyright {
vertical-align: middle;
}
#body {
width: 800px;
background-color: white;
border-width: thick;
border-color: black;
border-style: solid;
margin: auto;
box-shadow: 0 0 30px #000000;
}
body {
background-image: url("../images/bats.gif");
background-repeat: repeat;
}
#header {
border-bottom: 2px solid black;
background: orange;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, white, orange 75%, black);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, white, orange 75%, black);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, white, orange 75%, black);
/* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, white, orange 75%, black);
/* Standard syntax */
}
#footer {
height: 50px;
border-top: 2px solid black;
background: orange;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(45deg, black, orange, white);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(45deg, black, orange, white);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(45deg, black, orange, white);
/* For Firefox 3.6 to 15 */
background: linear-gradient(45deg, black, orange, white);
/* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<section id="body">
<section id="header">
<head>
<title>Halloween Store</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/normalize.css" />
<img src="images/pumpkin.gif" alt="Pumpkin Picture">
<h2 class="header_headings">The Halloween Store</h2>
<h3 class="header_headings">For the little Goblin in all of us!</h3>
</head>
</section>
<body>
<h1 class="body_headings">Welcome to my site. Please come in and stay awhile.</h1>
<p>I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
<h2 class="body_headings">Product categories</h2>
<ul>
<li>Props
</li>
<li>Costumes
</li>
<li>Special Effects
</li>
<li>Masks
</li>
</ul>
<h2 class="body_headings">My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b>
</p>
</body>
<section id="footer">
<footer>
<p id="copyright">© 2016 Ben Murach</p>
</footer>
</section>
</section>
</html>
I was looking for this.
But when I tried it, it won't work.
The text is transparent, but not through the div, which is the big idea.
Fiddle
.title1_background {
background-color: rgba(255, 255, 255, 0.8);
height: 20%;
width: 100%;
position: fixed;
bottom: 8%;
margin: 0;
left: 0;
text-align: center;
}
.title1_background h1 {
font-size: 400%;
display: block;
-webkit-text-fill-color: transparent;
}
The better way is to use two images.
The background image and the image with hollow text above it.
You can achieve the same using -webkit-text-fill-color: transparent; but this would only work with browsers supporting -webkit.
see this link it works fine in chrome since it supports -webkit but won't work in firefox.
See the browsers and their versions that support -webkit
We should always prefer to design and develop that supports cross browser compatibility.
Try This link
<div id="outer">
<div id="wrapper">
<div id="inner">TEXT</div>
</div>
CSS
#outer {
width:300px;
height:300px;
background-image: url(http://www.placekitten.com/300/300);
overflow:auto;
}
#wrapper {
background: #fff;
margin: 100px 0;
opacity:0.6;
}
#inner {
font: bold 60px Arial;
text-align:center;
margin:20px;
background-color: #fff;
background-image: url(http://www.placekitten.com/300/300);
background-position: 280px 201px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outer:hover{
border:solid 2px #4072B4;
}
I want transparent text from which background should be visible but text shadow should be opaque.
I tried:
opacity:0;
text-shadow 3px 3px 3px orange;
but text-shadow also becomes transparent.
I want result like this:
http://blog.tmimgcdn.com/wp-content/uploads/2011/07/Glowing-Polkadots-Text-Effect.jpg?9d7bd4
Please help.
You can get this effect in modern browsers (Chrome, Safari and FF) using a blend mode option
.test {
font-size: 360px;
position: relative;
border: solid 1px;
display: inline-block;
margin: 5px;
text-shadow: orange 10px 0px 30px, orange -10px 0px 30px, orange 0px 10px 30px, orange 0px -10px 30px;
color: black;
background: black;
mix-blend-mode: screen;
}
body {
background-image: url(http://i.stack.imgur.com/08Y1e.jpg);
}
<div class="test">STAR FIELD</div>
I uploaded the background image to avoid problems with the link
if you have a solid background, you can try this way:
http://jsfiddle.net/aKp3C/
<div class="content">
<div class="text text1">
Example text
</div>
<div class="text text2">
Example text
</div>
</div>
body{
background-color: #333;
}
.content{
position: relative;
}
.text{
font-size: 25px;
font-weight: bold;
}
.text1{
text-shadow: 3px 3px 3px orange;
}
.text2{
position: absolute;
left: 0;
top: 0;
color: #333;
}
You could use the text-shadow-blend-mode CSS3 property for that purpose.
However, it seems it is not yet supported (Firefox 39.0 ignores it completely).
I am also struggling with (semi-)transparent text outlining. The problem is, text-shadow doesn't really generate outlines but duplicates the text behind its foreground and eventually shifts and blurs it. (Any text whose color is not opaque will be blend together with its own shadow at first.)
Currently, this may not be doable using CSS.
EDIT: You might, however, find useful this advice involving SVG and its stroke property.