I've searched around quite a bit and I'm fairly certain this doesn't exist, I'm mainly looking to confirm that. What I'd like to do is have a div that makes everything behind it transparent -- similar to what canvas' destination-out compositing option does.
For a little more context, here's the situation. I have an OpenGL window drawing behind a QtWebKit overlay. The OpenGL window has multiple "subwindows" that can be overlapping, which are decorated using the WebKit overlay. When they overlap though, because of this two layer system, the decorations for the overlapped windows do not get occluded.
The backup option is just to use a full-window canvas for this (the window trimmings are fairly simple), but it would be nicer not to. Note that because this is an embedded WebKit instance, it doesn't need to be cross-browser, and something WebKit (or QtWebKit) specific is fine.
EDIT
I can't answer my own question within 24 hours, so here's my solution, with thanks to #Kevin Peno
The following is a simplified version of what I was looking for. It creates two divs "visible" and "invisible". "invisible" masks off "visible" so that it displays the background image behind it instead of the "visible" div.
The real keys are -webkit-mask-image (http://www.webkit.org/blog/181/css-masks/) and -webkit-canvas (http://www.webkit.org/blog/176/css-canvas-drawing/), so this will only work with webkit-based browsers.
HTML:
<html>
<body>
<div id="visible"/>
<div id="invisible"/>
</body>
</html>
JavaScript:
function updateMask()
{
var w = $("#visible").width();
var h = $("#visible").height();
var context = document.getCSSCanvasContext("2d", "mask", w, h);
context.fillStyle = "rgba(255, 255, 255, 1.0)";
context.fillRect(0, 0, w, h);
var my_off = $("#visible").offset();
var inv_off = $("#invisible").offset();
var rel_left = inv_off.left - my_off.left;
var rel_top = inv_off.top - my_off.top;
context.clearRect(rel_left, rel_top, $("#invisible").width(), $("#invisible").height());
}
$(window).ready(function()
{
updateMask();
$("#invisible").draggable();
$("#invisible").bind("drag", function(e, ui)
{
console.log("drag");
updateMask();
e.preventDefault();
});
});
CSS:
body
{
background-image: url(http://www.google.com/images/logos/ps_logo2.png);
}
#visible
{
position: absolute;
background-color: red;
z-index: 0;
width: 1000px;
height: 1000px;
top: 0;
left: 0;
-webkit-mask-image: -webkit-canvas(mask);
}
#invisible
{
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
cursor: move;
background-color: rgba(0, 255, 0, 0.5);
}
Here's a blog post about using css to apply an image mask to an element. It sounds pretty close to what you are looking for or will at least be good for some ideas. Let me know how it works out.
CSS Masks
Related
I was reading this answer but the approach proposed is purely theoretical. In my HTML5 code I've tried something like this:
<div id='gameCanvas'>
<div id="insideText">First trial</div>
</div>
and in the CSS I've put this:
#insideText{
background-color: transparent;
}
I'm quite a newbie when it comes to HTML/CSS, so I'm probably making some easy mistake, but this way I get a black line above my canvas, and the text appears in that black line. I want the text to appear over the canvas without this black line, and I would also like to know how to place some text on different areas of the canvas (my canvas is not fullscreen).
Edit:
If I put the <div> outside the canvas element it appears with a transparent background indeed, but always as a separate element from the canvas.
Your question isn't specific to three or canvas. It's just a basic HTML/CSS question which I'm sure is answered 1000 times on this site but since search sucks I'll answer again and leave it to someone with more patience to close as a dupe
To make 2 or more elements overlap you generally need a parent element. That element has to have css position: relative; or position:absolute;. That makes it the anchor/origin/base for its children. Note: <body> is already marked this way.
Then for all the children you can use position:absolute and set their positions with left, top, right, or bottom
Example
const ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'yellow';
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = 'red';
ctx.arc(150, 75, 125, 0, Math.PI * 2, true);
ctx.fill();
<h1>Some text</h1>
<div style="position: relative; display: inline-block;">
<canvas></canvas>
<div style="position: absolute; left: 1em; top: 1em;">foo</div>
<div style="position: absolute; right: 1em; bottom: 1em;">bar</div>
</div>
note: the display: inline-block; is to make the outer element fit the content rather than stretch to width of its parent (the body in this case). There are 100s of other ways to set the size of elements.
note that elements are transparent by default so no need to set the background color as transparent unless you set it somewhere else as non-transparent
const renderer = new THREE.WebGLRenderer();
document.querySelector('#gameCanvas').appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.add(
new THREE.Mesh(
new THREE.SphereGeometry(1),
new THREE.MeshBasicMaterial({color:'red'})
)
);
scene.background = new THREE.Color('yellow');
const camera = new THREE.PerspectiveCamera(45, 2, .1, 10);
camera.position.z = 2;
renderer.render(scene, camera);
#gameCanvas {
position: relative;
}
#insideText {
position: absolute;
left: 20px;
top: 20px;
}
<h1>some text</h1>
<div id='gameCanvas'>
<div id="insideText">First trial</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
I usually find answers here for every problem, but couldn't find this:
I'm trying to make a div to be fixed to top:50px.
However, when I scroll the page, this Div is scrolling up and the mentioned position is only applied as sort of a minimum scrolling position...
html:
<div class="homepage-hugger">
<div class="home-box" id="home-box-1">
--- Div's Content ---
</div>
--- some more stuff ---
</div>
JavaScript successfully adds the following css to the #home-box-1 Div:
$("#home-box-1").css({"position": "fixed", "top" : "50px"});
The result css is of course:
position: fixed; top: 50px;
Thanks for reading.
EDIT
Maybe more of my code will help...
So this is the css (scss) for .homepage-hugger and .home-box:
.homepage-hugger{
width: 100%;
background-color: #fff;
position: relative;
z-index: 50;
box-shadow: 0 0px 30px rgba(0,0,0,0.4);
.home-box{
position: relative;
height: 150px;
box-shadow: 0 -10px 20px -5px rgba(0,0,0,0.1) inset;
width: 100%;
max-width: 100%;
}
}
And the full related JavaScript that works as expected (it includes some unrelated code for other scrolling behavior) :
$(document).ready(function(){
function mobileCats(){
var catOffset = $("#home-box-1").offset().top;
var winScroll = $(window).scrollTop();
var boxPos = catOffset - winScroll;
console.log(boxPos <= 50);
if (boxPos <= 50){
$("#home-box-1").css({"position": "fixed", "top" : "50px", "left" : "0px"});
}
}
mobileCats();
$(window).scroll(function()
{
mobileCats();
var x = $(this).scrollTop(); /* scroll pos */
var y = $("html").height();
var z = x / y;
curTop = ((z*500));
$(".main-banners").css("top", (curTop)+"px");
});
});
After further investigation, I was able to find that position: fixed and transform: translate() could not be stacked due to mathematical reasons behind the scenes.
A class added by an add-on to a parent Div has added a transform: translate() style to it which made the position: fixed of the child Div impossible to compute.
To issue was resolved by taking the fixed Div out of all containers, putting it directly under body and repositioning it.
Thank you all for trying to help. appreciated.
I'm trying to make a normal HTML5 <button> that has an animated radial timer as a background.
My use case will be a button that refreshes a view. You can click it to refresh (thereby also restarting the timer), but the view will automatically refresh once every two minutes. This timer in the background of the button will serve as an indicator of how long it has been since it last refreshed and how long it will be until it automatically refreshes again.
I only need it to work in reasonably recent versions of Chrome, Firefox, and Safari. Don't sweat IE.
I managed to do what I wanted using SVG and a <polygon> that had its points recalculated using requestAnimationFrame, but it didn't work well in Firefox and it caused my MBP's fan to kick on. I'm sure I could do this in a <canvas>, but isn't there some way to do this using only CSS?
I know that the effect may be hard to visualize with my description above, so here are some examples that are close to what I'm trying to achieve.
These two use <canvas>, but you should be able to get the idea. I'm not looking for anything that fancy, though. A solid color is fine.
This one comes very close, but it uses SVG. Even though the animation is achieved with a CSS transition, the SVG is still taxing my CPU.
One final note is that I'm trying to make a background, not an overlay. Text (or in my case a fontawesome glyph) will sit on top of the background.
See if you can do anything with these classes and script.
var myCounter = new Countdown({
seconds: 120, // number of seconds to count down
onUpdateStatus: function (sec) {
}, // callback for each second
onCounterEnd: function () {
} // final action
});
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds,
updateStatus = options.onUpdateStatus,
counterEnd = options.onCounterEnd;
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
}
myCounter.start();
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
background: black;
}
.arc {
overflow: hidden;
position: absolute;
top: 0em; right:50%; bottom: 50%; left: 0em;
transform-origin: 100% 100%;
transform: rotate(90deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 8em grey;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
<div class="circle">
<div class="arc"></div>
</div>
I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example:
I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions...
Can anyone offer me some help? Or perhaps point me to a resource?
Thanks!
You could use border-radius.
See my example on jsFiddle.
Mine is a cleaner version of #Alex's:
Live Demo
.head {
-webkit-border-top-left-radius: 40% 80px;
-webkit-border-top-right-radius: 40% 80px;
-moz-border-radius-topleft: 40% 80px;
-moz-border-radius-topright: 40% 80px;
border-top-left-radius: 40% 80px;
border-top-right-radius: 40% 80px;
background: blue;
height: 280px
}
<div class="head"></div>
It obviously won't work in IE.
You could use CSS3 or webkit-specific properties, but this is not well supported as far as cross-browser compatibility is concerned. If you want to support as many browsers as possible, your best bet would be to use a background image to achieve this effect.
Here's a cross-browser version, which i made with help of jquery. Basically, the script creates many spans, with white background and decreasing width.
You can play around with STEPS and FACTOR variables, which will change the result. The step function sets the easing of the curve. You may replace it later with better functions than mine, it's just an example.
var STEPS = 53;
var FACTOR = 5;
var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
tmpWidth = stepWidth(i, width);
$span.clone().css({
'bottom': i + 'px',
'width': tmpWidth,
'left': (width - tmpWidth)/2
}).appendTo($el);
}
function stepWidth(i, width){
return -(1 / FACTOR * Math.pow(i, 2)) + width;
}
You can find the entire code (html + css on the Fiddle)
Here is another way of achieving this.
Draw an overlay with pseudo element with width and height larger than element itself.
Apply border-radius to create round effect and background-color.
Add overflow: hidden on parent to hide excess part.
Output Image:
body {
background: linear-gradient(lightblue, blue);
min-height: 100vh;
margin: 0;
}
.box {
position: relative;
margin: 5vh auto;
overflow: hidden;
height: 90vh;
width: 500px;
}
.box:before {
border-radius: 100% 100% 0 0;
position: absolute;
background: white;
bottom: -200px;
right: -200px;
left: -200px;
content: '';
top: 0;
}
<div class="box">
</div>
Since the webgl/opengl doesn't support text drawing, so it possible to draw 3D object using 3D context and text drawing using 2D context ?
No, unfortunately not.
The HTML 5 spec says that if you call getContext on a canvas element that is already in a different context mode and the two contexts are not compatible then return null.
Unfortunately "webgl" and "2d" canvases are not compatible and thus you will get null:
var canvas = document.getElementById('my-canvas');
var webgl = canvas.getContext("webgl"); // Get a 3D webgl context, returns a context
var twod = canvas.getContext("2d"); // Get a 2D context, returns null
As stated, you cannot do this.
However you can put one canvas on top of another and draw to them separately. I've done this before and it can work out quite well.
Create the text as a texture using canvas 2D, then render it in 3D. See here for a tutorial.
What I've been doing, whether I just need troubleshooting feedback or 2D text content on a 3D canvas, is just use CSS to put some HTML elements on top of the canvas.
You can make a canvas and a group of text fields share the same space, and ensure that the text fields are on top as follows:
HTML:
<div id="container">
<canvas id="canvas"></canvas>
<div id="controlsContainer">
<label>Mouse Coordinates</label>
<div>
<label for="xPos">X</label>
<span id="xPos"></span>
</div>
<div>
<label for="yPos">Y</label>
<span id="yPos"></span>
</div>
</div>
</div>
CSS:
canvas {
margin: 0px;
position: relative;
top: 0px;
left: 0px;
width: 100%;
}
#container {
position: relative;
}
#controlsContainer {
position: absolute;
left: 10px;
top: 10px;
z-index: 3;
}
#controlsContainer div {
padding-left: 8px;
}
#controlsContainer label {
color: white;
z-index: 4;
}
#controlsContainer span {
color: white;
z-index: 4;
}
The z-index will ensure which elements are in front, and position: relative for the container and position: absolute, in coordination with the top and left for the controls will ensure that they share the same space.
I have been having very good luck with this, and the troubleshooting feedback is invaluable.
An example of the Javascript (ES6 in this case) is:
let xPos = document.getElementById("xPos");
let yPos = document.getElementById("yPos");
let x = event.clientX - containerDiv.offsetLeft -parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-left"));
let y = event.clientY - containerDiv.offsetTop - parseInt(window.getComputedStyle(pageBody).getPropertyValue("margin-top"));
xPos.innerText = x;
yPos.innerText = y;
which I've placed in a mousemove handler.