I am looking at the following template:
http://mojothemes.cosmo-coder.com/dual-flow/Dark/services.html
Can someone explain why there is a shadow area at the base of the
<div id="header-wrapper">
I have looked for a long time with firebug and I cannot see anything that would create the shadow. Not box-shadow on that element. I am interested in using this template but before I use it I would like to find out how this shadow appears.
The shadow is not in #header-wrapper, it's in #page-title
#page-title {
...
-moz-box-shadow: 0 -2px 5px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 -2px 5px rgba(0,0,0,0.9);
box-shadow: 0 -2px 5px rgba(0,0,0,0.9);
}
it's the shadow from <div id="page-title"> moved up
Its not actually the div "header-wrapper" that has the shadow at the base,
Its the below div "page-title" that has the box shadow property.
Also both uses CSS gradient Also
i hope i'm answering correct to you....
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.9);
Related
I cannot for the life of me figure out how to do this: subscription box.
Should be trivial for experienced devs... problem is the gradient bleeds onto the white of the box, and doesn't end vertically, like so.
It's a simple box underneath the email form, with a gradient applied, and then blur (a lot of it). Ideally, the gradient rectangle's positioning should be anchored to the box.
Example of the code for the box and the gradient can be found here
pastebin^
Maybe this one helps you
box-shadow: 0px 30px 10px 0px #EBEBEB ;
Also, you can see more here
although the below answer is correct! You might only want one side to have the inner shadow as well as use the inset keyword to have the shadow inside the element
.oneside{
-moz-box-shadow: inset 0 6px 6px -6px black;
-webkit-box-shadow: inset 0 6px 6px -6px black;
box-shadow: inset 0 6px 6px -6px black;
border-radius: 4px;
}
.allaround{
-webkit-box-shadow: inset 0 0 5px #000000 ;
-moz-box-shadow: inset 0 0 5px #000000 ;
box-shadow: inset 0 0 5px #000000 ;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body>
<input class="oneside">
one side
</input>
</br>
<input class="allaround">
all around
</input>
</body>
</html>
How would I make the image glow when hover? I would like to use white-color.
<img src="resources/img/email.png" class="img-circle">
image:
http://i.stack.imgur.com/Hx0kH.png
Can't post link. So, I would like to make it glow (inside), thanks. Any help would be great
I think what you are trying to do is accomplished with two versions of the same image (use of photo editing tools). Then use this code:
<img src="URL of darker image here"
onmouseover="this.src='URL of lighter image';"
onmouseout="this.src='URL of darker image here';">
</img>
You can give glow at the borders using
img:hover
{
-moz-box-shadow: 0 0 5px 5px #ddd;
-webkit-box-shadow: 0 0 5px 5px #ddd;
box-shadow: 0 0 5px 5px #ddd;
}
You can choose the color you want according to your requirements.
you can also visit http://codepen.io/anon/pen/ilqnb
or http://css3generator.com/
You can use box-shadow withInset property
.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
This question already has an answer here:
Box-Shadow Only on Left and Right
(1 answer)
Closed 8 years ago.
This is css code
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !
You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).
To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).
Here's the quick answer:
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
Updated fiddle
What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).
Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.
To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.
Hi Zey this is the code paste in your css and you will get what you want.
This is CSS
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is HTML
<div class="one-edge-shadow"></div>
and check it out in fiddle http://jsfiddle.net/MfV2Y/
Try this:
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
I'm new to shadow in css can we set shadows for
round image(i mean to a circle image).
if it is possible, please give me a code for this in css.
thanks in advance
This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency).
You could make a circle with CSS3 and give a shadow, see this jsFiddle.
div {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.
shadows are independent of shapes in css, you can use the shadow property for circle after creating circle.
You can use the following code for that, it should work fine
.circle{
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.
UPDATE:
Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.
There is great tutorial for box-shadowing with examples here
Also, simple css3 for rounding corners in cross browser
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
just adjust the pix to the corner roundness you want, or use ems instead
This thing worked for me. I wanted a rounded shadow around the image 32x32.
<a class="media-links" href="">
<img class="media-imgs" src="">
</a>
CSS is like this.
img.media-imgs
{
-webkit-border-radius: 20px;
}
img.media-imgs:hover
{
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #91bd09;
}
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.
Apply this CSS to your tag or its class, and you are done.
Easy peasy! Set border-radius: 50%; on your image element.
It rounds your image tag and it's drop-shadow.
CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.
There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...)
Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/
The best and easy way i can get is to put the image in a div and then provide the border radius same as image to that div and apply box-shadow to that div
.topDiv{
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.img{
border-radius:50%;
}
this will do the work.
I have the following box-shadow inset css3 styling:
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
The inset styling appears on all 4 sides of the box but I do not want styling on the top. How can I remove the styling from the top but keep the styling on the Left, Bottom, Right?
Thanks
This is what you want:
.right-left-bottom-shadow {
box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}
The first one is left, second bottom and last the shadow for the right side. This looks really nice if your border has color #CCC.
You can't do that with just box-shadow so far, but you can composite box-shadow with other possibilities like overflow: hidden. For example, you can push the top shadow outside of parent element and hide that part with overflow: hidden.
See this demo: http://jsfiddle.net/CatChen/Fty2N/3/
No CSS method I know for this but following can be a work around (not a perfect solution)
<div id="mydiv">
<div class="workaround"></div>
</div>
CSS
#mydiv {
background-color:#f00;
height:100px;
width:100px;
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
padding:0 2px;
}
#mydiv .workaround {
background-color:#f00;
width:100%;
height:10px;
}
Check Fiddle http://jsfiddle.net/bZF48/17/