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>
Related
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>
Does anyone know if it's possible to draw this red shape for title background in CSS only ?
I need to have this with different width for different title lenght.
Thank you !
Manue
If border-radius seems fine to you, you may tune each corners in 2 ways to get a shape alike :
see for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
example possible below
h1 {
display: table;
margin: 0.1em auto;
font-size: 45px;
font-family: cursive;
text-transform: uppercase;
padding: 0.25em 0.5em;
background: #D71E19;
color: white;
/* below the values you want to tune to round and cut off corners */
border-radius: 0.75em 0.5em 0.65em 0.5em / 25px 22px 100px 50px;
}
h1 + h1 {
/* borders or shadow will follow the shape edge */
margin-top:10px;
box-shadow:0 0 0 4px pink, 0 0 4px 3px black, inset 0 0 2px black;
text-shadow:1px 1px 2px gray, -1px -1px 2px #333;
}
<h1>Title experiment</h1>
<h1>shadow & border</h1>
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;
I copied the style section of my HTML into an external CSS file and added a link to the new file. However the results were slightly different. Certain tags seem to now be ignored, and others work fine.
Chrome shows differences in the inheritance, but I cannot figure out why.
Here is a link to the offending html and CSS: http://jsfiddle.net/n36xot86/
<body>
<!-- Header Section -->
<div class="form-style-1">
<h1>The School Board of Sarasota County, Florida<span>Construction Services Department.</span></h1>
<h2> Building Permit Application</h2>
<!-- Permit Application Section -->
</div>
</body>
From CSS File:
<style type="text/css">
.form-style-1 {
margin: 10px auto;
max-width: 800px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-1 h1 > span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
</style>
When I look at the pages in chrome, I can see that some tags see the ".format-style-1" style and others do not. Notice that the corners are not rounded. Here is screen shots:
http://imgur.com/cYd6DKP
We initially coded the styles embedded in the HTML and then later copied all of the styles from the HTML into a external CSS File. Unfortunately, when we cut the styles from the HTML, we included the HTML Tags: "style type="text/css"" and "/style" around the styles.
The result were confusing. Some of the style values worked, and others did not. Instead of just showing the page unformated it rendered some of the styles which led us to believe that the CSS file was working.
Once we removed the HTML tags from the CSS, it worked perfectly.
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}