I have font called MyriadPro-BoldIt, I used that on photoshop to create a text design like below.
I tried to add this style using css by adding below codes to the same font which I converted to web fonts before
-webkit-text-stroke: 1px black;
color: white;
text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
but it is not giving same results. Anyone knows how to create this kind of letters using css?
I was able to do something like this.
h1 {
font-size: 100px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
-1px 1px 0 #fff, 3px 3px 5px #333;
}
See demo
Here is a demo that works well: http://jsfiddle.net/XLRbQ/
-webkit-text-fill-color: black;
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: white;
text-shadow: 5px 5px 5px #000;
And also a tutorial CSS-Tricks: http://css-tricks.com/adding-stroke-to-web-text/
have you tried simply:
color: black;
text-shadow:
2px 2px 0 white,
3px 3px 0 gray;
you have to tune coordonates and font-size in order to have something looking fine.
http://codepen.io/gc-nomade/pen/rnmdv/
Related
When creating a span element that has a linear background, and no border, everything works fine.
But as soon as I add a border, the colors from the gradient become solid and just sit on the edges.
Increasing the border size mitigates the issue, but I have found no way to completely remove the problem without increasing the border width or removing the border.
CSS for the element:
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
i can't simulate it, so, my suggestion is to change from border to box-shadow: check the snippet below:
span{
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border-radius: 3px;
padding: 3px;
font-size: 50px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
}
.border{
border: 3px solid black;
}
.box-shadow{
box-shadow: 0px 0px 0px 3px black;
}
<span class="border">My Contributions</span>
<br/> <br />
<span class="box-shadow">My Contributions</span>
The starting and ending points of the gradient are at the edges of the padding-box and border. That's why as soon as you add a border, the colors from the gradient become solid and just sit on the edges.
Using box-shadow:inset will fix the issue. See the updated CSS below.
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
box-shadow: inset 0 0 0 3px black;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px
1px black;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
How can I make this CSS work in IE 8?
I use this to call from my html docs (no repeat coding that way - saves space):
<style type="text/css">
<!--
#import url("default.css");
-->
</style>
And here's what "default.css" looks like:
body {
background-image: url(/images/31.jpg);
background-repeat: repeat;
background-attachment: fixed;
background-color: #000;
background-position: center;
}
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
color: #F0F;
font-size: 22;
text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000;
}
a:link {
color: #FFF;
text-decoration: none;
text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000;
}
a:visited {
text-decoration: none;
color: #FFF;
text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000;
}
a:hover {
text-decoration: underline, bold;
color: #FFF;
text-shadow: 2px 2px 2px #F0F, -2px -2px 2px #F0F, -2px 2px 2px #F0F, 2px -2px 2px #F0F;
}
a:active {
text-decoration: none;
color: #000;
text-shadow: 2px 2px 2px #F0F, -2px -2px 2px #F0F, -2px 2px 2px #F0F, 2px -2px 2px #F0F;
}
h1,h2,h3,h4,h5,h6 {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000;
}
It looks lovely in Firefox, but it doesn't render up so nicely in Explorer, and that's REALLY irritating because I prefer uniformity!
Is there something I can do? I understand not many people would still be using older versions of IE, but some still do (like XP users).
When designing for older browsers you need to make sure that it supports the specific feature you are trying to implement. There isn't much to work with from what you have posted but you are most likely not getting the text-shadow you desire. IE 8 doesn't support text-shadow (http://caniuse.com/#search=text-shadow).
Use the website above to check for feature support. Goodluck.
I'm trying to do so using CSS
---------------------
SOME CONTENT HERE
---------------------
so what I basically want is that the border is just at the top and bottom of whatever content there is inside (most preferably a <p></p>)
Here is some code that I was using but it definitely doesn't work the way its meant to be.
padding: 5px 1px;
box-shadow: 0 2px 5px black,
0 -2px 5px #800000,
0 0 5px black,
0 0 5px #800000;
What should I do for that?
Do you want a border or a shadow? You're code is telling me you want a shadow, your question asks a border.
If border:
border-top: 1px solid black;
border-bottom: 1px solid black;
If shadow:
-webkit-box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
Examples: http://jsfiddle.net/pGGXH/69/
you can use the below code for top and bottom borders
border-top:1px dashed black;
border-bottom:1px dashed black;
For shadow effect go through this link
some modifications to the code of sebass
-webkit-box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
If you want a border, then you can do it like this.
.div {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 50px;
height: 50px;
}
Demo - http://jsfiddle.net/9VCZU/
If you look at http://keepskatinbro.com in Chrome, you'll notice that after you hover on titles that there will be artifacts left behind on the sides of the titles after you un-hover.
I got the idea from http://desandro.com (look at the bottom of the page). But Desandro's has no artifacts.
Here's the HTML:
<h1 id="logo">
<a class="" id="home_link" href="http://keepskatinbro.com/" title="Keep Skatin' Bro" rel="home">
<span id="keep">KEEP</span><br>
<span id="skatin">SKATIN'</span><br>
<span id="bro">BRO</span>
</a>
</h1>
Here's the CSS:
#header{
margin-bottom:30px;
background:#FFF;
border-bottom:1px solid rgba(0,0,0,0.15);
}
#header h1 a{
color:#757575;
text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818;
/*-moz-text-shadow:2px 2px 2px rgba(0,0,0,1);*/
}
#header h1 a:hover{
color:#fff;
text-shadow: 1px 1px #58e, 2px 2px #58e, 3px 3px #58e, 4px 4px #58e, 5px 5px #58e, 6px 6px #58e, 7px 7px #58e, 8px 8px #58e, 9px 9px #58e, 10px 10px #58e, 11px 11px #58e;
}
Why might I have this problem? I've noticed it before when making other sites only in Chrome it seems... Yet Desandro doesn't have the artifacts on desandro.com.
Sorry cannot comment yet. Can you write your code down?
By the way, just try to change the mouseout with mouseleave event or viceversa.
EDIT
It seems a Chrome bad hover event handling (you can test it by leaving the logo gently).
Force a negative, transparent shadow when the link is not hover:
#header h1 a {
color: #757575;
text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818, -1px -1px transparent, -2px -2px transparent, -3px -3px transparent;
}
Do you see the thin bevel highlight on top? How do you do this in CSS with only one HTML tag? I'm guessing it has something to do with outline. This is what I have so far without the bevel:
<a class="callToAction">Click here</a>
.callToAction {
border: 1px solid #000;
-moz-border-radius: 0.4em;
background: -moz-linear-gradient(
top,
#ccc,
#999
);
}
To create a bevel you must use a combo of the CSS3 radius and shadow attributes. To get the highlight when hovering over a button you must use the pseudo-selector :hover.
The Button Code from http://www.whitedogdesigngroup.com/blog/entry/a_better_button_with_css3/
callToAction {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 -2px #791c13;
-moz-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
-webkit-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
}
callToAction:hover {
margin-bottom: 1px;
height: 29px;
position: relative;
top: 1px;
color: #eee !important;
-moz-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
-webkit-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
}
If you need further explanation...
Explanation of CSS3 borders: http://doctype.tv/borders
Explanation of CSS3 shadows: http://doctype.tv/css3
Just found out that you can specify a shadow to be an inset by inspecting the source of http://html5doctor.com/you-can-still-use-div/:
.inset {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 0 2px rgba(255, 255, 255, 0.3) inset,
0 1px 2px rgba(0, 0, 0, 0.29)
}