So, in my CSS code, I have the following:
img {
border: 5px solid #fff;
margin: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
However, the 5px white border is not appearing, just the shadow. What am I missing?
Edit: In response to all replies thus far, I obviously see that #fff is white, as I mentioned above, the "5px white border". I want it to be white.
What's happening is that there is NO border showing up at all, just the img with a shadow. But I want the 5px white border, then the shadow fall off of that. I've seen it elsewhere but for some reason it's not working for me.
Your image has a border. You used #fff as the border color which is the HEX code for white. Change it to black or something darker.
change your color of border: 5px solid #fff; to something like #000.Your are not seeing border color because #fff denotes white color and your body background color is also white.
Your img has a border, but you can't see it since #fff is white (unless you've got a darker background).
Related
I'm having a dead end here. I think it's suppose to be simple, but I've no idea how.
If you see this website header, http://effectiveadvisory.com/wingwah-may/ , I already made the border radius. Now, how do I want the outside border to be black?
This is the header div css.
header.header.main-header {
border: 2px solid rgba(160, 160, 160, 0.2);
border-radius: 30px;
}
I tried putting out outline-style property with black color, but nothing happen.
Set parent background as black then set opaque background to the header. Like this :
.header-wrapper {
background: black;
}
header.header.main-header {
border: 2px solid rgba(160, 160, 160, 0.2);
border-radius: 30px;
background: white;
}
I have read about text borders here:
CSS Font Border?
In that post, they are using font-shadow to make the border, but I cannot remove the shadow colour, and I only need the border because I need to show a picture behind the space between the text and the border and create some space between the text and the border.
This is what I am trying to achieve:
This is what I have done so far (it is incorrect because the border is connected with the text):
<style>
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
<h1>Hello World</h1>
Sorry if you cannot understand me, what I mean is that I need a border around the text with transparent space, but I have no idea how to achieve this.
I also cannot use image as replacement of text .
What you're asking for is not possible. Especially the requirement of making an outer border of transparency. While box-shadow has an inset property, text-shadow does not. Background clip can create some interesting effects in conjunction with text-shadow but nothing like what you're looking for.
span{font-size: 300px;
font-weight:bold;
font-family: Arial, 'sans-serif';
background-color: #ed5c65;
color: transparent;
text-shadow: 4px 4px 4px rgba(255,255,255,0.3);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<span>M</span>
https://jsfiddle.net/3ttgv3ng/
We just need to manipulate css in a correct way.
I have prepared a jsfiddle here.
You're welcome.
#text{
font-size:30px;
font-weight:100;
font-family:arial;
color:black;
position:absolute;
left:4px;
top:7px;
}
#borders{
font-size:40px;
font-weight:900;
font-family:arial;
color:white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<div id="text">M</div><div id="borders">M</div>
Check This!
h1 {
font-size:80px;
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px black;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:
3px 3px 0 #000,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
<h1>M O H A N</h1>
I have a background image HERE for a sidebar.
Want to make this background using only CSS, is this possible?
Height of the sidebar, is changing depending on the content <div>
That's why I can't use background image.
one possibility is, you can combine css gradient and box shadow.
the css gradient will give LHS RHS shade and box shadow will give TOP shade.
hence the bottom edge can be kept identical to OP image.
here is DEMO
.shadow_grad
{
height: 200px;
width: 100px;
//shadow
box-shadow: 0 5px 20px 0 rgb(0, 0, 0) inset;
//gradient part included in fiddle, cant paste here as its long
}
You can use box-shadow to get that effect.
background-color:#880600;
-webkit-box-shadow:inset 0px 5px 20px 5px black;
-moz-box-shadow:inset 0px 5px 20px 5px black;
box-shadow:inset 0px 5px 20px 5px black;
http://jsbin.com/bapawoho/1/
Hope this helps :)
This is the top of the sketch of my website, I've done this in a HTML editor.
The circle we can see in the image is my logo, it's an image with alpha color background.
Shadows, borders, etc are working perfectly even in IE.
Now I'm trying to do something similar with HTML5 and CSS3 but I'm having lots of problems with image shadows and borders.
box-shadow doesn't work because it's a square image (remember it's a image with alpha color background)
The last thing I've found for image shadow is filter: drop-shadow. In theory it should work on all browsers but it's only working with chrome.
On the other hand, i can't get a border like the one on the picture. As you know, my logo is a image with alpha color background and it always makes a square border.
Can anybody give me some help. I would appreciate it. Thanxs
After using the solution Lloan Alas gave me it's working perfectly but not on mobile phone
I use dolphin browser and this is what i get:
This is my code: css:
#logo {
margin-top: -100px;
height: 188px;
width: 300px;
background-image: url("../imagenes/logo.png");
border: 5px solid white;
border-radius: 50% ;
box-shadow: 0 10px 15px #000;
-moz-box-shadow: 0 10px 15px #000;
-webkit-box-shadow: 0 10px 15px #000;
-ms-box-shadow: 0 10px 15px #000;
-o-box-shadow: 0 10px 15px #000;
-khtml-box-shadow: 0 10px 15px #000;
}html:
<div id="logo"></div>
Here is a live demo - Let me know if it helps! LIVE DEMO JSBIN
Compatible with IE 9-10, Firefox, Safari and Opera. (Supposedly)
I don't get very well what are you looking for, but if you want to add a shadow to that ellipse what you need is box-shadow, as you know
The use is:
box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;
where you can ommit a property but you cannot change its order.
So for instance your shadow will be something like
box-shadow: 3px 3px 8px 2px #666;
because it's not inset.
In addition, to be able to use it in more browsers, you will need the browser prefix, such as
box-shadow: 3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow: 3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow: 3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/
Also, remember that the alpha-filter you mentioned is just the equivalent to opacity property for Firefox, Chrome, Opera, ...
I need to create shaded divs like those shown in the image below, using only CSS. Any idea about how to create them using less coding?
Thank you!
Here's a method using CSS's box-shadow, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+ and IE9+.
http://jsbin.com/usabe4
Multiple box-shadows are being used to get closer to the desired effect than a single box-shadow is capable of:
#box1 {
background: yellow;
-moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
-webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
}
Did you try using box shadow in css 3:
box-shadow:5px 5px 0 #CCCCCC
For more details check:
http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm
Put two div's on top of each other (use z-index) and move the lower one two pixels down/right.
Is a CSS3 box-shadow close enough?
http://jsfiddle.net/4kS4F/
.box {
width: 120px;
height: 60px;
border: 1px solid #000;
background: yellow;
-webkit-box-shadow: 3px 3px 0px #777;
-moz-box-shadow: 3px 3px 0px #777;
box-shadow: 3px 3px 0px #777;
}
It's supported in many browsers: http://caniuse.com/#search=box-shadow
The notable exceptions are IE 7 and 8. If you need it to work there, you could use CSS3 PIE to provide the box-shadow.
If you need only a white background (or any fixed background color) you can make the box an image with the colored part being transparent and the edges being your background color. Then you set that as the background image, while the background color can control the face color of the box.