I have a h1 tag text. Is it possible to give this text a shadow using CSS? (preferable without JavaScript).
Any help?
I need a color gradient from: #486882 to #2b4356
Gradients and shadows are not the same:
Text-Shadow: https://developer.mozilla.org/en/CSS/text-shadow
Text Gradient: http://matthewleak.co.uk/css3bob/
It is possible but you have to master the cross browser compatibility.
Here is nice sample
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
Hope this helps
There is no way to directly specify a gradient in css for text-shadow. However, you can use two text-shadows together to get the effect you want:
h1 { text-shadow: 0 0 0.2em #2b4356, 0 0 0.1em #486882 }
Yup quite possible with CSS3.
text-shadow: XXpx XXpx 0px #2b4356;
DEMO
Related
EDIT: A similar post has already been made: Text Stroke (-webkit-text-stroke) css Problem
I am having a very strange problem with a text on a website I am working on. This was not happening before, and I did not change anything, but one day I loaded the website and noticed the text stroke I applied was going through itself (see image). I am using Tailwind CSS. Here is the code for the element
The letter's a and e are cutting through themselves.
Code for the element:
<h1 className="text-7xl text-white text-stroke-3 text-center mt-5 font-bold">
How are you feeling today?
</h1>
Also this text-stroke is a custom CSS property that I defined as follows:
.text-stroke-3 {
-webkit-text-stroke: 3px black;
}
I tried changing the h1 to a paragraph and changing the font of the text. I also tried using
<b></b>
to encapsulate the text instead of font-bold.
None of these worked.
I guess the problem is caused by the -webkit-text-stroke property, which is not supported by all browsers, and may cause issues with some fonts.
You could instead use a text shadow.
.text-stroke-3 {
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
This creates four text shadows around the text, which will give the appearance of a stroke. You can adjust the size of the stroke by changing the values of the text-shadow property.
A similar post has been made already:
Text Stroke (-webkit-text-stroke) css Problem
It seems that the main problem is with webkit text stroke itself being inconsistent. I solved this problem by using a different font.
I really don't know how to name my problem but I have a psd file that looks something like this:
Every item in the image above is a single image like this one:
I don't have a good specification about this, that's all I know about it. So I have been thinking maybe I can use the whole image as sprite background.
Please share your thoughts how to achieve something like this and if you are familiar please edit the question name precisely cause I could not.
Thanks
Here is an great article which accomplishes this using text-shadow: 7 Great CSS based text effects using the text-shadow property
Here is an example how it looks: Hello World example
Code:
h1 {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #9c8468;
opacity: 0.3;
font: 80px 'Museo700';
}
I didn't include the right font, but you get the idea.
This is what you do... I just did this in Photoshop, and the results are pretty good. It can be duplicated in CSS.
<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>
Each of those images should be a different color. Front, as it is. Middle, dark gray, and back, white.
Use CSS is place them in the same spot, but offset by a couple of pixels.
#front {
top:5px;
left:5px
}
#middle {
top:3px;
left:5px
}
#bottom {
top:7px;
left:5px
}
CSS now has filters. (not yet fully supported)
view example
view notation
You can use drop-shadow
box-shadow even with transparent .svgs kept the retangular shadow.
works like text-shadow but for vector images (.svg)
side note: Since it's not yet fully supported, use an image editing software.
i'm creating a new website and im looking to recreate the curved corner of the SAVE 25% banner. http://www.sonycreativesoftware.com/
Does anyone know how i would do this with css or html?
Cheers
Use the image as a background-image, and apply border-radius on the element
div
{
background-image:url('http://placehold.it/350x150');
width:350px;height:150px;
border-radius:5px;
}
http://jsfiddle.net/mdNCm/1/
You can use border-radius.com to generate cross-browser CSS
Yes, by using border-radius.
CSS:
div.rounded{
border-radius: 5px;
border: 1px solid black;
}
HTML:
<div class="rounded">This text is in a rounded border!</div>
This is a css3 feature and not yet fully supported of all browsers. Read further about this tag:
border-radius: 25px;
You can achieve this with
border-radius: 5px;
If you want a cornered border please use this.
Border-radius.com
Which gives you the code.
Note: border-radius don't work with some browsers such as ie
Alternatively you can use some image as background in css.
I am trying to make the shape below in CSS. Any ideas how to do this? Or know a tutorial site that can help? I am talking about the tag like shapes that are yellow.
Also secondly does anyone know how to make a shape with css that is a square/rectangle that has two rounded edges at the bottom but right angled corners at the top?
Thanks!
James
To answer your second question first, you use border-radius
div{
border:1px solid black;
border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
height:100px;
width:100px;
margin:2em;
}
The -moz and -webkit are specific vendor prefixes.
You can change the numbers as you wish, but they follow this pattern
1st # = top left corner
2nd # = top right corner
3rd # = bottom right corner
4th # = bottom left corner
Example: http://jsfiddle.net/9VbFn/
As for the first question, here is a tutorial to help you
http://debiprasad.net/coding-and-logic/create-a-price-tag-using-css
Yes; you can do this with pure CSS & with gradient also.
Check this http://jsfiddle.net/9EEEP/3/
with border & circle http://jsfiddle.net/9EEEP/2/
you can adjust the css as per your requirement like this http://jsfiddle.net/9EEEP/5/
The second part of your question is easy: border-radius: 0 0 5px 5px, just replace the 5s with whatever value you wish. The first part, although technically possible with CSS, is better achieved with a background image.
EDIT: Here is a rough version of your tag in CSS to get you started if you really want to give it a shot. http://jsfiddle.net/hsuF3/
Looking at the tags you could achieve that affect using :before and :after and CSS3 transforms (rotate the before and after psuedo-classes). It'd be best to use a background-image instead, though.
To answer your second query – you can easily achieve that effect with border-radius.
e.g.
p {
-moz-border-radius: 0 0 2px 2px;
-webkit-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
}
The values are clockwise from the top left corner to the bottom left corner.
First if you want that image exactly you will have to download it and add it to your solution. Once you have you can aplly it either to your link or button or whichever control you want to use. I used a button so i created the following style class and applied it.
.btnLarge_blue { background:url("../images/btn_Large_blue.gif"); width:68px; height:20px; font:12px Calibri; cursor:pointer; border:0px; padding:0px;}
......
Hope this helps :)
I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.
This is my current HTML for a content box type display:
<div class="grid_12 boxout-shadow-920">
<div class="boxout">
<p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
</div>
</div>
Boxout CSS:
.boxout {
background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE;
-moz-border-radius:4px 4px 4px 4px;
border:1px solid #DDDDDD;
margin-bottom:15px;
padding:5px;
}
boxout-shadow-920 CSS:
.boxout-shadow-920 {
background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}
Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.
So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.
I'm sure there is an easy answer to this - any help is appreciated!
With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.
So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.
See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows
For greatest support through most of the browser engines you should use the following three statements:
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
Same technique as rounded corners.
Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/
I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.