Mix two .png images with alpha border with CSS - javascript

Is there a way to blend two PNG images to make perfect match when they both have border with alpha on it?
This is an example of the issue that I have:
img {
position: absolute;
left: 0px;
top: 0px;
}
.container {
height: 512px;
width: 512px;
}
<div class="container">
<img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
<img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" alt="Cube">
</div>
Or a link to CodePen
The situation is that I have two 3D renders that are saved as PNG's, and both have alpha border with 50% transparency that will do a perfect match if you merge them in Photoshop and/or After Effects.
But when creating the same situation in HTML/CSS we got a white line between the elements.
After doing some reading about mix-blending-mode and background-blending-mode and do some testing with them it doesn't seems to help. We think that both of the images (their alpha channels) pre-multiplies with the background and that is why you would get semi transparent line between them (where the border is).
Is there a way to achieve this with CSS, or even maybe JavaScript/jQuery?
Edit: So we won't get into more comments on images moving and css tricks on that. It is not an option to remove that 1px, or to hide it since the big picture would not have the same look.

This isn't a matter of premultiplying with the background -- it's that along the border you have partially-transparent pixels from both images in the same position, which lets the background bleed through. 50% transparency plus 50% transparency doesn't equal 100% opaque.
Rather than fiddling with dropshadows or pixel-adjustments to patch over the problem after the fact, I think you'll need to adjust the image masks themselves. (I don't believe there will be a CSS or JS solution to this because there's no programmatic way to determine what the intended result is.)
If you're only stacking two images, this is easy -- don't put any alpha channel on the "bottom" image, put one only on the "top" image, and you're done.
If you need to stack more than two (or if you need a mask on the background image to allow the page background to show through), you'll have a few options:
wherever the border between images would cause this bleed-through, use a 1-bit alpha channel on the "bottom" image in the stack. So if you were stacking the "sphere" image above the "cube" image, the cube would have no partial transparency along the border between sphere and cube, all the pixels along the border would be 100% opaque. The sphere's partial transparency would smooth out the border so you don't see a pixelated fringe.
Make the masks on the bottom images one pixel bigger than they currently are. This is the lazy way of accomplishing (1).
pre-multiply the color within the images themselves - not with the background but with the other images that would otherwise overlap. The colors along the border darken to make up for the white color that would otherwise bleed through. (As is probably obvious this one's a little outside my area of expertise so I can't suggest exactly how to calculate the precise colors...)

There is a minor pixel difference. shift you cube by 1px to the top and tothe left and you are good to go.
img {
position: absolute;
left: 0px;
top: 0px;
}
#cube{
top:-1px;
left:-1px;
}
.container {
height: 512px;
width: 512px;
}
<div class="container">
<img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
<img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" id="cube" alt="Cube">
</div>

Try it help full solution
i have add only some css .container img:last-child{ left: -1px; top:-1px; position:absolute }
img {
position: absolute;
left: 0px;
top: 0px;
}
.container img:last-child{ left: -1px; top:-1px; position:absolute }
.container {
height: 512px;
width: 512px;
}
<div class="container">
<img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
<img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" alt="Cube">
</div>

Unfortunately, there's no way of removing that gap without actually moving the elements around or modifying the actual images. However you, can fake it by applying a drop shadow to each of the images to hide it. Kind of like applying makeup to remove blemishes. This does add a slight blur on the edges of the images, though, so it's not a perfect solution.
img {
position: absolute;
left: 0px;
top: 0px;
filter: drop-shadow(0 0 1px #000);
}
.container {
height: 512px;
width: 512px;
}
<div class="container">
<img src="https://image.prntscr.com/image/VmxphMVDQSu-OXXnHQm1Tg.png" alt="Sphere">
<img src="https://image.prntscr.com/image/n0cbaO-4QVOk_PQ8ESQRqQ.png" alt="Cube">
</div>

Related

Is it possible to make a div work like how a "layer mask" would? [duplicate]

I have a background image that has background-size:cover; applied to it and then a series of divs overlaid which I would like to become individual clipping masks.
I've looked at the feature clip: rect(20px, 20px, 20px, 20px,); however as the divs are brought in through a CMS system, it will be inappropriate to define set sizes.
Is there a way of setting the div with a clipping mask property so that it clips the image anywhere the div is placed on the page?
I don't particularly want to use an image overlay either as this site will be responsive.
The clip-path CSS property can be applied to all HTML elements, SVG graphic elements and SVG container elements:
http://www.html5rocks.com/en/tutorials/masking/adobe/
If I understood correctly, you're simply looking for an overlay that will resize with the screen size, and the div with the background image?
In that case, if possible, why not simply append these divs INSIDE the div that needs clipping, like this. For this sample purpose I only used one div with a transparent background and a border applied to it. If you need to clip the image in a non-rectangular shape, you will need more divs (ex. for parallelogram, diamond, triangle shape, you'll need at least 2).
Also, sadly CSS doesn't allow for % borders, but I think this example is
You can also do it the other way around and place your img div inside the clipper divs; just a matter of what fits best...
body, html {
/* necessary for sizing children in % */
width: 100%;
height: 100%;
}
#tobeClipped {
width: 80%;
height: 40%;
position: relative;
background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg');
background-size: cover;
}
#tobeClipped>div {
position: absolute;
}
#clippers {
width: 100%;
height: 100%;
border: 20px solid grey;
border-left-width: 100px;
box-sizing: border-box;
}
<div id="tobeClipped">
<div id="clippers"></div>
</div>
Please do clarify if this was not at all what you were looking for.

How to equally space three code blocks in Squarespace across the full display width?

Using Squarespace, I want to understand how to use CSS to distribute three code blocks across the entire screen width and have the CSS dynamic to accommodate different screen sizes.
Summary: I have three code blocks on a page in Squarespace. Each code block is named "codeblock1", "codeblock2" and "codeblock3" (I also identified the block IDs such as #block-be6b8b856f896c0d000) for each codeblock. Each code block results in displaying one photo. I'd like to take advantage of using the entire screen width and would like the code blocks to equally span the entire screen width, and have this dynamic to accommodate different screen sizes.
I'd like to understand how to control this using CSS. For example, I've been able to move the left-most codeblock to the left using code (changing the left margin to -300 versus 0):
#block-48747d3bb62b559a0000 {
margin-left: -300px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
However, this doesn't work if I change the browser size, and it also doesn't work for the other two code blocks. Perhaps if someone could specifically explain how to do this in SS (in particular explaining where code should go) that would be fantastic.
**EDIT:
Thanks for the fast responses! This worked using the solution by #Chris. I made the following modifications to get the layout that I was looking for:
.image {
width: 33vw
position: absolute;
}
#block-3e9110aac8284e2c1234 {
left: -15vw;
width: 130%;
}
#block-48747d3bb62b559a5678 {
left: -5vw;
width: 130%
}
#block-be6b8b856f896c0d9102 {
left: 5vw;
width: 130%
}
** Please note: for those not aware, Squarespace has fixed margins for the body of any webpage. If you want items to span an entire computer screen, you need to modify your CSS to move items to the left or right of the fixed margins. Using the #Chris solution, the only way I could get the leftmost div to move to the left of the margin was use use a negative vw (-15vw); once I did that, I had to make other modifications to get the divs to equally distribute across the screen (the middle div was "-5vw" and the right-most div was "5vw"). This probably also has to do with the size of each block that I'm distributing - I ended up increasing their size by 130%.
I noticed that this solution caused a new problem: when this page renders on an iPhone, the images are too big (they don't re-size correctly to fit the iPhone screen) and they are sequentially offset left to right (they are not centered).
First of all, instead of using "margin-left", you can just use "left" to position the image. Second of all, you can use "vw" instead of "%" to size the image so that it always has the same width relative to the windows' width. I have tried to make a rough version of this down below
.image {
width: 33.33vw;
position: absolute;
}
.image1 {
left: 0;
}
.image2 {
left: 33.33vw;
}
.image3 {
left: 66.66vw;
}
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image image1">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image image2">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image image3">
You can easily accomplish that using flexbox is very easy to use and is well supported at this time.
.container {
display: flex;
}
.imageCont {
width: 33.33%;
}
.image {
width: 100%;
}
<div class="container">
<div class="imageCont">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image">
</div>
<div class="imageCont">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image">
</div>
<div class="imageCont">
<img src="https://th.thgim.com/opinion/op-ed/article22695424.ece/alternates/FREE_300/9thscience" alt="image" class="image">
</div>
</div>

featherlight.js - possible to use it together with img-zoom WITHIN the lightbox?

I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!

Resize and center image in html/css?

Is there a way I can resize, crop, and center an image using html/css only? (img tag or css sprite)
For example if I have a 500x500 pixel image,
I want to resize that to a 250x250 pixel image
I want to make the actual visible image to be 100x100, but still have the scale of a 250x250 sized image.
I want the center of the image to be at a location x,y.
Is that possible with only html/css, if not, how do you propose I go about it with javascript?
Edit - 動靜能量:
For (2), say my scaled image is now 200x200, and I want my visible image to be 100x100: So I guess what I mean is I want the scale and resolution of the image to be 200x200 but I want the visible image to be 100x100 or in other words the visible image would be at coordinates x,y: 0,0; 0,100; 100,0; 100,100; of the 200x200 image. Sorry, but I'm not good at explaining this.
Update: an example at http://jsfiddle.net/LTrqq/5/
For
You can just use CSS's width and height for the <img> element
It can be done by (1), and place this image into a div, and position: absolute, with a desired top and left, and place it in another div with position: relative, and this outer div can have width: 100px, height: 100px, and overflow: hidden
same as (2), with the desired top and left value.
We need the position: relative for the outer div in (2), because we want the inner div to position relative to this outer div, rather than relative to the whole document.
For the top and left, it is like top: -50px; left: -50px as an example.
Just done this off the top off my head but it should be nearly there if not completely accurate. The -X and -Y coordinates are what get you to the crop offset. So for example if you want to crop from 20x30 you'd make them -20px and -30px.
<style>
#crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
#crop img { position: absolute; left: -X; top: -Y; }
</style>
<div id="crop">
<img src="500x500.jpg" width="250" height="250">
</div>
If you want to center it though and you know the size of the image in the crop container you could use the following CSS instead:
#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }
125px is half of 250 so it should make it central.
You can definatley size the image to any dimenson then place it in a div and hide the overflow to acheive a crop look. However if you actually want to crop the image so that say someone wants to download a copy of it cropped and scaled check out: http://deepliquid.com/projects/Jcrop/demos.php
But if you can at all try PHP, http://www.binarymoon.co.uk/projects/timthumb/
is very easy to use, just put it on your server and point your img tag src to it.
example: < img src="/timthumb.php?mycat.jpg&h=250&w=250" />

Transparent PNG Reacting to Sites Image Sliders and Content

I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.

Categories

Resources