Is there a way to change the orientation for a div using css.
ie I need to display a div in a slanting position.
Is there a way by which I can define the four corners of the div
(x1,y1) , (x2,y2) , (x3,y3) and (x4,y4)
Edit
Is there a way to do it using javascript or C#??
Is there a way to change the orientation of an image and not for a div??
This is not possible.
You will need to either use an image or VML/SVG
Please note that IE doesn't natively support SVG, and no other Browsers support VML, but there is an SVG to VML wrapper. Check google
Impossible with pure css, you'll need to use something else like svg, flash or silverlight. Svg will also let you embed arbitrary divs into it, so they will get rotated like you want, but svg isn't supported in IE yet and this particular feature was quite slow when i last tested it.
You could always use border slants instead?
Slants allow you to draw boxes on angles but they won't let you put text on an angle.
My need was to do in IE only and I did using matrix filter and setting the values for M11, M12, M21 and M22.
<style>
.SlantingDiv { padding: 2px; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=1.0,M12=0.4,M21=-0.2,M22=1.0); width: 60; height: 60; padding: 6px; border: #a9a9a9 1px solid }
</style>
<div class="SlantingDiv">
Slanting Text or Image
</div>
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 want to create a HTML button with rounded corner and elliptical shape without image.
What is the way to do it?
This makes all sides rounded:
border-radius:40px;
This makes them elliptical:
border-radius:40px/24px;
Have a look here to see:
http://jsfiddle.net/xnTZq/
Or with some extra ugly fanciness:
http://jsfiddle.net/xnTZq/6/
-webkit-border-radius:3em / 1em;
-moz-border-radius:3em / 1em;
border-radius:3em / 1em;
#box-1 {
-webkit-border-radius:10px;
-moz-border-radius:10px;
-border-radius:10px;
}
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
This is a very useful article to read if you need more help with this:
http://www.css3.info/preview/rounded-border/
Possibly use css3 border-radius and keep the height small to get an elliptical shape, good site to use for cross browser support (browsers that support css3 only of course unless you use css3 pie http://css3pie.com/ ) http://border-radius.com/
koolies
Hi guys I have a problem of images showing background-color on IE6 and its supposed to be a transparent background. on all the other browsers it is showing fine except for IE6.
can anyone please tell me what am i doing wrong. tried the opacity to 0 but its still showing the background-color.
The fix is quite simple. No need to include any JavaScript. Define your css like this and include your image name in filter.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
IE6 doesn't support semi-transparent PNGs. Try something like this for a work-around if you really need to:
http://css-tricks.com/snippets/css/png-hack-for-ie-6/
or http://www.jay-han.com/2008/10/15/unit-png-fix-best-ie-png-hack/
Or just drop IE6, it's way behind all other browsers, and fast losing market.
IE6 doesn't support transparent PNGs properly.
This page has a fix which involves a behaviour file. Alternatively you could use GIFs.
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!