is there any way to make the perspective of an element in HTML centered in the middle of the screen, so that the perspective point is not moved when you are scrolling...?
Thanks
EDIT:
Here is a small picture of my idea...
The element would be visible from the top and become visible from the bottom as you scroll down.
http://i.stack.imgur.com/W84Me.png
Sorry for my bad english
While traditionally, HTML Elements are 2D boxes only, since CSS3 there is the transform property which lets you transform the boxes in 3D space.
http://www.w3schools.com/cssref/css3_pr_transform.asp
This allows for such perspectives. But since only few browsers let you choose a perspective projection (only orthogonal), you may have to create the transformation matrix yourself. You may find tutorials and formulas for that in most modern OpenGL tutorials, for example.
Only problem left is show a different image from the bottom, since in HTML, an element looks the same from both sides (only mirrored). Maybe you can position 2 elements slightly above each other to get two different faces.
Also, you will need JS to move around the object on the screen.
Maybe you better use some modern technique like canvas or WebGL to do this, since HTML is not really made for 3D.
Related
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I have the following
image as a powerpoint flow chart (text with hyperlinks not shown).
I want to turn this chart into an html-website.
Any ideas how to get a good result for this task?
I think recreating this with coding in html is troublesome.
Thank you.
Text on gray backgrounds (5 on right, 2 on left) are probably headings of the same level so they would be hN floating on the right and coming before each set of arrows.
Each individual set of arrows can be fairly easily coded as lists and styled as these breadcrumbs:
Simple scalable CSS based breadcrumbs (by Veerle Pieters)
Breadcrumb Navigation with CSS Triangles (by Chris Coyer)
They can expand with content if it seldomly occupies 2 lines (Firefox/Ubuntu and Safari/Mac have laaarge fonts, don't assume that your text will always stay on 1 line. Not speaking of zoom text that should be taken into account)
As for orange arrows between individual series ... that's complicated enough without HTML so it depends of context I believe. Is this an industrial process, webmarketing or else? To make it accessible, I'd use HTML images with alternative text trying to describe relationship.
Red arrows could be anchor links, probably.
I Think this image can be optimized pretty good, as it doesn't have a very complicated graphic. Therefore an easy solution can be just including it as an background image and then you can set the text and links into place using css.
A better solution is to break the picture into smaller components, then this way you can define "div" s with the background-color, border, and border-radios as the gray parts, and set the white elements as the background-image of "a" tag... However for the arrows I think you should include them as background-image...
Hope this helped...
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.
Today i found this site, "3D Meninas", with a nice effect of 3D animation. When I look at the HTML code, it seems that there is no <script> or event, so I guess it only works with CSS. I'm not a CSS guru, can someone tell me how it works ?
Thanks
It works by dividing the picture up vertically into single pixels and having a css hover pseudo-class for each one. There are 505 mentions of the word hover. If you are looking at the source in a viewer that doesn't wrap lines, note that the lines at the bottom are extremely long (scroll to the right).
The image is divided into about a hundred vertical "slices". When hovering over each slice, each image is placed in a precise and hard-coded fashion.
The feature with most depth, the right-hand wall, is simply squished and stretched by changing its width attribute.
Edit:
Here's the official explanation by the creator.