I'm trying a simple test using html5. I have a tag which is connected to a streaming from a camera Axis IP:
<img id="stream" class="coveredImage" style="height: 323px;width: 646px;" src="http://192.168.2.65/mjpg/video.mjpg">
I see the streaming in the html page. Now I want to paint (lines, rectangles, whatever...) over this element. My doubt is how to do that and if is posible to do it. I think I need a element to put overlay the but I'm not sure about this. So I pleased if anyone could help me.
Thanks!
I would do something like this, with simple css:
#stream{
padding-top:10px;
border-top:1px solid #000;
}
and control it with padding
Related
I'm creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i'm not sure how to go about it.Here is an example of what i'm trying to achieve.Any guidance would be highly appreciated.
I am not sure why you've received so many down votes, but I know the solution to this. To achieve something like that type of design, you'll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
https://inkscape.org/ -- Inkscape
https://www.gimp.org/ -- GIMP
Use a png mask image on the picture.
https://i.stack.imgur.com/ReAR9.png
.wrap {position:relative;width:969px;height:300}
.wrap .bg {height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover}
.wrap .mask {position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0}
<div style="width:969px;margin:0 auto">
<div class="wrap">
<div class="bg"></div>
<div class="mask"></div>
</div>
<div>
Content
</div>
</div>
A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.
https://bennettfeely.com/clippy/
I am in the process of designing the layout for the pages of a hybrid Cordova/Android app where I need to use a non-standard, not rectangular, header. The shape I wuold like to get is like the one shown below
I am trying to accomplish this with pure CSS3 and have got a fairly decent result thus far as shown below.
body,html{padding:0;margin:0}
.ust
{
height:4vh;
width:100vw;
position:relative;
background-color:orange;
display:block;
}
.oval
{
position:absolute;
height:12vh;
width:160vw;
top:1vh;
left:-30vw;
border-radius:100%;
background-color:orange;
display:block;
}
.timer
{
position:absolute;
height:10vh;
width:10vh;
border-radius:100%;
background-color:orange;
left:calc(50vw - 5vh);
top:9vh;
}
<div class='ust'>
<div class='oval'> </div>
<div class='timer'> </div>
</div>
My effort does not look quiet as nice as the version I am trying to copy principally because of the way the "timer" element meets the "oval" - in a sharp corner. The roundedness of the junction in the sample image is missing.
I have tried to work in the roundedness using the timer::before/after pseudo-elements and playing with their individual borders but try as I might I cannot get that concave junction effect.
I'd be most grateful to anyone who might be able to suggest a way to accomplish this.
A great way to do that is with a clip path. This is a great website that generates the CSS code you need of the path to create that unique shape:
https://bennettfeely.com/clippy
I am trying to put a pdf object on my web page. The pdf loads fine, but it creates a gray area around the document. I know that the gray area is part of the pdf document and it is just part of the object, but I am trying to find out how to get rid of it. I have adjusted margins and padding. I have adjusted height and width to try and get it to go away. I have tried passing a zoom option to the pdf when it opens and nothing worked.
I want the document to load without creating any sort of edges or borders on the page. Any help would be appreciated. The markup that applies to it is below. I'm pretty sure it won't help much but you never know.
<article class="main_content">
<object id="resume_object" type="application/pdf" data="images/AlexsResume30Jan15.pdf">Alex's Resume</object>
</article>
article.main_content{
margin-top:70px;
}
#resume_object{
height:1190px;
width: 910px;
margin-left:20%;
margin-right:20%;
padding:-20px;
background-color:white;
}
.line
{
position:absolute;
z-index:2
top: 50px;
}
.otherclass
{
position:absolute;
z-index:1;
}
<div class="line">---</div>
<div class="otherclass"> my content </div>
Why top attribute not work? Is any alternative to z-index? (my pdf generator library probably does not support z-index tag)
EDIT:
I'm trying to generate PDF from HTML:
https://dpaste.de/2uZH
top from 70 line not work. How can I fix it?
There were older ways of doing this on the old Netscape but they are mostly gone now. I think z-index is it. Don't know what you are working on but I would keep in mind that html is not a page formatting language like pdf is. That is why we have both. html was designed to hint at what the browser should do. So can you turn the z-index blocks into divs and have them flow above, below or to the side of the other content?
I am currently working on a rails app, to ease the process of events I host within the game of Minecraft. For those of you who don't know, in Minecraft multiplayer, everyone has a skin. This is what their player looks like, and it is a simple *.png file. The face of a player is always in a certain position in the skin; by that I mean in certain pixel coordinates.
Players' skins are hosted online, so, for example, to access my skin (lachy2901), I would go to http://s3.amazonaws.com/MinecraftSkins/lachy2901.png. Using this, I can access and embed any particular player's skin in my webpage. The problem is, I only want to display the face, after making it a little larger.
My question is; is it possible for me to get this skin file, "crop" it to a certain size and location, and then render this, without changing the original image, which I can't do, or having to store my own versions?
Thank you very much for your time and help, it is greatly appreciated.
See the Demo
HTML
<div>
<img src="https://www.example.com/logo.png">
</div>
CSS
div{
width: 100px;
/*height:100px; specify height also if needed*/
overflow: hidden;
border: solid 1px;
}
img{
position: relative;
top: 20px;
left: -20px;
}