I have a simple div with a shadow and I was wondering how/if i can add an extra element to it. Here is the code:
h3.widget-title{
background-color:#aac955;
-webkit-box-shadow: 0px 0px 0px 37px #aed449;
-moz-box-shadow: 0px 0px 0px 37px #aed449;
box-shadow: 0px 0px 0px 37px #aed449;
color:#444; padding:5px 10px;
}
<div>
<h3 class="widget-title">Title</h3>
<p>Content</p>
</div>
Here is what I am looking for:
See the green edge. The idea is to get the h3 title and its style more to the front. Is such a thing possible through CSS?
I used the pseudo-elements :before and :after and used CSS code from this site: http://css-tricks.com/examples/ShapesOfCSS/ in order to make the hooks. Play a little and you will figure it out.
Related
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
I'm having trouble formatting my footer because the box shadow from the main content div is going over it and making it look terrible.
I have looked through some other sources with people having a similar problem to me and have tried a few "solutions" but none have seemed to solve my problem.
What I want to find out is there a way to remove the shadow from only the bottom using CSS or is there a way to bring my footer div forward so it hides the bottom shadow.
Here's the code for the box shadow.
box-shadow: 10px 10px 5px #888888;
Thanks in advance.
A possibility would be to decrease the spread radius of the box shadow depending on the blur (blur is added to the total size), e.g.:
-webkit-box-shadow: 10px 0px 6px -3px #888;
-moz-box-shadow: 10px 0px 6px -3px #888;
box-shadow: 10px 0px 6px -3px #888;
The problem which remains is that you cannot set different blur or offset values for each side.
You can use tools like this to have a preview: http://www.cssmatic.com/box-shadow
Otherwise you could add another box which is used as overlay for the bottom or you go and have a look at the z-index property: http://www.w3schools.com/cssref/pr_pos_z-index.asp
just set box shadow like
box-shadow: 10px 0px 0px 0px #888888;
I am currently working on basing a design, in which the designer has used a shadow on a div.
Since I am not fond of using images for this sort of thing, I have decided to take my CSS skills to the next level. I am completely new to CSS3, yet I want to give this a try using box-shadow. I have been reading into this new feature but I cannot seem to get my exact design working.
This is what I am searching for:
Top: 1px;
Right: 5px;
Bottom: 9px;
Left: 5px
The designer has used different spreads (well, I believe it's called spreads in this context) for the shadow. My issue is that I cannot manage to get this working with different spreads per side of the div, can anyone help me?
Thanks in advance.
div {
box-shadow: 0px 0px 5px #000;
}
The intention of box-shadow is to create a shadow of the div you are assigning it to. You can't make specific top-left-right-bottom parts bigger or smaller
See: http://css3gen.com/box-shadow/
The only way this can be done is to fiddle with the variables
For example:
box-shadow: 0px 9px 15px 5px #888888;
This box-shadow will generate a box-shadow that..
[0px] doesn't shift left or right
[9px] is 9px down
[15px] has 15px of blur (play around with it for the desired effect)
[5px] is 5px wide (on all sides)
[#888888] has a grey color
Another way would be to use border-images.
This is pretty close: http://jsfiddle.net/EG6FA/
div {
...
box-shadow: 0px 4px 10px #777;
}
-webkit-box-shadow: 0px 0px 10px 5px #888888;
-moz-box-shadow: 0px 0px 10px 5px #888888;
box-shadow: 0px 0px 10px 5px #888888;
(IE9 and IE10 will render a smaller box-shadow. Earlier Explorer versions will show no shadow.)
<div id="cat"></div>
How to box-shadow for left and right side only?
(no shadow of upper lower side)
set the z-index of woof above meow and grrrr will show up on top of hisssss's shadow.
Here's an overflow hidden approach for one side shadow http://starikovs.com/2011/11/09/css3-one-side-shadow/. Hope it will help you.
With this you can do it http://jsfiddle.net/QkXqU/
CSS:
div {
float: left;
overflow: hidden;
padding: 0px 0px 10px 0px; /* Use padding on the side where you want to show shadow. Padding amount should be same as shadows blur length. */
}
img {
-webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;
}
HTML:
<div>
<img src="http://lorempixum.com/output/nature-q-c-309-249-8.jpg" alt="trees" />
</div>
I'm having trouble rounding the corners of an img using CSS3:
This is the code I'm using:
img.event-thumbimage {
height:120px;
width:140px;
-webkit-box-shadow: 0px 0px 10px 0px #4d4d4d;
-moz-box-shadow: 0px 0px 10px 0px #4d4d4d;
box-shadow: 0px 0px 10px 0px #4d4d4d;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border:solid white 3px;
float:left;
margin-right:25px;
}
As you can see, the outer border is rounded but the actual img is squared off. Using CSS3 how can I round the corners on the actual image as well?
use two containers, both with the rounded corners (not the img), and don't forget the overflow: hidden on the inner:
example code here:
http://jsfiddle.net/jackJoe/YhDXm/
A similar answer to the previous two. Use a span around the image and apply the border-radius to both.
There is a more detailed walkthrough here: http://easierthan.blogspot.co.uk/2012/12/code-tip-2-rounded-borders-on-images-in.html
Some browsers are starting to handle this better, but there are still instances where the square of the image shows through.
Put a <div> around the image and apply the border-radius to that wrapper. Add overflow: hidden; and you're good to go. This is because <img> tags can't have rounded corners.