I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).
Related
I have an <img> that shows a remote image.
I want it to fallback to another local image, in the case where the remote one is not reachable.
<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico">
.cc_image {
width: 256px;
height: 256px;
}
.cc_image.fallback {
/* this URL here is theoretically a local one (always reachable) */
background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}
It works so that when the src image is not found then the background image will be shown.
The drawbacks are:
it will always load the background image (additional HTTP request)
it shows a little not-found-icon (a question mark on Safari) at the place of te original image, that is displayed above the background-image (not a big issue, but I'd like to get rid of it)
How could I solve these issues?
Or: are there other technics to achieve the same result?
I found this question but the given solutions rely on Javascript or on <object> (that seems to not work on Chrome). I would like a pure CSS/HTML solution, without Javascript if possible.
I know about the multiple background-image but am not sure whether it is a good option (browser support? and will it fallback with an unreachable image?).
Or I was thinking about embedding a SVG image as data-uri.
Suggestions for the most flexible (and compatible) method?
Unfortunately, you can't achieve both without Javascript or object tag.
You could do this to avoid the missing image icon:
Place your image in a container (it might already be in one).
Make the container have the same width and height as the image.
Set the fallback image as the background image of the container.
Set the remote image as the background image of your img tag.
Load an 1x1 pixel transparent png as the src of your image (see code for how that can be done without an extra HTTP request).
Code:
HTML
<!-- you could use any other tag, such as span or a instead of div, see css below -->
<div class="cc_image_container fallback">
<img class="cc_image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image: url(*your remote image*)"/>
</div>
CSS
.fallback {
background-image: url(*fallback image here*);
display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
min-width: specify a minimum width (could be the width of the fallback image) px;
min-height: specify a minimum height (could be the height of the fallback image) px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
.cc_image {
min-width: same as container px;
min-height: same as container px;
background-position: center center; // fallback for older browsers
background-size: cover;
background-repeat: no-repeat;
}
min-width and max-width make sure that the background images remain visible.
background-position makes sure that the central part of the images remains visible and is a graceful degradation for older browsers
background-size resizes the background image to fill the element background. The cover value means that the image will be resized so it will completely cover the element (some of the outer edges of the image may be cropped)
The base64 data in the img src tag is a transparent 1px png.
This will have an additional benefit that regular users and some bots may not be able to save your images (a rudimentary image protection)
The only drawback is, that you will still have one extra HTTP request for the fallback image.
I have found a solution on Codepen, which I would like to share with you:
https://codepen.io/anon/pen/Eqgyyo
I prefer this solution, because it works with real image tags, not background images.
body {
color: #2c3e50;
font-family: 'verdana';
line-height: 1.35em;
padding: 30px;
}
h1 {
margin-bottom: 40px;
}
ul {
list-style: none;
padding: 0;
}
* {
box-sizing: border-box;
}
img {
color: #95a5a6;
font-size: 12px;
min-height: 50px;
position: relative;
}
img:before {
background: #f1f1f1;
border: 1px solid #ccc;
border-radius: 3px;
content: '\1F517' ' broken image of 'attr(alt);
display: block;
left: 0;
padding: 10px;
position: absolute;
top: -10px;
width: 100%;
}
<h1>Broken image fallback CSS</h1>
<img src="no-image-here" alt="Cats with synthesizers in the space " />
<br /><br />
<ul>
<li>✓ Firefox</li>
<li>✓ Chrome</li>
<li>✓ Opera</li>
<li>✗ Safari (desktop, mobile)</li>
<li>✗ iOS webview</li>
</ul>
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
I've some problem with border-radius function in firefox.
When i apply, it makes some kind of space, or border around the item.
Can somebody tell me that this is a firefox bug or is there some resolve for that?
Here is the problem:
JsFiddle
The
border-radius:50%;
line makes that, i am sure.
Seems to me that this is a FF issue at rendering shadows with border-radius.
You could try this simple trick :
The demo
Basically, you apply the grey shadow on the parent li, make it a bit finer and then move a bit the a.ch-item child in order to make it go over the gap.
.ch-grid > li {
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 198px;
height: 198px;
}
.ch-item {
position: relative;
top: -1px;
left: -1px;
}
Of course, this is just for the idea. You might also want to apply the hover effect on the li element itself and move it 1px down and right to have a better result.
Edit : a better result
I know this has been asked and answered a million times over, but each solution seems to be a little different and I can't seem to get any of the scores of posts I've read to work for me.
I'm building a WooCommerce enabled site and am having problems with the image border radius in Safari. I'm pretty new to CSS and envisioning the scale of the problem and solution is escaping me. Since this is a pretty common problem, I'll be brief.
Here's the layout:
setting up my store with Woothemes
I've set an image border radius to my thumbs in the store
it looks great in Firefox, looks crap in Safari.
I simply can't figure out how to make it work using the solutions I've been reading out about. I'm sure there's something simple I just haven't grasped yet.
Here's the link to the store: http://printologie.com/shop/ - and a single product page which presents the same issue: http://printologie.com/shop/akuafoil-cards/
and here's the code from my custom.css (the simple -webkit tag doesn't seem to fix it):
ul.products li a img {
background: none repeat scroll 0 0 transparent;
border: 1px solid #FFFFFF;
border-radius: 80px 60px 80px 60px;
box-shadow: 0 0 0 0 transparent;
display: block;
height: auto;
margin-bottom: 0.75em;
padding: 4%;
width: 91%;
}
Thanks for any thoughts and explanations of fixes.
Border radius is a css3 property. So if you are using for your project then you have to add all vendor prefix. Like for opera -o-, for chrome and safari -webkit-, for Firefox -moz-, and for the Microsoft -ms-.
So your property will look like:
-webkit-border-radius:80px 60px 80px 60px;
-moz-border-radius:80px 60px 80px 60px;
-o-border-radius:80px 60px 80px 60px;
-ms-border-radius:80px 60px 80px 60px;
border-radius:80px 60px 80px 60px;
I'm having trouble trying to get a radius on images. I've simplified my problem and exaggerated the variables for demonstration purposes.
CSS:
div.wrap img {
-moz-border-radius: 50px;
border-radius: 50px;
}
img.pic {
padding: 15px 25px 35px 45px;
}
HTML:
<div class="wrap">
<img class="pic" src="http://i.imgur.com/UAef0.jpg"
width="300" height="300" />
</div>
If I remove the padding, poof, pretty corners.
If it helps, there's a reason why they're in two different classes. "wrap" can have more than one "pic" in it. Sometimes they'll be of the same class, other times they wont, sort like this:
img.left_pic { float:left; padding:5px 10px 5px 5px; }
img.right_pic { float:right; padding:5px 5px 5px 10px; }
Any help or insight would be appreciated.
jsFiddle: http://jsfiddle.net/NwfW6/
Edited for a solution:
This was more or less what I basically was trying to do. I think I was having a 'duh' moment. I'm sure now the declaration I needed to used was margin not padding. Another Thanx to GGJ for reminding me how to go about it the right way. And what Jan said about adding padding to an 'img' tag making no sense, It doesn't. My bad.
Your border radius will be outside of the padding, try setting margins instead which will space outside of the border.
Set the padding on "wrap" not on the image (setting paddings on images does not make much sense :)), that should fix your problem.
This is a byproduct of applying both padding and a border-radius to the same element in some browsers (mostly IE and safari). The border-radius changes the curvature of the border component of the box model, which surrounds the padding component.
In addition to the other answers, another interesting thing that seems to fix the issue is adding a border line. If you don't want to see the border, you could use border: 1px solid transparent, like this:
.invisible-border {
border: 1px solid transparent;
}
Demo in jsFiddle
Had the same problem with a span instead of an img. Not exactly the same scenario since both tags have different display values (see this SO thread).
In my case, setting display:inline-block to the span fixed everything.
Late but somehow found the solution for it. you cannot make a circle using it but you can make use of it by making a slight radius below is an example of my solution.
I need 10px padding and 5px radius for my image, added together border-radius:15px worked fine for me
I Hope the explanation was a bit better.