Is there a way to integrate a border around text like the image below?
Use multiple text shadows:
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
<h1>test</h1>
Alternatively, you could use -webkit-text-stroke, which produces a slightly different result because it modifies the stroke width instead of adding additional shadows around the text. Despite the webkit prefix, it works in most browsers (including Firefox) as of 2022:
-webkit-text-stroke: 2px #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
-webkit-text-stroke: 2px #fff;
}
<h1>test</h1>
Also, read more at CSS-Tricks.
Sure. You could use CSS3 text-shadow :
text-shadow: 0 0 2px #fff;
However it wont show in all browsers right away. Using a script library like Modernizr will help getting it right in most browsers though.
I don't like that much solutions based on multiplying text-shadows, it's not really flexible, it may work for a 2 pixels stroke where directions to add are 8, but with just 3 pixels stroke directions became 16, and so on...
Not really confortable to manage.
The right tool exists, it's SVG <text>
The browsers' support problem worth nothing in this case, 'cause the usage of text-shadow has its own support problem too,
filter: progid:DXImageTransform can be used or IE < 10 but often doesn't work as expected.
To me the best solution remains SVG with a fallback in not-stroked text for older browser:
This kind of approuch works on pratically all versions of Chrome and Firefox, Safari since version 3.04, Opera 8, IE 9
Compared to text-shadow whose supports are:
Chrome 4.0,
FF 3.5,
IE 10,
Safari 4.0,
Opera 9, it results even more compatible.
.stroke {
margin: 0;
font-family: arial;
font-size:70px;
font-weight: bold;
}
svg {
display: block;
}
text {
fill: black;
stroke: red;
stroke-width: 3;
}
<p class="stroke">
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
<text x="0" y="70">Stroked text</text>
</svg>
</p>
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
The following will cover all browsers worth covering:
text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */
Related
My problem is that the browser does not listen to background-size. I even tried to set preserveAspectRatio to none in the SVG but it still does not work.
It should not resize with aspect ratio. Stretching out is fine..
SVG file
To have it a background image in my example, I use a data:image. If you want to know what the SVG file looks like, it's here below:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M 10 10 C 20 20, 40 20, 50 10" fill="000"/>
</svg>
Example
What I expect is that black "banana" to change size to something bigger. I set it to 100px so it should span all the way to the end of the div.
div {
height: 100px;
width: 100px;
background: #eee;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' fill='000'/%3E%3C/svg%3E");
background-position: center 0;
background-size: 100px 100px;
background-repeat: no-repeat;
}
<div></div>
Because your SVG will take any width or height, and your path is in a fixed position and size, no CSS will do the trick because the scaling won't do anything. Instead, add a viewBox to your SVG. Your SVG will now look like this.
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="10 10 40 7.5">
<path d="M 10 10 C 20 20, 40 20, 50 10" fill="000"/>
</svg>
div {
height: 100px;
width: 100px;
background: #eee;
background-image: url("https://drive.google.com/uc?id=1_W7AIhdfiwxgU0_FrTsYwyVrZvjzxt18&export=download");
background-position: center 0;
background-size: cover;
background-repeat: no-repeat;
}
<div></div>
By the way, the drive file background image is just the svg.
A viewbox is needed. Thanks to #enxaneta.
viewBox='10 10 40 7.5'
I've been through a number of solutions online. I've used EmailOnAcid to fix errors and sent that output to Gmail with no errors.
I'm generating our output through a series of loops to generate a data table and recommendations so I am using the same styling on each like element. When I look at it in Gmail, a couple of cells have the styles stripped. It makes absolutely no sense.
I've added spaces between the properties. I've removed spaces between the properties. I've rewritten the styles. Just keep getting the same result.
Here is the html for the th and td.
<th style="padding: 16px !important; text-align: center !important; font-size: 12px !important; border: none; border-left: 1px solid #ffffff !important; background: #0173b1 !important; color: #ffffff !important;">{{label}}</th>
<td style="padding: 16px !important; text-align: center !important; background: #e7f2fa !important; font-size: 14px !important; border: none; border-left: 1px solid #ffffff !important; color: #2f4f4f !important;">
Pretty simple stuff.
On the cells in the image without formatting, all of the style information is gone.
<th>Nitrite</th>
I'm hoping somebody can provide some direction.
I have an element where the top-left and bottom-right corners have a border-radius of 5 and I'm trying to make it compatible with CSS3PIE. The documentation states that
Only the shorthand version is supported; the longhand border-top-left-radius etc. properties are not. The shorthand syntax does support different radii per corner, though. link
But in the example they display exactly that ...
border-radius: 5px 10px 15px 20px;
How can I display an element that has corners with different radii in IE8?
Thank you.
a.navLink {
-moz-border-radius: 5px 0 5px 0;
-webkit-border-radius: 5px 0 5px 0;
border-radius: 5px 0 5px 0;
display: block;
behavior: url('http://mydomain.com/css/PIE.htc');
position:relative;
z-index: 0;
add the -pie- prefix:
-pie-border-radius: 5px 0 5px 0;
I can't create another parent div-container, is it possibly using only css tricks?
box-shadow: 7px 7px 7px black;
will create shadows only from right and bottom borders, but I need left and top too.
With box shadow there are 4 parameters; offset, blur-radius, spread, and color.
This is the code I use on my website. It produces a shadow with 0 offset and blur-radius, 8px spread, and a shade of gray.
box-shadow: 0 0 8px #888888;
-moz-box-shadow: 0 0 8px #888888;
-webkit-box-shadow: 0 0 8px #888888;
Here is a quick example of the effect on an image.
http://www.css3.info/preview/box-shadow/
Try this
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
or
you can use shadowOn. It's a great jquery plugin and very easy in use.
I have a situation where I have a SPAN with a background image of a button, with text. The text is however on top of the button, while I want it to be vertically centered. I tried to adjust it with padding, but then the background image shifts along...
The html code:
<span class="button" style="BACKGROUND-IMAGE: url('images/button.gif'); HEIGHT: 50px; PADDING: 15px 10px 0px 0px; WIDTH: 50px">button text</span>
Thanks in advance, I have the feeling that I am overlooking something simple...
Add this to your CSS:
line-height: 50px;
display: inline-block;
padding: 0 10px;
You may need to adjust your padding, but setting the line height to the height of the button itself will center its content vertically.