When we have multiple images in the blog and if we click any of those images, blogger enlarges that image. When we click the enlarged image, it shows next enlarged image, and so on.
Is there any way to customize appearance of the enlarged image? At the moment, my image in blog is shadowed (I am using 'box-shadow' style) but when it enlarges its without shadow.
I tried putting 'box-shadow' style in 'href' but no luck.
Well, I found the answer on my own. Just putting here in hope it will help someone coming here.
The images in blog enlarged after clicking, and displayed one by one is done by Blogger's Lightbox feature. We can customize the enlarged images (e.g. we can make them round cornered, put shadow to them etc.) by doing this:
Go in bloggers HTML editor of template
Search using CTRL + F the tag < /head> (No space between '<' and '/')
Just above the tag, add the following code:
<style>
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 11px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 3px 3px 7px #888;
}
</style>
For more details please refer this:
http://helplogger.blogspot.in/2013/03/how-to-customize-bloggers-lightbox.html
Related
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;
}
I have tried PIE.htc and background-color together, but rounded-corner not working in IE8.
my css is as follows.
#main{
background-color: #CD0D00 !important;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
behavior: url(PIE.htc);
-webkit-box-shadow: 0 7px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0 7px 10px rgba(0,0,0,0.3);
box-shadow: 0 7px 10px rgba(0,0,0,0.3);
}
NB: When I remove "!important" from background-color, the color not appears but the Rounded corner working in IE8, otherwise not.
Well, using !important is known to cause problems with CSS3Pie, so that's no surprise.
As for the background-color on it's own without the !important, I'm not immediately sure why it isn't working, but a few suggestions:
Try using the shorthand background style instead -- ie background:#CD0D00;. CSS3Pie tends to prefer shorthand styles for most things.
For some background properties, CSS3Pie can't support them in the standard background style; it needs a custom -pie-background style. In theory, this only applies to advanced background properties, and shouldn't be needed for a basic background color, but it's worth trying it.
I don't have a copy of IE to hand at the moment to try it out, but hope that helps.
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
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.
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/