How can I achieve to get something like this? Can you help me?
You can achieve that with CSS.
The idea is to have 3 blocs :
a container (which will contain the image as background)
an empty block which will be rotated to simulate the triangle
a div wich will contain the text
The idea is to rotate the empty block to get the angle you need.
To create the "triangle" effect, we use the overflow:hidden on the container to act as a mask (you also need to make the rotated block bigger than hte container to cover it despite the rotation).
Then you define the triangle & content blocks positions & z-index to superpose them.
Note : You don't necessary have to put the image as the background of the container block. you can also display with an img tag and use z-index again to display the 3 blocks on top of each other.
.container,
.rotated-block {
display:block;
}
.container {
background: #000000;
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
}
.rotated-block {
position: absolute;
zi-index: 1;
width: 100%;
min-height: 150%;
background: #FFFFFF;
transform: rotate(-20deg);
left: -40%;
top: -7%;
}
.content {
position: relative;
z-index: 3;
top: 35%;
left: 10%;
}
<div class="container">
<div class="content">
<p>Purly made with HTML & CSS</p>
</div>
<div class="rotated-block"></div>
</div>
You can use multiple background mixing image + gradient:
body {
margin:0;
background:linear-gradient(65deg, white 45%, transparent 45%), url(http://lorempixel.com/600/400/nature);
background-size:auto auto, cover;
}
/* demo makeup */
div {
height:100vh;
width:50%;
display:flex;
}
p {
margin:auto;
}
<div><p>Whatever is on left</p></div>
If the final idea is to have two different image, you may also take a look at mix-blend-mode and this demo http://codepen.io/gc-nomade/pen/JRdEVO made for a similar question here ...
edit 2021
CSS shape are now well implemented and shape-outside could be usefull here :
example with CSS shape (clip-path/shape-poutside/shape-margin) and CSS calculation.
.half-slant {
display: flex;
}
.half-slant header {
flex: 1;
text-align: right;
background: #ededed;
}
.half-slant header img {
float: right;
height: 100%;
clip-path: polygon( calc(100% - 55vw) 0, 100% 0, 100% 100%, calc(100% - 45vw) 100%);
shape-outside: polygon( calc(100% - 55vw) 0, 100% 0, 100% 100%, calc(100% - 45vw) 100%);
shape-margin: 0.5em;
max-width: 100%;
}
.half-slant h1 {
margin-top: clamp(1em, 40vw, 8%);
}
<section class="half-slant">
<header>
<img src="https://picsum.photos/id/1001/1200/400">
<h1>Title</h1>
<p>some text below</p>
<p>and more</p>
</header>
</section>
Here is an article that might help you out: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
Related
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
It's easy to make a simple responsive circle using vw units.
<div style="height:20vw; width:20vw"></div>
However, I'm looking to use a min-height of an element and have a circle around this div.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
I was playing around with this:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
Clip-path can easily do this if you consider solid coloration.
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly
To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
I tried my hardest to figure this out with pure css. Though the problem with css I could not figure out how to calculate the diameter of the circle based on the content div size; the length from top left corner to bottom right corner of the variable height div.
I'm not sure if can be done using the calc() css function.
But I did manage to do it with a little jquery (which could easily be changed to pure javascript if you are not using jquery).
See working resizable example below (follow my comments in code)
Note: If you are using internet explorer the resizable demo content div will not resize.
// circumscriber for variable size divs
function circumscriber() {
// for each variable size div on page
$(".variable-size").each(function() {
// get the variable size div content width and height
let width = $(this).outerWidth();
let height = $(this).outerHeight();
// get the diameter for our pefect circle based on content size
let diameter = Math.sqrt(width ** 2 + height ** 2);
// extra 15 pixel circle edge around variable size div
let edge = 15;
// add current circle size width css
$('.circle', this).css({
'width': (diameter + (edge * 2)) + 'px'
})
});
}
// run the circumscriber (you might wana do this on ready)
circumscriber();
// if the window is resized responsively
$(window).on('resize', function() {
circumscriber();
});
// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
this.style.height = "";
this.style.height = ( this.scrollHeight - 30 ) + "px";
circumscriber();
}).on('mouseup', function() {
circumscriber();
});
/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* resizable text area for demo */
/* again not needed */
.variable-size .content {
padding: 15px;
background: #fff;
resize: both;
overflow: auto;
color: #000;
border: none;
width: 200px;
font-weight: bold;
}
.variable-size .content:focus {
outline: 0;
}
/* child circle div css */
.variable-size .circle {
position: absolute;
background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-position: center center;
z-index: -1;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
width: 0;
}
/* fast way to make circle height the same as current width */
.variable-size .circle:before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
/* demo window css */
HTML,
BODY {
height: 100%;
min-height: 100%;
background: black;
position: relative;
font-family: "Lucida Console", Courier, monospace;
}
<div class="variable-size">
<textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME ↘"></textarea>
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See jsfiddle here... https://jsfiddle.net/joshmoto/6d0zs7uq/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Source: https://www.w3schools.com/
You could use flex display and insert empty flex-items around the inner div and use flex-basis to fix their width.
Try this
.square {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: black;
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
.emptyDiv {
flex-basis: 120px
}
<div class="square">
<div class="emptyDiv"></div>
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
<div class="emptyDiv"></div>
</div>
I want to get the result below but without using the at syntax because it's not supported in Safari, I'm having a hard time with it. Does any one know any approach? Thank you in advance!
#content {
background-color: black;
height: 300px;
width: 500px;
}
#inverted-circle {
background: radial-gradient(110% 200% at 50% 0, white 49.9%, rgba(255,255,255,0) 50.05%);
position: relative;
content: '';
height: 220px;
width: 100%;
}
<div id="content">
<div id="inverted-circle"></div>
</div>
It's still not working on Safari on iOS
Consider background-size/background-position. You make the background twice bigger in height, you divide the vertical radius by 2 and you place your background at the bottom.
#content {
background-color: black;
height: 300px;
width: 500px;
}
#inverted-circle {
background:
radial-gradient(110% 100%, white 49.9%, transparent 50.05%)
bottom/
100% 200%;
height: 220px;
width: 100%;
}
<div id="content">
<div id="inverted-circle"></div>
</div>
Related to get more details: How to animate a radial-gradient using CSS?
You can also optimize your code with only one element:
#content {
height: 300px;
width: 500px;
background:
radial-gradient(55% 36.5%, white 99.5%, black 100%)
bottom /
100% 200%;
}
<div id="content">
</div>
I'm wondering if it's possible to reproduce this text effect:
It should appear as if the text highlights were reducing the opacity of the images. I guess what you need is a copy of the background layer getting masked in the shapes/positions of the text highlights. But is there a way to really make these masks automatically resize/reposition according to the lines of text? Or any other way to achieve the effect?
This might better explain what I'm after:
You might be looking for the css property background-attachment: fixed. This does have the caveat that the background will no longer scroll with the page and remain static, but this way you can guarantee the overlap between the element background and the container background remain the same. There is a fix for the scrolling issue via javascript, for a minor overhead cost, depending on how heavy the graphics are for the browser to render/reposition.
Then you simply apply the same background to the background containing element(.wrap in my case) and the text containing element(wrap in my case) and you get your desired effect as shown in your second image.
Then put the mark in a paragraph element and repeat the text twice. Once in the paragraph, once within the mark.
Then set the paragraph to position relative, and the mark to absolute, so they overlap each other perfectly. This is to counteract the wrap being transparent and not showing the text properly, as the text also becoming transparent.
.wrap, .wrap mark {
background-image: url('https://i.imgur.com/hAodNjT.jpg');
background-attachment: fixed;
}
.wrap p {
position: relative;
}
.wrap mark {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
}
img {
width: 300px;
height: auto;
}
.wrap {
padding-top:160px;
position: relative;
width: 400px;
height: 400px;
}
.wrap img {
position:absolute;
top:60px;
z-index:0;
}
.wrap p {
position:relative;
z-index: 1;
}
<div class="wrap">
<img src="https://i.imgur.com/cULI8TG.png">
<p>some text that runs over the image<mark>some text that runs over the image</mark></p>
<p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>
with a background scroll fix, does introduce more overhead when scrolling
var $affected = $('.wrap, .wrap mark');
let handler = (e) => {
$affected.css({'background-position' : '-'+window.scrollX+'px -'+window.scrollY+'px'});
}
$(window).on('resize scroll', handler);
.wrap, .wrap mark {
background-image: url('https://i.imgur.com/hAodNjT.jpg');
background-attachment: fixed;
}
.wrap p {
position: relative;
}
.wrap mark {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
}
img {
width: 300px;
height: auto;
}
.wrap {
padding-top:160px;
position: relative;
width: 400px;
height: 400px;
}
.wrap img {
position:absolute;
top:60px;
z-index:0;
}
.wrap p {
position:relative;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<img src="https://i.imgur.com/cULI8TG.png">
<p>some text that runs over the image<mark>some text that runs over the image</mark></p>
<p>some other text that runs over the image<mark>some other text that runs over the image</mark></p>
</div>
You can use mark tag of HTML using background color with opacity:
/*custom styling of higlihter*/
mark{
background: rgba(255, 255, 255, 0.38);
color: black;
}
.wrap{
background-image: url("https://image.shutterstock.com/image-illustration/color-splash-series-background-design-260nw-587409425.jpg");
height: 230px;
width: 230px;
}
<div class="wrap">
Do <mark>not forget to buy milk today</mark>
<div>
Note: the mark tag is not supported in Internet Explorer 8 and earlier versions.
Another solution, using background and color on <p> tag with gradient:
.wrap{
background: grey;
color: white;
display: inline-block;
background:url(https://thumbs.dreamstime.com/b/halloween-background-full-moon-creepy-house-flying-bats-halloween-background-full-moon-creepy-house-125024932.jpg);
background-size: cover;
height: 200px;
width: 200px;
}
p{
font-size:20px;
background-image: linear-gradient(to right, #ffffff00, #000000c9 , #ffffff00);
text-align: center;
}
<div class="wrap"><p>Don't play with<p></div>
You can change the color accordingly.
Reference.
I know that it is impossible to actually modify an image with CSS, which is why I put crop in quotes.
What I'd like to do is take rectangular images and use CSS to make them appear square without distorting the image at all.
I'd basically like to turn this:
Into this:
A pure CSS solution with no wrapper div or other useless code:
img {
object-fit: cover;
width: 230px;
height: 230px;
}
Assuming they do not have to be in IMG tags...
HTML:
<div class="thumb1">
</div>
CSS:
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1:hover { YOUR HOVER STYLES HERE }
EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:
HTML:
<div class="thumb1">
Link
</div>
CSS:
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1 a {
display: block;
width: 250px;
height: 250px;
}
.thumb1 a:hover { YOUR HOVER STYLES HERE }
Note this could also be modified to be responsive, for example % widths and heights etc.
If the image is in a container with a responsive width:
.rect-img-container {
position: relative;
}
.rect-img-container::after {
content: "";
display: block;
padding-bottom: 100%;
}
.rect-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="rect-img-container">
<img class="rect-img" src="https://picsum.photos/id/0/367/267" alt="">
</div>
(edit: updated from sass to plain css)
(edit: Added dummy image for reference)
Place your image in a div.
Give your div explicit square dimensions.
Set the CSS overflow property on the div to hidden (overflow:hidden).
Put your imagine inside the div.
Profit.
For example:
<div style="width:200px;height:200px;overflow:hidden">
<img src="foo.png" />
</div>
Using background-size:cover - http://codepen.io/anon/pen/RNyKzB
CSS:
.image-container {
background-image: url('http://i.stack.imgur.com/GA6bB.png');
background-size:cover;
background-repeat:no-repeat;
width:250px;
height:250px;
}
Markup:
<div class="image-container"></div>
I actually came across this same problem recently and ended up with a slightly different approach (I wasn't able to use background images). It does require a tiny bit of jQuery though to determine the orientation of the images (I' sure you could use plain JS instead though).
I wrote a blog post about it if you are interested in more explaination but the code is pretty simple:
HTML:
<ul class="cropped-images">
<li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>
CSS:
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
jQuery:
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});
Check out CSS aspect-ratio
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square-image{
width: 50%;
background-image: url('https://picsum.photos/id/0/367/267');
background-size: cover;
background-position: center;
aspect-ratio: 1/1;
}
<div class="square-image"></div>
You can also do this with a regular img tag as follows
.square-image{
width: 50%;
object-fit: cover; /* Required to prevent the image from stretching, use the object-position property to adjust the visible area */
aspect-ratio: 1/1;
}
<img src="https://picsum.photos/id/0/367/267" class="square-image"/>
Today you can use aspect-ratio:
img {
aspect-ratio: 1 / 1;
}
It has wide support amongst modern browsers as well:
https://caniuse.com/mdn-css_properties_aspect-ratio
object-fit: cover will do exactly what you need.
But it might not work on IE/Edge. Follow as shown below to fix it with just CSS to work on all browsers.
The approach I took was to position the image inside the container with absolute and then place it right at the centre using the combination:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Once it is in the centre, I give to the image,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
This makes the image get the effect of Object-fit:cover.
Here is a demonstration of the above logic.
https://jsfiddle.net/furqan_694/s3xLe1gp/
This logic works in all browsers.
Original Image
Vertically Cropped
Horizontally Cropped
Square Container
I had a similar issue and could not "compromise" with background images.
I came up with this.
<div class="container">
<img src="http://lorempixel.com/800x600/nature">
</div>
.container {
position: relative;
width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
border: 2px solid #fff; /* just to separate the images */
overflow: hidden; /* "crop" the image */
background: #000; /* incase the image is wider than tall/taller than wide */
}
.container img {
position: absolute;
display: block;
height: 100%; /* all images at least fill the height */
top: 50%; /* top, left, transform trick to vertically and horizontally center image */
left: 50%;
transform: translate3d(-50%,-50%,0);
}
//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});
Hope this helps!
Example:
https://jsfiddle.net/cfbuwxmr/1/
Use CSS: overflow:
.thumb {
width:230px;
height:230px;
overflow:hidden
}
Either use a div with square dimensions with the image inside with the .testimg class:
.test {
width: 307px;
height: 307px;
overflow:hidden
}
.testimg {
margin-left: -76px
}
or a square div with a background of the image.
.test2 {
width: 307px;
height: 307px;
background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
Here's some examples: http://jsfiddle.net/QqCLC/1/
UPDATED SO THE IMAGE CENTRES
.test {
width: 307px;
height: 307px;
overflow: hidden
}
.testimg {
margin-left: -76px
}
.test2 {
width: 307px;
height: 307px;
background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>
<div class="test2"></div>
I came with a different approach. You basically have to crop the rectangular image to fit it inside the square is all there is to it. Best approach is if the image width is greater than the height, then you crop the image alittle from left and right side of the image. If the image height is greater than the image width then you crop the bottom of the image. Here is my solution. I needed a little help from PHP though.
<div style="position: relative; width: 154px; height: 154px; overflow: hidden;">
<?php
//get image dimmensions whichever way you like. I used imgaick
$image = new Imagick("myimage.png");
$width = $image->getImageWidth();
$height = $image->getImageHeight();
if($width > $height){
?>
<img src="myimage.png" style="display: block; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); height: 100%; " />
<?php
}else{
?>
<img src="myimage.png" style="display: block; position: absolute; top: 0px; left: 0px; width: 100%; " />
<?php
}
?>
</div>
I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.
I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to position: relative.
This is the effect I am after:
This is the code I have so far (which is not working):
HTML:
<div class="parent">
<div class="centerpage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"></div>
</div>
CSS:
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position: relative;
}
.centerpage {
position: absolute;
}
you can use the old method of absolute and negative margin :
http://codepen.io/anon/pen/Htpen
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position:relative;
}
.centerpage {
position: absolute;
left:100%;
top:50%;
vertical-align:middle;
margin :-80px 0 0 -110px;/* negative margin is equal to half height/width of image */
}
or use a background-image or gradient http://codepen.io/anon/pen/GDbtg :
.centerpage {
background:
linear-gradient(to right,
#85D782 0%,
#85D782 50%,
#ffffff 50%,
#ffffff
)
;
height: 400px;
text-align:center;
line-height:400px;
}
img{
display:inline-block;
vertical-align:middle;
}
put image into a div and apply class below
{
width: 100px /* with your width whatever it is */;
text-align: center;
padding: 0px;
height: 110px;
display: table-cell;
vertical-align: middle;
}
and add one more class
.centerpage img {
width:100%;
}