I need to crop the following image to the image after that.
Should be available on a website. (So no psd etc).
I tried with the clip-path tool but it doesn't seem to work properly.
So Maybe i need to use a tool, or there is a way with clip-path, Please let me know.
Here is the original image:
And here's the image it should be (there should on be 1 edge. so it's not quite this picture:
Thanks in advance.
Since I don't see any complex shape involved, this can be easily achieved through tweaking border-radius property of the image.
.image{
transform: rotate(-135deg);
height: 250px;
width: 250px;
margin-top: -5px;
margin-left: -35px;
}
.container{
height: 200px;
width: 200px;
border-radius: 50% 50% 50% 0;
overflow: hidden;
}
<div>
<img src="data:image/jpeg;base64,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">
</div>
<p>Initial Image</p>
<div class="container">
<img src="data:image/jpeg;base64,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" class="image">
</div>
<p>Final Image</p>
You can refer the snippet. However, if you wish to use clip-mask it would be easier to use it with an SVG-defined . Refer this for further reading.
EDIT: As pointed out by #fepegar With rotations other than multiples of 90 degree it does become a little trickier. If the image is to be cropped, then with certain changes in the margins of the image we can achieve the required output.
However, this is not highly effective in responsive environment.
Related
I am trying to achieve the following design:
https://imgur.com/a/iXhOTfR
My problem is that I don't want to use a png image as it is too large. Is there another way of achieving the cut image effect?
I am using a SVG file for the left blue part. This is what I achieved so far: https://imgur.com/a/bZSjOUH
Here is my HTML:
<section class="section">
<div class="section-mask">
SVG FILE
</div>
<div class="container-full">
<div class="row">
<div class="col-lg-6 column-text">
<h2 class="title">
Section Title
</h2>
<div class="paragraph">
Section Content
</div>
</div>
<div class="col-lg-6 column">
Section Widget
</div>
</div>
</div>
</section>
If I understand you correctly, you want to achieve something like multiple angled cuts with varying images and background colors. You can do this with something like the following, tailoring it to your needs, and through experimentation swap in different solutions but using the same basic tools.
These tools largely comprise:
clip-path, &
linear-gradient
This solution will provide a close match to the effect, but adapt to the users viewport. But in adapting, be aware that angles will necessarily change (but it should feel natural and fluid, unlike a fixed image that scales and feels unnatural as the viewport changes).
Clip path can be used to give shape to an element, and while the logic for "drawing" the desired shape can be tricky, Bennett Feely has a great tool called Clippy to work out the code.
Here's the 'cut design' demo on CodePen, and I'll include the working code here, as well, with a brief explanation.
The HTML is written assuming that this is part of a visual treatment for a page header, but adapt as needed. The CSS is a quick and dirty mock-up with clip-path arranged in a way to make the number pairs easy to scan and adjust at a glance:
header {
background-image: url(//unsplash.it/1600x900);
background-size: cover;
}
.cut-container {
background-image: linear-gradient(80deg, hsla(180, 100%, 40%, .5) 44.9%, white 45.1%);
}
.cut {
background: url(//unsplash.it/1600x600) center center;
background-size: cover;
clip-path: polygon(
0 0,
100% 0,
100% 70%,
0 100%
);
height: 20em;
}
.cut2 {
background: hsl(220,50%,30%);
clip-path: polygon(
50% 95%,
100% 25%,
100% 100%,
0 100%,
0 25%);
height: 15em;
}
<header>
<div class="cut-container">
<div class="cut"></div>
<div class="cut2"></div>
</div>
</header>
Clip-path is here used to make a polygon, and the number pairs indicate where to position the corners. Each pair corresponds to the number of angles in the shape, so one is a trapezoid, and the other is essentially an odd pentagon in a sort of M shape.
The middle bit is achieved with a hard linear-gradient over a background image. This is all done with random images drawn from the Unsplash API, but you could do something with background position, for example, and use whatever images you're working with in appropriate sizes and eliminate the large bandwidth issues in this rough demo.
Finally, note that for an angled linear-gradient with a sharp cut, most monitors will produce a jagged edge. To effect anti-aliasing and the appearance of a smooth edge, use values that are close but not exact. Here, .cut-containeruses 44.9% and 45.1%, which looks smooth.
With a little more work and appropriately sized images, you can use some of these techniques to build the kind of design you're after with pure CSS and without complex transforms or images that don't adapt to viewport. The support isn't bad on this for modern browser, and those that lack support will ignore the clip-path and fall back to solid blocks, which I really believe is better than fighting through a complex solution for a cosmetic effect, or making high rendering demands of older browsers.
How about making a rotated css block that overlays the image while staying below the svg?
body {
overflow-x: hidden;
}
.image {
background: grey;
width: 100%;
height: 100px;
}
.cut {
border: 1px solid red;
width: 200%;
height: 150px;
transform: rotate(-5deg);
background: white;
padding: 50px;
transform-origin: 0% 50%;
position: absolute;
}
.svg {
border: 1px solid green;
position: relative;
z-index: 1;
}
<div class="image">This would be the image</div>
<div class="cut">This is the CSS block</div>
<div class="svg">This would be the SVG</div>
I've been given a design to develop and the design uses numerous circular layout items and I'm a little unsure how to go about this, I've tried using SVGs, PNGs etc but it's not playing ball.
For example, this section of the design looks like this
But when I try using an SVG, I end up with this
That ^ show a section with a grey background and above is an SVG which has a grey bottom and green line through it, I've tried using an SVG which is white on the top, grey on the bottom and has that green line through the middle, but when I try to replicate the design I run into the problem that SVG doesn't have the image so it cuts off as you can see. Here is an example of my code:
HTML:
<img src="img/line-05.svg" class="svg" />
<section class="bgYellowGrey">
<div class="column two">
<div class="numWrapper"><p class="number">2</p></div>
<h2>Title</h2>
<h3>Subtitle</h3>
<p>Paragraph text</p>
</div>
<div class="column two">
<img id="image-03" src="img/third-image.png" />
</div>
</section>
CSS (of which is relevant):
section{
position: relative;
float: left;
}
.column{
float: left;
}
.two{
padding: 10px 2%;
width: 46%;
}
#image-03{
margin-top: -150px;
}
.svg{
position: relative;
width: 100%;
z-index: 99999;
}
The SVG in question is this (screenshot from illustrator):
The design is totally based around this layout unfortunately. Is there any other convention or simple method of doing replicating the design? I guess I just need to find a way to clip into a div/svg? Any help would be appreciated.
This may be hard to explain but do tell me to explain further on bits and I shall.
Okay, this seems to be an issue with so many potential solutions but none that will work for what I want to do. I always want to display perfect circles, even if the underlying image is not a perfect circle. But, I don't want to specify an image dimension by px because I want it to be responsive. It seems that no matter which solution I try, the circles always either become warped into ovals or the picture dimensions completely take over and make it gigantic.
HTML:
<div class='item-image'>
<img class='img-circle img-responsive img-center' src='#' />
</div>
Goal:
Regardless of the image size (rectangles), I want the part of the image beneath the red circle to show through.
The best way to do this is per overlay. And make the circle with CSS!
<div class="wrapper">
<img src="#" class="img-responsive">
<div class="circle"></div>
</div>
.wrapper has position: relative and .circle has position: absolute and border-radius: 100%.
The wrapper has to be positioned with inline-block. Center the wrapper with text-align: center.
Center an absolute positioned element as follows:
.el {
position: absolute;
top: 50%;
margin-top: -(height / 2)%;
left: 50%;
margin-left: -(width / 2)%;
}
If you want the image inside the circle, make the circle bigger.
Example
HTML:
<div class="circle">
</div>
and use css for image in background:
.circle{
border: 2px solid red;
width: 200px;
height: 200px;
border-radius:100%;
background-image: url('')
}
check the fiddle
I am currently trying to use svg files instead of images for modern browsers on a new fluid site. The idea is to use an SVG as a background image on a fluid div which can then be changed on hover and we can use modernizer (or similar) to fallback to the use of img backgrounds for unsupported browsers.
In theory this is all fine however on certain browsers (particularly Firefox) the right and bottom edges of the svgs have some strange pixelation at certain sizes which doesn't happen for imgs.
So if you view http://jsfiddle.net/deshg/xuq6812g/ you can see a grid of 4 x 25% columns each with a div or img (that is 100% width). Each one has either a div with svg or img background or an img element with the svg/img as the src. If you view this in FF and make it bigger/smaller you'll see at certain sizes the degradation i'm talking about. You can also see this in the image below (the areas circled in blue are the degraded bits which you can see occurs on the svg but not the img).
Can anyone shed some light on why this is happening and how to prevent it as it makes SVGs largely unusable in this way if it can't be fixed
CSS
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.container {
float: left;
width: 25%;
height: 100%;
}
.container img {
width: 100%;
}
.container div {
background-size: cover;
width: 100%;
padding-top: 100%;
}
HTML
<div class="container">
BACKGROUND SVG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
</div>
</div>
<div class="container">
BACKGROUND IMG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
</div>
</div>
<div class="container">
SVG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>
<div class="container">
IMG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>
From working with vector images for years and years, when you crop them accurately, yet they need aliasing, then the crop looks odd -- flattened at the curves. So circles, text, logos, and so forth need some extra edge in the view box. Here I've add a lot more, but you get the idea.
DEMO with before and after: http://jsbin.com/buquw/1/edit
ORIGINAL -- cropped accurately, but too close, because this image needs aliasing.
NEW VERSION -- you don't need this much, used to exaggerate the situation:
I am trying to resize an image with a percentage of itself. For example, I just want to shrink the image by half by resizing it to 50%. But applying width: 50%; will resize the image to be 50% of the container element (the parent element which maybe the <body> for example).
Question is, can I resize the image with a percentage of itself without using JavaScript or server side? (I have no direct information of the image size)
I am pretty sure you cannot do this, but I just want to see whether there are intelligent CSS only solution. Thanks!
I have 2 methods for you.
Method 1.
This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.
img {
transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />
Browser support note: browsers statistics showed inline in css.
Method 2.
#wrap {
overflow: hidden;
position: relative;
float: left;
}
#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}
#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#img_wrap img.normal {
width: 50%;
}
<div id="wrap">
<img class="fake" src="https://via.placeholder.com/300x200" />
<div id="img_wrap">
<img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
</div>
</div>
Note: img.normal and img.fake is the same image.
Browser support note: This method will work in all browsers, because all browsers support css properties used in method.
The method works in this way:
#wrap and #wrap img.fake have flow
#wrap has overflow: hidden so that its dimensions are identical to inner image (img.fake)
img.fake is the only element inside #wrap without absolute positioning so that it doesn't break the second step
#img_wrap has absolute positioning inside #wrap and extends in size to the entire element (#wrap)
The result of the fourth step is that #img_wrap has the same dimensions as the image.
By setting width: 50% on img.normal, its size is 50% of #img_wrap, and therefore 50% of the original image size.
This has got to be one of the simplest solutions using the container element approach.
When using the container element approach, this question is a variation of this question. The trick is to let the container element shrinkwrap the child image, so it will have a size equal to that of the unsized image. Thus, when setting width property of the image as a percentage value, the image is scaled relative to its original scale.
Some of the other shrinkwrapping-enabling properties and property values are: float: left/right, position: fixed and min/max-width, as mentioned in the linked question. Each has its own side-effects, but display: inline-block would be a safer choice. Matt has mentioned float: left/right in his answer, but he wrongly attributed it to overflow: hidden.
span {
display: inline-block;
}
img {
width: 50%;
}
<span>
<img src="https://via.placeholder.com/300x200"/>
</span>
Edit: As mentioned by trojan, you can also take advantage of the newly introduced CSS3 intrinsic & extrinsic sizing module:
figure {
width: intrinsic;
}
img {
width: 50%;
}
<figure>
<img src="https://via.placeholder.com/300x200" />
</figure>
However, not all popular browser versions support it at the time of writing.
Scale the image:
img {
transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />
Another solution is to use:
<img srcset="example.png 2x">
It won't validate because the src attribute is required, but it works (except on any version of IE because srcset is not supported).
This is a very old thread but I found it while searching for a simple solution to display retina (high res) screen capture on standard resolution display.
So there is an HTML only solution for modern browsers :
<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>
This is telling the browser that the image is twice the dimension of it intended display size. The value are proportional and do not need to reflect the actual size of the image. One can use 2w 1px as well to achieve the same effect. The src attribute is only used by legacy browsers.
The nice effect of it is that it display the same size on retina or standard display, shrinking on the latter.
This actually is possible, and I discovered how quite by accident while designing my first large-scale responsive design site.
The overflow:hidden gives the wrapper height and width, despite the floating contents, without using the clearfix hack. You can then position your content using margins. You can even make the wrapper div an inline-block.
.wrapper {
position: relative;
overflow: hidden;
}
.box {
float: left; /* Note: 'float:right' would work too */
}
.box>img {
width: 50%;
}
<div class="wrapper">
<div class="box">
<img src="https://via.placeholder.com/300x200" alt="">
</div>
</div>
function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
$(idOrClass+className).each(function(){
var shrunkenWidth=this.naturalWidth;
var shrunkenHeight=this.naturalHeight;
$(this).height(shrunkenWidth*percentShrinkage);
$(this).height(shrunkenHeight*percentShrinkage);
});
};
$(document).ready(function(){
'use strict';
shrinkImage(".","anyClass",.5); //CHANGE THE VALUES HERE ONLY.
});
This solution uses js and jquery and resizes based only on the image properties and not on the parent. It can resize a single image or a group based using class and id parameters.
for more, go here: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5
I think you are right, it's just not possible with pure CSS as far as I know (not cross-browser I mean).
Ok I didn't like my answer very much so I puzzled a little. I might have found an interesting idea which could help out.. maybe it IS possible after all (although not the prettiest thing ever):
Tested and working in Chrome, FF and IE 8&9. It doesn't work in IE7.
#img_wrap {
display: inline-block;
position: relative;
}
#rescaled_img_wrap {
width: 50%;
}
#original_img {
display: none;
}
#rescaled_img {
width: 100%;
height: 100%;
}
<div id="img_wrap">
<img id="original_img" src="https://via.placeholder.com/300x200" />
<div id="rescaled_img_wrap">
<img id="rescaled_img" src="https://via.placeholder.com/300x200/dddddd" />
</div>
</div>
This is a not-hard approach:
div {
position: absolute;
}
img,
div {
width: ##%;
height: ##%;
}
<div>
<img src="https://via.placeholder.com/300x200" />
</div>
Although it does not answer the question directly, one way to scale images is relative to the size (especially width) of the viewport, which is mostly the use case for responsive design. No wrapper elements needed.
img {
width: 50vw;
}
<img src="https://via.placeholder.com/300x200" />