Let's say I have white characters and I want a black outline over each character (this is different from outlining the whole text box).
What is the code to make this outline ?
EDIT: Well bummer, I'm not asking for a whole document. All I want is the one line of code and the needed parameters to create an outline for text. I don't feel the need to post code as it is really just a simply request.
I have tried using text-outline: 2px 2px #ff0000; but this is not supported across any major browsers.
Scope :
function createTitleLegend() {
legendTitle = document.createElement('div');
legendTitle.id = 'legendT';
contentTitle = [];
contentTitle.push('<h3><font size="16">TM</font></h3>');
contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white" text-outline: 2px 2px #FF0000;>21421</font></b></font></p>');
legendTitle.innerHTML = contentTitle.join('');
legendTitle.index = 1;
}
I have tried using outline within the font, as well as a class and div. None works. The bruteforce approach doesn't seem to work either.
Yet another EDIT:
This is the key line where I want the outline.
contentTitle.push('<p class="test"><br><font size="6" color=#000000>We have <b><font size="7" color="white">21421</font></b> asdasd</font></p>');
Before I apply the outline, the string is written in one line. After I apply the outline, we have 3 different lines of text.
contentTitle is a legend in a Google Maps where the text align is at the center. That sentence that is being pushed uses two different type of fonts, one for the words and one for the number. In the event that I apply a text shadow with a div, that creates a new line. I know the normal solution for keeping everything in the same line is the use of float. However if I float, nothing is centered anymore.
Maybe I'm not floating correctly, but I've tried both div style=float and class="float" thus far.
from: Outline effect to text
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Try CSS3 Textshadow.
.box_textshadow {
text-shadow: 2px 2px 0px #FF0000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}
Try it yourself on css3please.com.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
font: Tahoma, Geneva, sans-serif;
font-size: 64px;
color: white;
text-shadow:
/* Outline */
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-2px 0 0 #000000,
2px 0 0 #000000,
0 2px 0 #000000,
0 -2px 0 #000000; /* Terminate with a semi-colon */
}
</style></head>
<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>
...and you might also want to do this too:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.OutlineText {
font: Tahoma, Geneva, sans-serif;
font-size: 64px;
color: white;
text-shadow:
/* Outline 1 */
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-2px 0 0 #000000,
2px 0 0 #000000,
0 2px 0 #000000,
0 -2px 0 #000000,
/* Outline 2 */
-2px -2px 0 #ff0000,
2px -2px 0 #ff0000,
-2px 2px 0 #ff0000,
2px 2px 0 #ff0000,
-3px 0 0 #ff0000,
3px 0 0 #ff0000,
0 3px 0 #ff0000,
0 -3px 0 #ff0000; /* Terminate with a semi-colon */
}
</style></head>
<body>
<div class="OutlineText">Hello world!</div>
</body>
</html>
You can do as many Outlines as you like, and there's enough scope for coming up with lots of creative ideas.
Have fun!
With HTML5's support for svg, you don't need to rely on shadow hacks.
<svg width="100%" viewBox="0 0 600 100">
<text x=0 y=20 font-size=12pt fill=white stroke=black stroke-width=0.75>
This text exposes its vector representation,
making it easy to style shape-wise without hacks.
HTML5 supports it, so no browser issues. Only downside
is that svg has its own quirks and learning curve
(c.f. bounding box issue/no typesetting by default)
</text>
</svg>
There are some webkit css properties that should work on Chrome/Safari at least:
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
That's a 2px wide black text outline.
You can use the text-shadow property in css.
.test {
text-shadow: 0px 0px 0px red; /* red outline */
}
Note :
The offsetX and offsetY properties are set to zero so that it will look like an outine. Any other numbers will make the outline move away, making the text look clumsy.
Related
I have some outlined text on a website, but the text is now appearing weirdly for some reason. Have a look at the image link below for additional detail.
Specs:
WordPress 5.8.3
Elementor / Pro 3.5.3 / 3.5.1
Font: Sinkin Sans
Here's the code (no h1 in real code)
.cleartext {
color: #000000;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
}
.gbtext {
font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>
This is what I'm seeing:
the font lines are entering the space that should be transparent
It was the font, Sinkin Sans. It's not compatible. Changing it to Helvetica fixed it and it's close enough to Sinkin that most people probably wouldn't notice.
helvetica is a bit narrower and the periods/dots are squared, but not bad
It's because of the font. You cannot do probably anything and strokes on this font will be like on your img. But if you use text-shadow instead of -webkit-text-stroke, it's hack a little bit, but it should work. The main cons is that the text cannot be transparent, because of shaddows, they will be visible, so you must set color of the text.
.cleartext {
color: #fff;
text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
}
.gbtext {
font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>
I cannot for the life of me figure out how to do this: subscription box.
Should be trivial for experienced devs... problem is the gradient bleeds onto the white of the box, and doesn't end vertically, like so.
It's a simple box underneath the email form, with a gradient applied, and then blur (a lot of it). Ideally, the gradient rectangle's positioning should be anchored to the box.
Example of the code for the box and the gradient can be found here
pastebin^
Maybe this one helps you
box-shadow: 0px 30px 10px 0px #EBEBEB ;
Also, you can see more here
although the below answer is correct! You might only want one side to have the inner shadow as well as use the inset keyword to have the shadow inside the element
.oneside{
-moz-box-shadow: inset 0 6px 6px -6px black;
-webkit-box-shadow: inset 0 6px 6px -6px black;
box-shadow: inset 0 6px 6px -6px black;
border-radius: 4px;
}
.allaround{
-webkit-box-shadow: inset 0 0 5px #000000 ;
-moz-box-shadow: inset 0 0 5px #000000 ;
box-shadow: inset 0 0 5px #000000 ;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body>
<input class="oneside">
one side
</input>
</br>
<input class="allaround">
all around
</input>
</body>
</html>
I have read about text borders here:
CSS Font Border?
In that post, they are using font-shadow to make the border, but I cannot remove the shadow colour, and I only need the border because I need to show a picture behind the space between the text and the border and create some space between the text and the border.
This is what I am trying to achieve:
This is what I have done so far (it is incorrect because the border is connected with the text):
<style>
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
<h1>Hello World</h1>
Sorry if you cannot understand me, what I mean is that I need a border around the text with transparent space, but I have no idea how to achieve this.
I also cannot use image as replacement of text .
What you're asking for is not possible. Especially the requirement of making an outer border of transparency. While box-shadow has an inset property, text-shadow does not. Background clip can create some interesting effects in conjunction with text-shadow but nothing like what you're looking for.
span{font-size: 300px;
font-weight:bold;
font-family: Arial, 'sans-serif';
background-color: #ed5c65;
color: transparent;
text-shadow: 4px 4px 4px rgba(255,255,255,0.3);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<span>M</span>
https://jsfiddle.net/3ttgv3ng/
We just need to manipulate css in a correct way.
I have prepared a jsfiddle here.
You're welcome.
#text{
font-size:30px;
font-weight:100;
font-family:arial;
color:black;
position:absolute;
left:4px;
top:7px;
}
#borders{
font-size:40px;
font-weight:900;
font-family:arial;
color:white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<div id="text">M</div><div id="borders">M</div>
Check This!
h1 {
font-size:80px;
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px black;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:
3px 3px 0 #000,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
<h1>M O H A N</h1>
i have a very strange bug on ie 11 on windows 8.1 64 bit. the box-shadow on div with border-radius set is different from the box-shadow on div WITHOUT any border-radius set (
exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.switchbtn1.first {border-right:none;border-radius:4px 0 0 4px;}
.switchbtn1.last {border-left:none;border-radius:0 4px 4px 0;}
.switchbtn1 {
font-size:14px;
line-height:14px;
padding:3px 15px 6px;
border:1px solid #E8BA66;
float:left;
box-shadow: 0px 3px 7px rgba(227, 168, 79, 0.6);
}
</style>
</head>
<body>
<div class="switchbtn1 first">un</div>
<div class="switchbtn1">deux</div>
<div class="switchbtn1 last">trois</div>
</body>
</html>
this result in :
you see that the box-shadow on the div with round-corner is different from the box-shadow on the div without round-corner ...
this bug not happen on all IE11. for exemple on IE11 on Windows 7 it's seam to not happen
any idea ?
Related to this? http://social.technet.microsoft.com/Forums/en-US/e262c912-5250-4996-acbc-41a8bcd11ba0/weird-ie-behavior-when-combining-drop-shadow-and-radius-css?forum=ieitprocurrentver
Answer suggests a graphics driver problem:
I turned off GPU rendering in the Advanced options and after I rebooted, the radius with drop shadow displays just fine....
this solution in works in ie11
div {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
background:rgba(50, 50, 50);
}
Am in a need to provide outlines for text. These text say for eg: can be League name like Barclays Premier league, National Football League etc.
The closest i came with cross browser support is from the link below
https://www.alphachannelgroup.com/almost-cross-browser-text-stroke-outline-text/
but i would need thickness of outline that can vary between 10 - 20 pixels,
which am struggling to do. Please help
This is what i did
<style>
.element {
width: auto;
height: auto; /* width/height so IE7 and lower will work */
filter: glow(color=black,strength=1);
text-shadow: -10px -10px 0 #000,
10px -10px 0 #000,
-10px 10px 0 #000,
10px 10px 0 #000;
font-size:56px;
font-weight:bold;
color:#FFF;
}
</style>
and my div is
<div class="element">Hello Stranger</div>
and my output is blurry the screenshot is given below.
http://screencast.com/t/v9WPv9saYoS
the output am trying to get is given below
http://screencast.com/t/lMe1bubFht
the outline which is in color blue must be more thicker for me say 10px or 20px
thats what am trying to achieve.
UPDATE
failing to do so with text-shadows. am now trying cavas methods given link below
http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/
but still the thickness seems a problem i adjusted lineWidth to 10 and well it just
didnt work.... may be there exists some other option in canvas..if someone knows plese help.
Although -webkit-text-stroke is still non-standard feature and is not recommended for production, it has very good support in all modern browsers.
To make edges softer you can add multiple shadows with blur-radius equal to 0.5 of text-stroke-width. Also it would be good enough fallback for IE and Opera Mini (see the snippet).
#import url("https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap");
p {
font-family: sans-serif;
font-size: 80px;
line-height: 80px;
color: #eee;
}
.p1 {
font-family: "Permanent Marker";
}
.p2 {
font-family: sans-serif;
font-weight: 700;
}
.stroke {
text-stroke: 6px black; /* doesn't work yet, requires -webkit- */
-webkit-text-stroke: 6px black;
}
.shadow {
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black
}
<p class="p1 stroke">Text-Stroke 123 456 789 0</p>
<p class="p1 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p2 stroke">Text-Stroke 123 456 789 0</p>
<p class="p2 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p1 shadow">Fallback 123 456 789 0</p>
<p class="p2 shadow">Fallback 123 456 789 0</p>
Such a big stroke will never look good with text-shadow unfortunately. There is text-stroke, but only working with -webkit prefix (and not for IE or Opera), you can check out my demo:
http://jsfiddle.net/hmyXX/
.one {
font-size: 8em;
color:white;
-webkit-text-stroke: 5px white;
-webkit-text-fill-color: black;
}
.two {
font-size: 7em;
font-weight: bold;
text-shadow:
3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff,
-3px 3px 0 #fff, 0px 0px 0px #fff;
}
Your desired stroke would be bigger than the letter spacing, making it impossible to achieve with pure CSS. Maybe just have that as an image or less stroke if possible?
Browser support improved a lot, only IE and Opera don't support it yet, see
https://caniuse.com/#feat=text-stroke .
There is a handy sass mixin which offers cross-browser text stroke, see
https://github.com/hudochenkov/sass-text-stroke .
#import "~sass-text-stroke/_text-stroke";
p {
#include text-stroke(4, #369);
}