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>
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 have a weird problem with my font,i have used font-face in my css code
this font work correctly in my ie browser bu my head bar
but when i change font to english everything work correctly as you can see below
as i said that font work correctly in other part of my website
my css code is below
margin-right:15px;
color:white;
background-color:#75b925;
border:1px solid #649a24;
background-image:-moz-linear-gradient(-180deg, #83CD2B 0%, #7EC826 100%);
background-image:-o-linear-gradient(-180deg, #83CD2B 0%, #7EC826 100%);
background-image:-webkit-linear-gradient(-180deg, #83CD2B 0%, #7EC826 100%);
box-shadow: -1px 2px 4px 0px rgba(0,0,0,0.16),inset 0px -2px 7px 0px rgba(0,0,0,0.1),inset 0px 2px 0px 0px rgba(255,255,255,0.3);
text-shadow:0px 1px 2px rgba(0,0,0,0.24);
-moz-transition:box-shadow 0.3s;
-o-transition:box-shadow 0.3s;
font-family:fanwood,tabassom;
-webkit--transition:box-shadow 0.3s;
-webkit-text-shadow:0px 1px 2px rgba(0,0,0,0.24);
padding:6px;
font-size:17px;
border-radius:10px;
i have changed many font related settings like font-weight font-size etc but nothing changed
#font-face{
font-family:"tabassom";
src:url("/fonts/farsi/BTabassom.eot?#") format("eot"),
url("/fonts/farsi/BTabassom.woff") format("woff"),
url("/fonts/farsi/BTabassom.ttf") format("truetype");
}
i just set display:inline-block and everything got rounded...!
So, in my CSS code, I have the following:
img {
border: 5px solid #fff;
margin: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
However, the 5px white border is not appearing, just the shadow. What am I missing?
Edit: In response to all replies thus far, I obviously see that #fff is white, as I mentioned above, the "5px white border". I want it to be white.
What's happening is that there is NO border showing up at all, just the img with a shadow. But I want the 5px white border, then the shadow fall off of that. I've seen it elsewhere but for some reason it's not working for me.
Your image has a border. You used #fff as the border color which is the HEX code for white. Change it to black or something darker.
change your color of border: 5px solid #fff; to something like #000.Your are not seeing border color because #fff denotes white color and your body background color is also white.
Your img has a border, but you can't see it since #fff is white (unless you've got a darker background).
I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?
This is what I had but outline does not work with IE:
outline: 2px solid #36F;
border: 2px solid #390;
Thanks.
You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1.
I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.
.border
{
border:2px solid #36F;
position:relative;
z-index:10
}
.border:before
{
content:"";
display:block;
position:absolute;
z-index:-1;
top:2px;
left:2px;
right:2px;
bottom:2px;
border:2px solid #36F
}
http://jsfiddle.net/fvHJq/1/
Use box shadow fo 2nd border.
div.double-border {
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
}
In this case box-shadow does not ignore border-radius property like outline does
A very simple solution you could use as a fall-back if nothing else would be to use two divs. Your main div, and then an empty one just wrapping it that you could use to set the second border.
Late to the party for this question, but I feel like I should record this somewhere. You can make a scalable function in something like Less or Stylus which will create any number of borders (Stylus here):
abs(n)
if n < 0
(-1*n)
else
n
horizBorder(n, backgroundColor)
$shadow = 0 0 0 0 transparent
$sign = (n/abs(n))
for $i in ($sign..n)
/* offset-x | offset-y | blur-radius | spread-radius | color */
$shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
return $shadow
Then,
$background: #FFF // my background was white in this case and I wanted alternating black/white borders
.border-bottom
box-shadow: horizBorder(5, $background)
.border-top
box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
With box-shadow you can achieve as many different color borders as you want. E.g:
#mydiv{
height: 60px;
width: 60px;
box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}
<div id="mydiv"> </div>
https://jsfiddle.net/aruanoc/g5e5pzny
A little trick ;)
box-shadow:
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;
.border{
width: 200px;
height: 200px;
background: #f06d06;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.border:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: green;
z-index: -1;
}
<div class="border">
</div>
use the class name for .border given the vales border:2px solid #000 for single border.then you want another border try to .border:after given the values if you got second border check out above the code sample
example
I need to create shaded divs like those shown in the image below, using only CSS. Any idea about how to create them using less coding?
Thank you!
Here's a method using CSS's box-shadow, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+ and IE9+.
http://jsbin.com/usabe4
Multiple box-shadows are being used to get closer to the desired effect than a single box-shadow is capable of:
#box1 {
background: yellow;
-moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
-webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
}
Did you try using box shadow in css 3:
box-shadow:5px 5px 0 #CCCCCC
For more details check:
http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm
Put two div's on top of each other (use z-index) and move the lower one two pixels down/right.
Is a CSS3 box-shadow close enough?
http://jsfiddle.net/4kS4F/
.box {
width: 120px;
height: 60px;
border: 1px solid #000;
background: yellow;
-webkit-box-shadow: 3px 3px 0px #777;
-moz-box-shadow: 3px 3px 0px #777;
box-shadow: 3px 3px 0px #777;
}
It's supported in many browsers: http://caniuse.com/#search=box-shadow
The notable exceptions are IE 7 and 8. If you need it to work there, you could use CSS3 PIE to provide the box-shadow.
If you need only a white background (or any fixed background color) you can make the box an image with the colored part being transparent and the edges being your background color. Then you set that as the background image, while the background color can control the face color of the box.