Is it possible to bend a div with CSS?
Some sort of webkit transform...
The effect i want to create is a have a ring doughnut shape but made up of a curved div as opposed to border-radius/border tricks
EDIT:
Use case - I'd like to put a linear gradient on this div and have the gradient wrap back around on itself, like in the game Snake, where it chases it tail...
Currently, this is not possible with CSS alone. Your best bet would be to make use of the canvas (and some Javascript).
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
http://www.roblaplaca.com/examples/bezierBuilder/
It doesn't look like you can without using the border-radius trick:
http://www.w3schools.com/css3/css3_2dtransforms.asp
The border-radius trick is the one that I like,
http://jsfiddle.net/charlescarver/ea3An/
If you want text to curve, then this is a problem made for SVG's Text on a Path capability. (or Canvas). Enjoy.
You can use clip-path property of css putting polygon in value and make points as you want to change the shape of div
I recommend using THREE.js and the HTML5 canvas tag. You can easily bend and animate with it. Check out the examples. Have Fun!
THREE.js Examples
Related
I'd like to blend a small canvas element over a large parent background element. I've tried the following without success:
JS:ctx.globalCompositeOperation = "overlay";
I believe globalCompositeOperation only works on elements drawn on each other in canvas.
CSS:background-blend-mode: overlay;
I thought the css background-blend-mode might work, but alas no.
I understand the canvas element is in its own little world and that blending it with other html elements is a shot in the dark - just wanted to confirm I'm not missing anything.
Maybe you can draw the "Parent background element" on the canvas and then blend? That might be a bit costly, but it is one of the few options you have I guess.
As vals pointed out in the comments - the answer to my question is: yes, using mix-blend-mode: css mix-blend-mode
I was wondering how I can get shadow on all sides of a div in IE8. In addition to this I want another div that got shadow on all sides but the top.
I have managed to get the shadow on the right and bottom, but not around all 4 sides.. What does the direction property tell me? I have tried with different directions but with no success..
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
Not possible to use css shadows with ie (only ie9).
But you can use shadowOn. It's a great Image based jquery plugin and very easy in use to add shadows to html elements.
you can emulate what you want with http://css3pie.com/
that, or just add a partially transparent div behind your object that's slightly larger to act as a fake shadow
You may work around CSS Borders having glow effect here. You may change the colors and some others parameters.
Hope this helps.
Hi i trying manny time but i can't created this.
I should be as like this below images in pure css without any images
and now i want to used only single div .
Thanks advanced .
you could try to play around with this one:
css3gen
see you can make this in css3 easily you can use the before and after Pseudo Class Selectors for right and left side image curve and in the middle you can play with css3 for shadow box & gradient color etc....and it will come in only one div.
I hope you got it the idea what i am trying to explain you.....
see the demo for better understanding:- http://jsfiddle.net/4Y9D5/37/
I have this Fiddle: http://jsfiddle.net/GSA5R/2/
Whereby i use the border property to create the triangle effect. However, how can i give the triangle a white border? If its already being used for the triangle!?
The only solution that comes to me is to place another white triangle behind the gray one. But you need some extra markup, because you can't use :after:after :)
Example here. I used a <span> inside the <a> tag.
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.