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.
Related
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
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.)
In the image below, the top image is what I currently have on a site, it uses an actual Image.
What I want to do is make something more like the bottom image using pure CSS, I cannot figure out how to do it though, can anyone help?
CSS3 has a lot of solutions. Try this:
div.exampleboxshadowj {
background-color: #EEE;
float: left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width: 160px;
text-align: center;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
Though you can change the color to blue, if you want.
Here is a great link for all the info you could want.
You can try using this link to get the gradient effect on those buttons (I haven't tested it myself)
http://webdesignerwall.com/tutorials/cross-browser-css-gradient
I'd imagine that since they use the background property, you would need to have the actual images on the buttons inside some sort of position container.
It would be easier and possible more cross-browser friendly to simply create the images in a sprite map and switch the background-position when they are clicked.
If I understood you properly, you are trying to change the image when it is clicked or is active. If so, for that you can use :focus or :active to generate such effect.
Here is a demo with background color instead of a picture.
hi you can use this css3 browsers compatible css code for your requirement :-
.shadow {
width:150px;
height:150px;
background-color: rgb(55,79,99); /* Needed for IEs */
-moz-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
-webkit-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
or see the live demo :- http://jsfiddle.net/dte78/32/
and can read more about box shadow
Here's my source image:
And my source image zoomed in:
Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.
Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.
See Caniuse page for border-radius and box-shadow.
the best (and only) way to do this is to use multiple box-shadows:
element {
box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
border-radius: 20px;
}
box-shadow works like this:
box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size];
border-radius works like this:
border-radius: [size];
/*or*/
border-radius: [topleft/bottomright size] [topright/bottomleft size];
/*or*/
border-radius: [topleft] [topright] [bottomright] [bottomleft];
you can specify the Height an length of the curve like this:
border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];
It's just using two box shadows, one inset and the other outset, i.e:
.box {
width: 100px;
height: 100px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
border: solid #ccc 1px;
border-radius: 10px;
margin: 50px 0 0 50px;
}
See it here: http://jsfiddle.net/WYLJv/
This is actually done with two CSS3 box-shadows.
CSS:
#fuzz
{
height: 100px;
width: 100px;
border-radius: 5px;
border: 1px solid #333;
box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}
You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)
Obviously change the colors to your taste :)
Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.
I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.
.block {
border-radius:6px;
box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}
Try adding a border-radius and a text-shadow in your css.
.box {
border-radius:20px;
text-shadow:2px 2px black;
}
Hope this helps.
You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ for more info.
If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.
Regards,
Richard
I specify a box shadow for a span. The shadow only shows on the right. Something seems to cover the bottom side of the shadow. I tried resizing the span but this doesn't do it. I have this in the style specifications.
#feastsaint:hover span {
display:block;
width:385px;
height:65px;
margin-left: 120px;
border:1px solid #808080;
padding:2px;
font-size:11px;
border-radius: 5px;
box-shadow: 3px 5px 8px #888;
-moz-border-radius: 5px;
-moz-box-shadow: 3px 5px 8px #888;
padding: 5px 5px 5px 15px;
background:#CCFFCC;
/* border:1px solid #404040;
background-color:#FFCCCF; */
color:#404040;
white-space: normal;
z-index:99;
}
What could be the problem?
NOTE: Couldn't upload the image for the box shadow.
Add some margin-bottom to your span.
#feastsaint:hover span {
....
margin-bottom: 5px; // (play with this a bit till you get the desired effect)
}
you really should post more info about your problem such as the html code your trying to affect, that said try:
change
#feastsaint:hover span
to
span#feastsaint:hover
I recently experienced some problems with Chrome on MAC. I just had to restart Chrome several times until it worked again. For me bitmaps and some images online were messed up (no vectors). Maybe just restart Chrome and look if it works. Otherwise just revise your CSS as the other answers suggest. Good Luck