Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!
Related
I haven't seen any documentation on them, so they probably don't exist, but it's always good to check.
I'm looking for a truly-circular (or polygon of any type other than rectangle) element. I can draw a circle in canvas, but the canvas is still a rectangle. I can draw a circle using border-radius, but it's still a square element with pretty round corners.
I'm looking for an (easy) way to make complex shape buttons that are very precise on their clickable areas.
My current method is to use JavaScript, listen to clicks and measure position. It would be much more ideal if this were handled in html5/css3.
Well, all elements start as a block, square or rectangle in one shape form or another. Outside of that through CSS you manipulate the block, to appear as a circle. But its not to go without saying not all browsers support this fully, but its mostly the older browsers you have to worry about in that essence.
If your looking for something 100% compatible old and new, theres http://pixlr.com you can draw one there and use an image tag.. But even then the image is still square/rectangle. Theres really no escaping that notion any route you go.
All in all..
<div class="full-circle"></div>
.full-circle {
background-color: #c06;
border: 3px solid #333;
height: 150px;
border-radius:75px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 150px;
}
As far as your current method, thats the only plausible logic for the most part, doing things outside the "norm" usually requires a bit more work then a single line of code or three to do it for you.
Border-radius just makes the element look round (except in firefox, reportedly).
Maps kind of work, but I want to avoid forcing an image.
SVG works, but it's still not pure html/css because javascript is needed for links to work. The SVG element is still square too, though the shapes inside are elements that respond well to javascript events. So it's not 100% perfect, but it is workable.
Would definitely be cooler if we had the ability to control the shape of elements on the page beyond drawing inside of a canvas. Maybe I'll play around with building an entire site inside a canvas...
Thanks for the suggestions!
There are no truly circular elements, but try using a regular box element and using the CSS3 specification border-radius. For example:
border-radius: 50px;
height: 50px;
width: 50px;
overflow: hidden;
This creates an element which is effectively circular, and Firebug respects the curved form when hovering over elements.
I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...
I applied "border-bottom:#F60 dotted .3em;" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?
If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:
The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.
As a graphic designer, this is indeed a problem for me.
:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met.
to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.
For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.
I have a website page that uses tables for layout and I am trying to convert it to CSS (never used before)
The navigation is 6 forms with different images placed besides. I know I can give each of these an id and position using css but there must be a less clunky way?
I was wondering If I can create a class which specifies the links position relative to the previous links position, and maybe set the first one manually?
Thanks :)
Purists would say that tables should only be used for tabular data. Your site is not tabular data, it's a layout, so using a table here is a hack. It's a perfectly fine hack if it works, but it may not ultimately be the cleanest solution.
The pragmatic part of me (which is much bigger than the standards Nazi in me) says there might be a cleaner approach using CSS. This could eliminate the need to clutter your source with unnecessary table cruft. You really have two divisions, each with paragraphs containing images, links, and text. It would be ideal if your HTML didn't have to contain anything but that.
If you use CSS well, you can get exactly that result:
http://www.aharrisbooks.net/demo/sample.html
Use 'view source' to see the HTML and CSS code.
A few notes:
I used the 'fieldset' element (which is supposed to be used in forms, but it works well here)
I guessed on colors
Modify the CSS to get exactly the effect you're looking for
I (obviously) used only one icon, but the same effect will work for the whole page
Only one div is needed (even that isn't necessary, but it looks nice to center content on the page
What I like about this design is how clean it keeps the HTML.
Best of luck, and feel free to drop a line if you have questions.
PS for more fun, add the following CSS3 syntax to the fieldset
box-shadow: 5px 5px 5px #333;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #333;
-moz-border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px #333;
-webkit-border-radius: 10px;
These attributes add rounded corners and drop shadows for a very nice effect. It won't work in IE, but the other recent browsers (Safari, Chrome, Firefox, and most mobile browsers) will see really nice effects. Yay for CSS3!
Try div.classname { float: left; width: 200px } and give the container object the same or different width - experiment with this until you're satisfied
While jimplode will not disagree with me, tables are still a valid element in HTML. You can even emulate them with DIVs using the CSS styles display: table (see quirksmode for browser compatibility). So unless the design is a maintenance nightmare or there is some other really pressing reason to change the layout, keep it.
Getting CSS right for most browsers can be a nightmare, especially if you need something "special". Say several elements on the same line with the same (automatic) height.
If you're new to CSS, look for an example that works and start to modify that.
If you're doing this for a public website, get Firefox 3, Chrome, Opera, IE6, IE7 and IE8 and test it with each of them.
Here is an image of the current layout using tables. It's simple but all the information I can find on css talks about multiple columns. I think I only need one? And maybe two divs?
img208.imageshack.us/img208/7038/layoutsz.png
I am wondering if there is some way to make an box have the Safari's light highlight all of the time. I would assume there would be a way to replicate this, however I have not found one.
Thanks for any help!
If there is a doubling up, you can remove Safari's blue outline with outline:none.
Currently the only way to achieve this would be to use a background image. You'd take a screenshot from the field and use that as the background for the input. The main drawback here is that you can only have a fixed-size field because the image is static.
However, you may wish to take advantage of some CSS3 styles such as box-shadow which will work in Safari, Chrome and Firefox. Take a look at this page for more info. For your example you'd probably want something like this:
box-shadow: 0 0 4px #aaf;
One final point to make - if you replicate Safari's highlight outline, it's very likely Safari itself will "double up" the effect, so you need to be careful...