I am rather new to CSS, and I was wondering if it is possible to crop an image to make dynamic shapes on my website. Instead of just having a rectangle or square for the photo, I want to be able to cut into it diagonally that matches the color of the sidebar, along with angled text right under. Is it possible for me to dynamically crop the image like this? Or would I have to make use of shapes and overlay them over the image?
An example of a mockup I made, I would like to be able to either crop the image to be slanted like this or overlay a shape to make it look more dynamic.
As #tacoshy mentioned you can use clip-path for creating in place image clipping, a pretty cool tool that can help you with creating complex clipping paths is https://bennettfeely.com/clippy/
Example:
.image-shape {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
<img class="image-shape" src="https://image.uniqlo.com/UQ/ST3/eu/imagesother/2020/ut/gaming/pc-ut-hero-mario-35.jpg" alt="Mario" />
More info about the clip-path property https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Related
I am trying to learn a little CSS trick using Text overflow: clip.
My aim is to create a title, of which the first one-and-a-half characters are visible, and the rest is clipped off. Using a small tilted divider line and the rest of the text has the first character clipped off.
I am stuck on how to make this look good and I have only managed to make the text clipped using a px or percentage value. I have not yet managed to get it clipped in an angle. -What would be the best way to tackle this?
Here I've included an example of what I want to try and write. Any help would be greatly appreciated!
Example
Thanks! Wick.
You can try using css clip-path . Eg:
clip-path: polygon(0% 0%, 100% 100%, 0% 100%, 0% 100%);
You can read more about it in the MDN docs and modify as per use.
I have a school project where i need to make a exact copy of a website.
The background is a bit tricky because i need to (what i think) add a radial ellipse but then with no sides or bottom, only the top.
when i try to make a ellipse i get a oval which covers all four sides (obviously) but i dont know hot to apply it to the top only.
can anyone help me out?
this is what is is supposed to look like
PLease pay attention to the background only
I already tried a ellipse and a normal radial gradient but i does not function how i want it to be.
this is the code i have
background-image: radial-gradient(ellipse, white, lightgrey, lightgrey,
#1b1b2e
#1b1b2e);
adjust your code like below:
html {
min-height:100%;
background-image: radial-gradient(150% 150% at bottom center, white, lightgrey, #1b1b2e, #1b1b2e);
}
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
I really like the look of crisp background images with a text overlay. However, I always seem to find the text is drowned out by the background image when I do them. So I am always looking for the correct solution or industry standard for using this background -> text technique.
Looking at this image from Adobe, the background image appears darker than the actual image. Using inspect element I cannot see what is causing this- no opacity or gradients. What technique are they using to darken this and what should be used in situations like this?
http://www.adobe.com/uk/products/experience-design.html
A quick look at the CSS of the element and here is your answer:
.hero2-fx-frame-2[class*="hero2-theme-1"]::after {
background-image: linear-gradient(rgba(0, 0, 0, 0.95), transparent 53%), linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent 53%);
}
It's basically a black layer with 53% of opacity.
Use independent divs. Don't nest the text div inside the image div. Then test different gradients on both divs until you get what you are looking for.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to create two divs like in image. both can have background images. Any one can help?
Two divs http://development.230i.com/tsips_new/v2/images/Untitled.png
There are several ways to do this.
Old School
One way would be to crop the overlaid image so that it has a triangle cut off and replaced by transparency. This would work in any browser that supported .pngs, however, the downside would be that for each image you'd need to create a new crop. A photo-shop batch process or server side image processing job on upload would cover this best, depending on whether you have full control over the images (photoshop) or are dealing with user uploaded images (server side processing)
Masking
By using css masks you could create a mask for the overlaying div that forced transparency through the overlaying div to the div beneath it. You'd want an image where the triangle cut-out is black and the rest transparent. The black area is the area that is retained, while the rest of the div is transparent, revealing the div underneath.
This answer here gives a working example, though the shape is different.
The syntax is pretty simple, you just define a -mask-image with a url that works like a background image. Prefixes are required and support is still a bit limited.
Clip Path
Clip path allows you to clip the overlaying div to let a div underneath show through. You can use this tool to set it up. I've nicked the following css from their output that defines a triangle on the bottom:
-webkit-clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
clip-path: polygon(100% 38%, 42% 100%, 100% 100%);
In this example, the overlaying div is clipped to the triangle shape allowing the white background to show through. Again, support is limited.
More about clip-path and masking.
With all examples
It's possible with all examples to swap the overlaying div to be the triangle or the square with a corner cut off. It makes no difference to the result.
Also, in all cases you'd need to use position to overlay the two divs on top of each other exactly. Like this:
.container {
position: relative;
}
.div1,
.div2 {
position: absolute;
}