property in CSS is a good way to have shadows for dynamic text in HTML. However the browsers (especially safari, firefox) render a quite strong shadow with quite low settings:
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:0.01em 0.01em 0.01em #000; // some browsers do not even display this
How can I achieve cross browsers-compatible text shadows which are still not as strong as the first two given text shadows, but still displayed? Is there a solution for this problem?
Try using a "weaker" colour:
text-shadow: 1px 1px 2px rgba(0,0,0, 0.25);
Adjust that 0.25 as needed - a value of 0 will be invisible, and 1 will be the same as the #000 you're currently using.
You could try semi-transparent text-shadow:
text-shadow:1px 1px 2px rgba(0,0,0,0.25);
Demo
Related
We are using different static images as per year to display.
I want to make it dynamic by adding image without number and adding number. Its looks good except. I tried text-shadow css property but does not give same result like image.
Is it possible to add shadow by css which goes to end of left corner?
You probably have to use multiples text-shadow to achieve this style.
text-shadow: 1px 1px 0 #087194, 2px 2px 0 #087194, 3px 3px 0 #087194, 4px 4px 0 #087194, 5px 5px 0 #087194;
https://jsfiddle.net/h462ruey/33/
I am trying to achieve an effect where I have a shadow that follows text content closely.
I've documented my progress here: https://codepen.io/wolfr/pen/QEGOdY?editors=1100
text-shadow doesn't fit my needs. It produces an inferior shadow (test: https://codepen.io/wolfr/pen/KMNyXj?editors=1100 )
The problem with my current approach is that it's pretty bad for people using screen readers.
I've tried several methods to hide HTML content from being read by sceen readers in another pen here. They include using media queries and the speak: none attribute. None of them work. I can't position the box off-screen (the classic method) since I actually needs its layout. I've also tried hiding content in a :before attribute but that doesn't work either.
You want make a shadow that follows close the text around? If do, you can use multiple text-shadow in order to make a more elaborated shadow.
p {
color: #d53400;
font-size: 32pt;
font-weight: 500;
text-shadow: 2px 0 8px #555, -2px 0 0 #555, 0 2px 0 #555, 0 -2px 0 #555, 1px 1px #555, -1px -1px 0 #555, 1px -1px 4px #555, -1px 1px 0 #555;
text-align: center;
}
<p>Text shadow<br />This is another line</p>
I'm working on a website and I want to add some shadow to my text, is there an easy way to do this using only css? i tried placing a darker clone of the text under it, but that would be hard on different sizes.
You can achieve this using the CSS3 text-shadow property. The general format for specifying this is:
text-shadow: *left-offset* *top-offset* *blur-distance* *color*;
Example Usage:
text-shadow: 2px 2px 1px #000000;
You can create multiple shadows by separating their definitions with commas:
text-shadow: 2px 2px 1px #000000, -2px -2px 1px #111111;
Older versions of IE do not support this property, though; you need to use a filter:
filter: DropShadow(Color=#000000, OffX=2, OffY=2);
Where you replace the values with whatever your preference is.
Note: The answer to your question can be found quite easily using the great search engine Google. Please try that next time before asking a question.
Another note: You really don't have to mention that the website you're working on is an adult website. It's completely irrelevant and might even be a bit dislikable to some users.
Welcome to Stackoverflow, though! I hope that helped!
you can use css text-shadow any times you want on a text:
text-shadow:1px 0px 2px grey, -1px 0px 2px grey, 0px 1px 2px grey, 0px -1px 2px grey;
will create a shadow whole around the text.
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons
What's the easiest way to create drop shadows around div boxes? A print media designer sent me this example design:
http://glacialsummit.com/shadow.jpg
As you can see, the drop shadow seems to "glow" around the div box. Is this easy to re-create with CSS? Or should I tell the designer it's impractical to create this?
Yes, it is possible, even in IE6.
It is possible with CSS3. But the browsers still use their own CSS property names.
Yes, it is possible with CSS3. Here is the sample:
selector {
-moz-box-shadow: 5px 5px 10px #666;
-webkit-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Would work in most of major browsers except IE.
Here is the explain:
selector {
box-shadow: x-coordinate y-coordinate blur-radius color;
}
Cheers.