Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I look 1 item for learning, fun. I would like have the same effect in CSS3 as in flash. http://www.rubenswieringa.com/code/as3/flex/DistortImage/
When I look in internet examples, I found only skew or rotate. I would like to have option distort image of corner image.
It's not trivial to do that – there are at least 3 options though. I'm not backing them up with a how to as that's hard and much longer than would fit here. (plus would take hours without stumbling across a library to do it)
Use canvas. Split the image into bits and draw them in the right place. You could either use the 2D or 3D (WebGL) context depending on what you are doing.
Use CSS 3D transforms. Make lots of divs, set the image to be the background image with the offsets to make it look like one image. Position them using 3D transforms to have the effect required.
Use a custom shader (only in super new browsers). http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/ has some examples of similar things.
In short, there isn't a simple way at all.
Actually, there is a rather simple way.
Distort.js
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
TLDR;
Is it at all possible to use CSS's linear-gradient() function to fill SVG elements? Any ideas of workarounds are welcomed too.
Basically I'm trying to make a templating system for simple graphs using Mustache. The user (another developer) should be able to change the style of the graphs using CSS.
However I quickly found out that SVG's fill attribute is not happy with CSS's linear-gradient() function. fill: linear-gradient(#000, #FFF); simply makes both Chrome and Firefox complain with Invalid property value. This means that the user will have to change the SVG DOM and add a <linearGradient> element, then refer to it in fill, if said user wants any gradient effect.
This is indeed achievable within my current templating framework, but I would prefer not to change the DOM if at all possible.
Any ideas?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Say I want to make a website, and I want the page to have some sort of a main-area, and it's supposed to be something like an open book,
sort of something like that if I want to make my point, I want the left border to be 100% of the height of whatever the page is going to show, and the right border(the one that's intersecting with the left border of the right page) to be say 90% of the height of it... that's sort of the idea of the design.
I was sure there would be some HTML5 features that would support this since I've seen stuff like this around the internet but I realized it wouldn't be that easy.
I hoped that there would be people with proper knowledge of web design that could help me with this thing
This is very good article for page flip functionality with html5 :
http://www.creativebloq.com/html5/create-page-flip-effect-html5-canvas-8112798
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to create a parallax like effect. I have 10 background images and eight foreground images. Here is a fiddle to show what I came up with so far:
Fiddle
The red squares represent the foreground images.
Now I need to animate foreground images somehow, as if they slide in from the bottom while scrolling, and out of the screen at the top, so back and forth, like rain falling down (and up :) So the foreground images move faster than the background images.
I already tried quite a few things, but really don't know where to start. Skrollr.js is also an option, but that's really something on itself to learn and I guess for this there has to be a simpler solution.
I tried this Guide once and it worked. The more you move the divs back with the translateZ rule the slower it moves.
edit: url broken, updated url
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Please check out this image:
Look at the part that says 'keyboard'
I want that shape but facing the other way (right) and not curved.
I know this is a pentagon but its not the standard type so its hard to find the name or type of this shape to learn how to make it in css. Any ideas on how to make it!?!?
Thanks guys,
James
It's a rounded rectangle and a triangle (or a rotated square). To make it in "CSS" would require some hacks. I suggest you use a background image.
Mimicking the iPhone design purely in CSS is nearly impossible. However:
I found iWebKit, written by a guy who spent a lot of time on just that task. He did the navigation buttons with border images.
You can take a look at it at http://snippetspace.com/ . It's free to download, I think.
Looking at the demo code, you can easily see how the buttons work.
iWebKit is only for webkit browsers, but it does not take a lot of work to adapt to other browsers (just add -moz or -o lines where it says -webkit in the CSS).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm looking at only latest gen browsers:
IE9 (haven't really looked into this once much)
FF4
Chrome10
Safari5
iOS 3.4
Opera?
I know I can get squares and rectangles easy, circles and ellipsis with rounded borders (circles: W=H, ellipsis: W!=H). I know I can get slopes with border settings. I know how to get 1/2 and 1/4 circles, but is it possible to get:
Pie wedge (any size, at any location in the circle? ie. a 18% wedge, 20% off the horizontal)
Trapezoids, octagon, pentagon, hexagon
Stars (n pointed stars)
Any of the individual shapes in this that aren't already mentioned
I'm looking for CSS + DIV options, not <canvas> options. I'm also looking for options that use the least amount of nested divs. Here is an example that shows several shapes in one example...
Check out this page for some examples: http://css-tricks.com/examples/ShapesOfCSS/. The examples use only a single HTML element, so more would be possible with added complexity.