Is it possible to create a double outline for number how you see in below picture (I mean the green and white outline)
Any idea?
Depending on the browsers you need to support, it's not the exact same effect, but you could achieve something similar with a combination of text-shadow and -webkit-text-stroke.
text-shadow: 4px 4px 0 green;
-webkit-text-stroke: 2px white;
https://jsfiddle.net/agentfitz/rs27av43/4/
Here is another (perhaps better) option using ::before and custom data attributes - props to the Code Carnivore for this intelligent solution)
https://jsfiddle.net/0wn2ok4g/2/
You can play with text-shadow.
It looks not cool, but I think this is all you can do with css.
Original article on CSSTricks.
body {
background-color: green;
}
span {
font-size: 70px;
font-family: Arial;
font-weight: bold;
color: block;
text-shadow:
-2px -2px 0 green,
2px -2px 0 green,
-2px 2px 0 green,
2px 2px 0 green,
-3px -3px 0 white,
3px -3px 0 white,
-3px 3px 0 white,
3px 3px 0 white;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>A</span>
<span>B</span>
Related
I tried using stroke to apply border in h1
font-family: 'Lobster Regular',Helvetica,Arial,Lucida,sans-serif;
font-size: 133px;
color: #ff5a00!important;
-webkit-text-stroke: 7px rgb(255 255 255);
my result
what I want
final result
The text-stroke property is a non standarized property.
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. - MDN
The best alternative is to use the text-shadow property like this:
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
However this will only look good with short directives. Using larger numbers will always result in a flawed look.
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
body {
background: #212121;
}
.stroke {
font-family: "Lobster", Helvetica, Arial, Lucida, sans-serif;
font-size: 133px;
color: #ff5a00 !important;
text-shadow: -7px -7px 0 #fff, 7px -7px 0 #fff, -7px 7px 0 #fff, 7px 7px 0 #fff;
}
<h1 class="stroke" stroke="Font">
Font
</h1>
I am looking for a way to use a text shadow on the h2 tag, and also have an underline on the words. The problem is, the text shadow is on the underline as well. How do I make it so that the underline doesnt have the text shadow?
*
css:
.pagetitle {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration: underline;
text-decoration-color: grey;
}
*
You'll need to separate the underline from the text. To do so you can generate the underline with background with linear-gradient or a pseudo-element (::before).
.pagetitle {
display: inline-block;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: linear-gradient(transparent calc(100% - 2px), grey calc(100% - 2px));
}
<h2 class="pagetitle">I'm the Page Title</h2>
you can try to use the border, resetting line-height to bring it closer to text.
.pagetitle {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration-color: grey;
color:green;
border-bottom:solid;
line-height:0.9em;
width:max-content;/* use display:table; if max-content is not supported */
}
h1 + h1 { margin:auto;}/*possibly*/
<h1 class="pagetitle">My page title underlined</h1>
<h1 class="pagetitle">My page title underlined & centered</h1>
A pseudo could also be used.
If you also wanted the underline to be cut off when letters go through it, then , here is a probable duplicate : Disable underline for lowercase characters: g q p j y?
You cannot control the underline shadow independently, but what you could do is use a border-bottom or one of the other tricks described in this article:
https://css-tricks.com/styling-underlines-web/
I'm trying to add an outline to text using the CSS text-shadow property here.
The problem is that the shadow corners don't always meet. If you look below, you can see the problem on the upper right corner of the Y.
It doesn't look too bad with this font but with some fonts that my code uses it makes a big difference.
Is there a way to have the text completely surrounded by the box-shadow, especialy in the cornerns?
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-1px 1px #ff0000,
-1px -1px #ff0000,
1px 1px #ff0000,
1px -1px #ff0000,
-2px 2px #ff0000,
-2px -2px #ff0000,
2px 2px #ff0000,
2px -2px #ff0000;
-webkit-font-smoothing: antialiased;
}
<div class="shadowOutline">My</div>
You can do it with svg ,and you have a perfect resault
text{font-size:100px;
fill: none;
stroke: red;
stroke-width:2px;
stroke-linejoin: round;
}
<svg height="120" width="480">
<text x="0" y="90" >I love SVG!</text>
</svg>
or you can use it directly with inline css like this :
<svg height="100" width="480">
<text x="0" y="80" fill="white" stroke="red" style="font-size:100px;stroke-width:2px;">I love SVG!</text>
</svg>
I managed to get it a little better using :
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-2px -2px 0 #ff0000,
2px -2px 0 #ff0000,
-2px 2px 0 #ff0000,
2px 2px 0 #ff0000,
2px 0px 0 #ff0000,
-2px 0px 0 #ff0000,
0px 2px 0 #ff0000,
0px -2px 0 #ff0000;
-webkit-font-smoothing: antialiased;
}
<div class="shadowOutline">My</div>
The point is to offset the text-shadow in all directions :
left
right
top
bottom
But also
top-left
top-right
bottom-left
bottom-right
Keep in mind, that for values greater than one pixel you'll have to fill the gaps of sharp corner shadows. See for example letter "X" with (attempt of) ten pixels thick outline, first made by eight, second by twenty four shadows:
See this example
span {
font: normal 200pt Arial;
color: #fff;
letter-spacing: 20px
}
.eight-shadows {
text-shadow:
-10px -10px 0 #f00,
00px -10px 0 #f00,
10px -10px 0 #f00,
10px 00px 0 #f00,
10px 10px 0 #f00,
00px 10px 0 #f00,
-10px 10px 0 #f00,
-10px 00px 0 #f00;
}
.twenty-four-shadows {
text-shadow:
-10px -10px 0 #f00,
00px -10px 0 #f00,
10px -10px 0 #f00,
10px 00px 0 #f00,
10px 10px 0 #f00,
00px 10px 0 #f00,
-10px 10px 0 #f00,
-10px 00px 0 #f00,
-05px -10px 0 #f00,
00px -10px 0 #f00,
05px -10px 0 #f00,
05px 00px 0 #f00,
05px 10px 0 #f00,
00px 10px 0 #f00,
-05px 10px 0 #f00,
-05px 00px 0 #f00,
-10px -05px 0 #f00,
00px -05px 0 #f00,
10px -05px 0 #f00,
10px 00px 0 #f00,
10px 05px 0 #f00,
00px 05px 0 #f00,
-10px 05px 0 #f00,
-10px 00px 0 #f00
}
<span class="eight-shadows">X</span>
<span class="twenty-four-shadows">X</span>
(In fact the middle "horizontal" shadows chunk could be omitted for this sample, because it contains no sharp vertical corner, but I left it there for clarity.)
To get "solid" 10px corner outlines you'd have to use 288 (= 4×9×8) shadows, and even then the result will be vertical or horizontal lines near the sharp corners instead of sharp ones.
If you're okay wit a little more "blur" to your outline, using the third, optional property on text-shadow could help close those gaps you're seeing on the "Y".
From the MDN article for text-shadow:
Values
<color>
Optional. Can be specified either before or after the offset
values. If the color is not specified, a UA-chosen color will be used.
Note: If you want to ensure consistency across browsers, explicitly
specify a color.
<offset-x> <offset-y> Required. These length values
specify the shadow's offset from the text. <offset-x> specifies the
horizontal distance; a negative value places the shadow to the left of
the text. <offset-y> specifies the vertical distance; a negative value
places the shadow above the text. If both values are 0, then the
shadow is placed behind the text (and may generate a blur effect when
is set). To find out what units you can use, see
.
<blur-radius> Optional. This is a value. If not
specified, it defaults to 0. The higher this value, the bigger the
blur; the shadow becomes wider and lighter.
.shadowOutline {
font: normal 200pt Arial;color: #fff;
text-shadow:
-1px 1px 4px #ff0000,
-1px -1px 4px #ff0000,
1px 1px 4px #ff0000,
1px -1px 4px #ff0000,
-2px 2px 4px #ff0000,
-2px -2px 4px #ff0000,
2px 2px 4px #ff0000,
2px -2px 4px #ff0000;
-webkit-font-smoothing: antialiased;
}
<div class="shadowOutline">My</div>
Headsup: for this purpose you can use -webkit-text-stroke (preferably in combination with -webkit-text-fill-color and it will work in current Firefox (49+) as well:
.shadowOutline {
font: normal 200pt Arial;
color: red;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px red;
}
<div class="shadowOutline">My</div>
Capable browsers will render outline around transparent letters, others opaque (red) letter, so this is somewhat more reliable than white text on white background in browsers without text-shadow support.
I'm having an issue with web programming when I combine text-shadow with text-stroke.
The shadow version of the same text gets cut on the sides, and that's not what I would expect it to do.
Does anyone know how to avoid this issue while still using both shadow and stroke at those rates?
I can actually see that out of Safari it doen't show the same effects.
Does anyone know of a good replacement of the stroke?
Here's the code of what I'm using.
p {
margin: 80px;
color: green;
text-shadow: 90px 0px red;
-webkit-text-stroke-width: 10px;
font-size: 3em;
}
<p>V</p>
<p>O</p>
Just keep on adding to this logic. Not sure if there is a max. Sorry about giving up on you earlier.
text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 #000;
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I want to have box-shadow on three sides of a div (except top side). How could I do that?
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
If you are looking for something like Google material design shadows:
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/#Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
Here's an example of the negative Y value suggested by #Vigrond
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
I like #Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj
For translucent shadows with hard corners (i.e. no blur radius) I used this:
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
However, this does require the background of the element to be solid.