I want to make a plane with HTML element in webGL and can do an action like real HTML, example: make a button and when we click it, it give us an animation feedback and run the function. I already seek the answear and found html2canvas and rasterizeHTML.js but it just give like an image not natural HTML. Is there any library or any way for me to do like example above. Thanks in advance...
NOTE : For some reason i can't use CSS3DRenderer in Three.js
For example image you can see in the link below:
If I understand correctly, you're wanting to define an interactive user interface with HTML that is rendered with "3D perspective".
There are a few ways this can be done - one would be to not use WebGL at all, and instead use CSS3 transforms and perspective:
/* Add click handler to demonstrate that elements are still
interactive, even when orientated in 3D space */
const button = document.getElementById("clickme");
button.addEventListener("click", () => {
alert("hi!");
});
/* Optional - just for purpose of demonstration */
#keyframes movement {
from {
transform: rotateY(20deg);
}
to {
transform: rotateY(-20deg);
}
}
/* Define a "perspective wrapper" to give
the child elements the effect of 3D perspective */
.perspective {
width: 500px;
perspective: 500px;
perspective-origin: 50% 50%;
padding: 1rem;
}
.surface {
/* Style the UI surface using regular CSS */
background: red;
padding: 1rem;
text-align: center;
/* Orientates the surface in 3D space */
transform: rotateY(20deg);
animation: movement 5s infinite;
}
<div class="perspective">
<div class="surface">
<button id="clickme">Click me, I'm in 3D and I'm interactive!</button>
</div>
</div>
This approach retains the benefits of declarative HTML, the existing JavaScript DOM WebAPI, while also giving you smooth, hardware accelerated rendering of that HTML in 3D perspective.
Alternatively, if you are needing to render interactive user interfaces within a canvas element (ie, without CSS3 transforms), you could consider a library like Babylon.js which offers a pretty comprehensive GUI framework.
Here is an example show casing a fairly complex GUI rendered in 3D space, built using the Babylon.js framework - the caveat is that the GUI is defined with JavaScript (rather than HTML) however is more akin to the "Three.js way" of doing things.
In recent versions of the Google Chrome browser, javascript Alert dialogs, and Confirm dialogs, are not very visible. They don't make a sound when appearing, they're positioned near the top of the screen, and they're white so they blend in too easily with most websites.
This causes users to not realize the Alert is there, and since the Alert freezes the browser until dismissed, users can easily think their browser is frozen.
What are some ways to make the javascript Alert stand out more?
One option is to create your own Alert, using div overlays. However, doing that for Confirm dialogs would be more difficult, since you often want all execution to stop until the user chooses OK or Cancel on the Confirm dialog.
A great option is the following, which allows you to continue using the browser's Alert and Confirm dialogs:
Create these functions (uses Jquery but can be modified to Javascript):
function alrt(msg) {
var tint = $('<div class="PopupBgTint"></div>');
tint.appendTo('body');
alert(msg);
tint.remove();
}
function cnfrm(msg) {
var tint = $('<div class="PopupBgTint"></div>');
tint.appendTo('body');
var rtrn = confirm(msg);
tint.remove();
return rtrn;
}
In your CSS file, define PopupBgTint like so:
.PopupBgTint
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:99999;
}
Then, instead of calling
alert('Hello World') or confirm('Continue?')
instead call alrt('Hello World') or cnfrm('Continue?')
That's all there is to it. This will create a temporary tinted overlay covering your entire page, with the Alert/Confirm dialog on top of it, making the dialog MUCH more visible.
See example at:
http://jsfiddle.net/wcU3f/1/
(jsfiddle uses frames though, which negates part of the effect, but you get the idea how it'd function on a full webpage.)
I'm using CSS 3 text shadow to simulate bevel and emboss effect in my web app. The problem is IE 10 shows very bad looking shadow. I didn't checked it on IE 9 still now. But Can it be fixed?
This is the CSS I'm using ::
text-shadow: 0px 1px 1px #A4A4A4;
filter: dropshadow(color=#A4A4A4, offx=0, offy=-1);
Is there any javascript library to show text shadow in IE? or any other tricks that will help me? Or any extra CSS properties to add to solve this?
You could try the other shadow filter.
.shadow {
/* For IE 8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Or use a behaviour file that simulates CSS3:
http://fetchak.com/ie-css3/
Update: Sorry, I misread, that shadow filter is for box-shadow, not text-shadow.
Internet Explorer does not suppurt text-shadow, but you can simulate this with a drop-shadow and a glow filter, see this tutorial.
I'm having a problem with the opacity of a div when my site is viewed on Internet Explorer. Using Raphael 2.0 (un-minified) I create a rectangle using the following code:
var rIn = Raphael("myDiv", "100%", "100%");
rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", opacity:0.6});
In my CSS files if I have transparent divs using the opacity tag, I also write it include filter which seems to work fine for IE.
opacity:0.6; filter: alpha(opacity = 60);
However, Raphael does not appear to allow filter as a property, so this rectangle does not show up at all. This is only a problem on IE - it works on FF/Chrome/Safarai on Win/Mac without a problem.
filter only works for IE5-7. To support IE8, you need this property as well before your filter property:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
This QuirksMode article should help you as well.
Actually, try a class:
.opacity60 {
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
}
And set your rectangle's class to opacity60 via a setAttribute('class', 'opacity60') call.
I'm having problems with a transparent PNG image showing black dithered pixel artifacts around the edge of the non transparent part of the image. It only does this in Internet Explorer and it only does it from a Javascript file it is used in.
Here's what I'm talking about...
http://70.86.157.71/test/test3.htm (link now dead)
...notice the girl in the bottom right corner. She has artifacts around her in IE8 (I haven't tested it in previous versions of IE, but I'm assuming it probably does the same). It works perfectly in Firefox and Chrome. The image is loaded from a Javascript file to produce the mouseover effect.
If you load the image all by itself, it works fine.
Here's the image...
http://70.86.157.71/test/consultant2.png
How to fix this?
The image was produced in Photoshop CS3.
I've read things about removing the Gama, but that apparently was in previous versions of Photoshop and when I load it in TweakPNG, it doesn't have Gama.
FIXED!
I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.
I put this into a jQuery plugin to make it more modular (you supply the transparent gif):
$.fn.pngFix = function() {
if (!$.browser.msie || $.browser.version >= 9) { return $(this); }
return $(this).each(function() {
var img = $(this),
src = img.attr('src');
img.attr('src', '/images/general/transparent.gif')
.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
});
};
Usage:
$('.my-selector').pngFix();
Note: It works also if your images are background images. Just apply the function on the div.
I know this thread has been dead some time, but here is another answer to the old ie8 png background issue.
You can do it in CSS by using IE's proprietary filtering system like this as well:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.
I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
PNG transparency prоblеm in IE8
Dan's solution worked for me. I was trying to fade a div with a background image. Caveats: you cannot fade the div directly, instead fade a wrapper image. Also, add the following filters to apply a background image:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */
Please note that the paths in the src attributes of the filters are absolute, and not relative to the css sheet.
I also added:
background: transparent\9;
This causes IE to ignore my earlier declaration of the actual background image for the other browsers.
Thanks Dan!!!
please try below code.
background: transparent\0/;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
Dan Tello fix worked well for me.
One additional issue I found with IE8 was that if the PNG was held in a DIV with smaller CSS width or height dimensions than the PNG then the black edge prob was re-triggered.
Correcting the width and height CSS or removing them altogether fixed.
I use a CSS fix rather than JS to workaround my round cornered layer with transparent PNG inside
Try
.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}
This may require more work on ie9 or later.
Just want to add (since I googled for this problem, and this question popped first) IE6 and other versions render PNG transparency very ugly. If you have PNG image that is alpha transparent (32bit) and want to show it over some complex background, you can never do this simply in IE. But you can display it correctly over a single colour background as long as you set that PNG images (or divs) CSS attribute background-color to be the same as the parents background-color.
So this will render black where image should be alpha transparent, and transparent where alpha byte is 0:
<div style="background-color: white;">
<div style="background-image: url(image.png);"/>
</div>
And this will render correctly (note the background-color attribute in the inner div):
<div style="background-color: white;">
<div style="background-color: white; background-image: url(image.png);"/>
</div>
Complex alternative to this which enables alpha image over a complex background is to use AlphaImageLoader to load up and render image of the certain opacity. This works until you want to change that opacity... Problem in detail and its solution (javascript) can be found HERE.
My scenario:
I had a background image that had a
24bit alpha png that was set to an
anchor link.
The anchor was being
faded in on hover using Jquery.
eg.
a.button { background-image: url(this.png; }
I found that applying the mark-up provided by Dan Tello didn't work.
However, by placing a span within the anchor element, and setting the background-image to that element I was able to achieve a good result using Dan Tello's markup.
eg.
a.button span { background-image: url(this.png; }