I would like to use an htmlcanvas a canvas as the background of a webpage and then have various Vuejs components rendered on top of it.
I am sure the information is out there I just don't know what to search.
You can style any element using CSS with position: absolute to overlay the element on top of the canvas.
.container {
position: relative;
width: 300px;
height: 300px;
}
.canvas {
width: 300px;
height: 300px;
background-color: yellow;
}
.overlay {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: orange;
}
<div class="container">
<canvas class="canvas"></canvas>
<div class="overlay">
This is displayed on top of the canvas
</div>
</div>
Related
I'm trying to achieve the following:
I have an image in the background and a moving element in the foreground. I want to show the foreground element only while it's overlapping the background element. In the snippet below, the globe represents the background element, and the red square is the foreground element.
Here is a demonstration what I want it to look like:
The first things that came to mind were the css clip-path and mask-image properties, but I couldn't really get it to work.
Thanks in advance!
.world {
position: absolute;
top: 100px;
left: 100px;
}
.world img{
width: 300px;
height: auto;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 75px;
top: 200px;
}
<div class="world">
<img src="https://png2.kisspng.com/sh/bfd975773964bd26a28b9eecfb96b970/L0KzQYm3U8I6N5hwj5H0aYP2gLBuTgdwep1pRdl1b3LoPbTzigAuaaN5RddqcoTrPbTokwRwd58yTdNrZETkdom4VvU3QWczUKgBMEK2R4a4VcIzO2Y5UaUBMEm2SHB3jvc=/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696.8660237515223549360938.png"/>
</div>
<div class="testelement">
</div>
Here is an idea with mask. Simply use the same image inside the mask on the container where the size is defined by the image. Then make the red square inside that container:
.world {
position: absolute;
top: 100px;
left: 100px;
width:300px;
-webkit-mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
mask:url(https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png)
center/contain no-repeat;
}
.world img{
width: 100%;
display:block;
}
.testelement {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: -20px;
top: 150px;
transition:1s all;
}
.world:hover .testelement{
left:20px;
}
<div class="world">
<img src="https://i.ibb.co/2qmJjxR/kisspng-world-globe-clip-art-earth-cartoon-5abd4af816e696-8660237515223549360938.png">
<div class="testelement">
</div>
</div>
I'm trying to position a "seeker" in a div element that has other elements in it. I want the seeker to be able to move on top of the content div, without pushing other content around, while also following the scrollbar. The area is resizable so I can't use constant width/height. Like the seeker in a video editor would.
This is what I've gotten so far
#container {
width: 200px;
height:100px;
background-color: gray;
overflow: scroll;
}
#content {
width: 300px;
height: 120px;
}
#box {
width: 40px;
height: 40px;
background-color: green;
}
#seekerContainer {
position: relative;
width: 100%;
height: 100%;
}
#seeker {
width: 4px;
height: 100%;
position: relative;
background-color: blue;
left: 10%;
}
<div id="container">
<div id="content">
<div id="seekerContainer">
<div id="seeker"></div>
</div>
<div id="box"></div>
</div>
</div>
And I've tried different combinations having the seekerContainer and seeker be position absolute/relative, but either the seeker wont follow the scrolling, or it extends the height of the div.
Any pointers to fix this?
I think this is what you are looking for:
.container {
width: 200px;
height: 100px;
background-color: gray;
overflow: scroll;
}
.content {
height: 500px;
position: relative;
}
.box {
width: 40px;
height: 40px;
background-color: green;
}
.seeker {
width: 4px;
height: 100%;
position: absolute;
background-color: blue;
left: 10%;
top: 0;
}
<div class="container">
<div class="content">
<div class="seeker"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Also, you don't want to put id on every element and use id for styling. You should use classes for that. ID of the element has to be unique for the page so it's not very useful when you need to apply the same styling to more elements.
I need to make such an effect (jsfiddle), but with two photos.
It occurred to me to use skewed div who would hide part of the image and the second image is below.
And I know not how.
Please help me.
I thank you.
Code:
html:
<div id="container">
<img src="https://s31.postimg.org/l6m2amhm3/img.jpg">
<div class="man">
<div class="color"></div>
</div>
</div>
css:
#container {
height: 400px;
width: 700px;
position: relative;
}
#container div, #container img {
height: 100%;
position: absolute;
}
.man {
margin-left: 50%;
width: 50%;
}
.man:hover > div {
margin-left: -10%;
width: 25%;
}
.color {
background-color: rgb(181, 230, 247);
margin-left: 20%;
transition: all 0.5s;
transform: skewX(11deg);
width: 0;
}
I don't know how to explain this, but maybe in this case picture tells story instead of me:
Shortly if you cannot see it. I'm trying to place logo inside multiple areas (header, body, content) like a global image.
Is that possible with CSS, JavaScript, HTML, PHP?
And if it is, any guides or tips?
You can place your logo inside of the nav (in this case) section. The logo must be absolutely positioned, so that it doesn't mess up with other element's alignment, and your nav section must be relatively positioned, so the logo gets placed in relation to the nav container (even if it's absolute!).
You didn't provide any HTML/dimensions, so we're pretty much left to guess, but here's how it would look, picking arbitrary dimensions.
.nav {
position: relative;
height: 100px;
}
/* .logo is a child of .nav */
.logo {
position: absolute;
top: -50px;
height: 200px;
width: 200px;
left: 0;
}
Take a look:
body {
color: #fff;
text-align: center;
}
.header {
height: 100px;
background: red;
}
.nav {
position: relative;
height: 70px;
background: blue;
}
.logo {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: -50px;
}
.body {
height: 250px;
background: purple;
}
.footer {
height: 100px;
background: lightblue;
}
<div class="header"> Header </div>
<div class="nav">
<img src="http://www.udavinci.com/wp-content/uploads/2014/09/stackoverflow.png" class="logo"/>
Nav
</div>
<div class="body"> Body </div>
<div class="footer"> My Feet </div>
Alternatively, you may also place your logo outside of everything but inside of the body tag, and just use position: absolute, and tweak it's position (top, left, etc..), according to the dimensions of the relevant elements.
You can put your logo in header and position with :
.your-logo-class {
position: relative;
top: 100px; // Adjust this value
}
You could do it like this:
body { margin: 0; padding: 0; background-color: black;}
#top { background-color: red; width: 100%; height: 100px; }
#nav { background-color: blue; width: 100%; height: 50px; }
#content { background-color: green; width: 400px; height: 500px; margin: 0 auto;}
#footer { background-color: purple; width: 100%; height: 50px; }
<body>
<div id="top">
</div>
<div id="nav">
<img src="images/logo.png" style="padding: 10px;">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
Or you could add position: absolute; to the img style="" and then play around with the margin/padding.
Hmm, a logo is basically an <img> tag, you can place them where ever you like, just give all those <img> tags a class and style it the way you want.
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.