I want to be able to make a 2px white border with an 8px tan border around an image that automatically changes with the size of the image.
article.post .wp-caption img, article.page .wp-caption img {
background: none repeat scroll 0 0 transparent;
border: 2px solid white;
margin: 0;
padding: 0;
}
If you want to look at the site here is the link:
http://www.metnews.org/news/aurora-remembers-holmes-victims/
border: 2px solid white;
outline: 8px solid yellow;
The outline property acts like an outer border.
You can also use padding to get the effect of a second border. The part of changing size according to the image, I think you should explain a little better what you are trying to achieve.
padding: 2px;
background: white;
border: 8px solid #000;
Or box-shadow - you can have as many borders as you want. Poor 'old IE8 and less won't get the pretty styles :(.
http://jsfiddle.net/ryanwheale/KmnUB/2/
img {
/* Make sure to add vendor prefixes */
box-shadow: 0 0 2px 2px white, 0 0 0px 10px tan;
}
Related
i coded a arrow with css.
the code
border-style: solid;
border-width: 0 0 25px 4px ;
border-color: transparent transparent transparent #cacaca;
The shot :
ایگل دیزاین طراحی سایت
the slash line is not a smooth line.
whats your idea ?
Not sure why it would not be smooth, could be that you may need to specify the borders long hand.
e.g. border-top: 20px solid transparent
css tricks has a good article on css triangles
Try this
border-top: 25px solid $pink;
border-right: 50px inset transparent;
border-left: 50px inset transparent;
FIDDLE DEMO
I'm not sure where the extra white space on the top and bottom of my slider is coming from. Is it padding or margins? If anyone can assist me, it would be greatly appreciated.
jsfiddle.net/fH3EL
This is because of the bx-slider CSS file. The Bx-slider adds a margin of 5px to your bxslider
You will have to edit this CSS file and make this change
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 0px;
left: -5px;
background: #fff;
}
Check Fiddle
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
what's the best way to programatically (using HTML, CSS, JavaScript, and/or PHP) round the corners of images?
I'm been playing with this CSS-only method:
http://maxvoltar.com/archive/rounded-corners-on-images-css-only
The key features of this method are:
wrapping the image into an element where you can round the borders and where you can set the wrapper element background as the desired image.
setting the actual image opacity to 0
floating the wrapper left so the image and wrapper line up.
here's the HTML:
<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>
here's the CSS:
img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}
p {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}
Unfortunately, this code fails when you re-size the images. Please compare the following 2 fiddles to see what I mean:
image NOT manually sized:
http://jsfiddle.net/trpeters1/wxXAn/1/
image set to 50px wide/50px height:
http://jsfiddle.net/trpeters1/wxXAn/2/
Is there a way to rescue this method if you want to preserve the ability to re-size the image width/height? Are there better ways than this method?
UPDATE
thanks to Tom (see below), this question is solved. The key to enabling re-sizing is to set BOTH the image and wrapper heights and widths to the same size. Please see this fiddle and compare with the one's above to see what I mean: http://jsfiddle.net/trpeters1/wxXAn/13/
Please note in this fiddle that the <p> AND <img> tags height and widths are BOTH set to 50px.
I managed to get it to work by using the following code
p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}
I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.
Hope this is what you are after.
Thanks
How can I create a white glow as the border of an unknown size image?
Use simple CSS3 (not supported in IE<9)
img
{
box-shadow: 0px 0px 5px #fff;
}
This will put a white glow around every image in your document, use more specific selectors to choose which images you'd like the glow around. You can change the color of course :)
If you're worried about the users that don't have the latest versions of their browsers, use this:
img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}
For IE you can use a glow filter (not sure which browsers support it)
img
{
filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}
Play with the settings to see what suits you :)
Works like a charm!
.imageClass {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
Voila! That's it! Obviously this won't work in ie, but who cares...
#tamir; you cna do it with css3 property.
img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2;
}
check the fiddle http://jsfiddle.net/XUC5q/1/
& your can generate from here http://css3generator.com/
If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers & you can use filter as kyle said like this
filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')
you can generate your filter from here http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm
Depends on what your target browsers are. In newer ones it's as simple as:
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
For older browsers you have to implement workarounds, e.g., based on this example, but you will most probably need extra mark-up.
late to the party here; however just wanted to add a bit of extra fun..
box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;
will give you a nice looking padded in image. The padding will give you a simulated white border (or whatever border you have set). the rgba is just allowing you to do an opicity on the particular color; 0,0,0 being black. You could just as easily use any other RGB color.
Hope this helps someone!
You can use CSS3 to create an effect like that, but then you're only going to see it in modern browsers that support box shadow, unless you use a polyfill like CSS3PIE. So, for example, you could do something like this: http://jsfiddle.net/cany2/