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>
Related
The image below is what I am intending to do:
Here is my situation right now:
My problem is I am not quite sure what to do with the z-index in order to have the image go inside the background but still over it.
Classes:
<img class="background" src="">
<img class="bubble_img" src="">
CSS:
.background {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
display: block;
}
.bubble_img {
bottom: 0;
max-height: 110%;
position: absolute;
right: 0;
transition: all 1s;
z-index: 1;
}
If I switch the z-index around (2 and 1) the image of the person just goes on the and it goes over the background borders:
Would appreciate any help, thank you.
Instead of using the yellow background as an image, you can make it as a div element with a border-radius. Then add a overflow: hidden to partly hide the image:
div {
width: 300px;
height: 300px;
border-radius: 20% 45% 45% 5%;
background: #f5e511;
overflow: hidden;
}
div img {
max-width: 100%;
max-height: 100%;
}
<div>
<img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
</div>
That can be done with the CSS mask, as in the example below (the mask image here is base64 encoded because of CORS issues when using i.stack.imgur.com):
.background {
width: 100vw;
height: 100vh;
background: url(https://i.stack.imgur.com/WI6mO.png) #FE0 no-repeat;
mask: var(--mask);
-webkit-mask: var(--mask);
--mask: no-repeat url(data:image/png;base64,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);
}
<div class="background"></div>
I have 2 divs, one stretches over the entire screen, other is centered within.
<div id="outer">
<div id="inner">
</div>
</div>
CSS looks like this:
#outer {
/* This line is important */
background: black url("https://placehold.it/1x50") repeat-x;
/* irrelevant */
height: 50px;
width: 100%;
}
#inner {
width: 1000px;
height: 50px;
margin: 0 auto;
background-color: #eee;
}
What I want to do is set the background of the outer div, but only to the right of the inner div. Currently a 1px image is set to repeat itself over the entire outer div, but I need it to go only to the right.
When done right, background will be black on left of inner div and grey on right (because placehold.it image is grey).
I can change HTML if necessary.
You can use a linear gradient background with an abrupt color change at 50% to the body:
#outer {
background: linear-gradient(to right, #000 0%, #000 50%, #ccc 50%, #ccc 100%);
height: 50px;
width: 100%;
}
Here's the result: http://codepen.io/anon/pen/JWjQzm
Addition:
With a background image, you can combine a plain color background and an image. But you can't repeat the image on the x-axis, so you'd have to have an image that covers at least the background width at the right side:
background: #000 url(http://placehold.it/200x50/fa0) right repeat-y;
http://codepen.io/anon/pen/jBOgya
Another addition/version after comment:
You didn't yet say what kind of image that is, but if it's just a repeated 1x50px image as in you example, you might as weel stretch it to half the screen width by adding background-size: 50% 100%; - see codepen linked below:
http://codepen.io/anon/pen/OpJKKO
Try this code on your codepen
HTML
<div id="outer">
<div id="inner">
</div>
</div>
CSS
#outer {
background: black;
height: 50px;
width: 100%;
position: relative;
}
#inner {
width: 1000px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: #eee;
}
#inner:after{
content: "";
background: url(http://placehold.it/1x50/fa0) repeat-x;
top: 0px;
right:0px;
height: 50px;
width: calc(50% - 500px);
position: absolute;
}
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
How could I achieve a background that looked similar to this image:
Only 3 colors, angled from the top corner out like a sunray.
Maybe sticking with a simple PNG or SVG background image would be a better approach.
The effect can be achieved with CSS using pseudo-elements and transforms and the below is a sample snippet. But I don't think using CSS is the correct option for this. It would be better to use a PNG image.
The snippet uses a couple of pseudo-elements with different background colors skewed at required angles to produce the three-color effect.
.bg {
position: relative;
height: 200px;
width: 400px;
padding: 4px;
background: orange;
overflow: hidden;
}
.bg:after,
.bg:before {
position: absolute;
content: '';
left: 0px;
height: 100%;
width: 100%;
transform-origin: right top;
}
.bg:before {
top: 0px;
background: red;
transform: skewY(-45deg);
}
.bg:after {
top: -100%;
background: yellow;
transform: skewY(-15deg);
}
span {
position: relative;
z-index: 2;
}
/* Just for demo */
.bg:hover {
height: 200px;
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
<span>Some content inside</span>
</div>
Angled linear-gradients also could be used but I don't think they are good for dynamic sized container elements as the angles need to be modified as the dimensions change to keep the appearance the same.
Below is a snippet using linear-gradient. Hover on the shape to see how a change of width and/or height affects it.
.bg {
position: relative;
height: 200px;
width: 400px;
background: linear-gradient(310deg, red 30%, transparent 30%), linear-gradient(340deg, transparent 58%, yellow 58%), orange;
overflow: hidden;
}
.bg:hover {
height: 200px;
width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
<span>Some content inside</span>
</div>
SVG
This can be done with SVG.
I used three polygon shapes. This can be set to a background-image.
Or alternatively can be used inline so you can use css properties on it.
html, body {
margin: 0;
padding: 0;
}
.triple {
width: 250px;
height: 250px;
}
.triple:hover {
width: 500px;
height: 100px;
}
<svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon fill="#dd2" points="0,0 100,0 0,60" />
<polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " />
<polygon fill="#992" points="30,100 100,0 100,100" />
</svg>
Yes, it can be done with gradients, in a responsive way.
That is asuming that when the aspect ratio changes, you don't want to keep the angles, but the relative positions
The trick is to use simbolic names in the gradient direction, and then playing with the size and the position of the background-image
.test {
display: inline-block;
border: solid 1px black;
background-image: linear-gradient(to top left, tomato 50%, transparent 50%),
linear-gradient(to bottom right, lightgreen 50%, transparent 50%);
background-size: 60% 100%, 100% 50%;
background-repeat: no-repeat;
background-position: bottom right, top left;
}
#test1 {
width: 200px;
height: 100px;
}
#test2 {
width: 100px;
height: 100px;
}
#test3 {
width: 70px;
height: 100px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
Use a 4-color GIF image. This will give you both cross-browser/platform compatibility as well as backward compatibility, and the size will be small with this type of image. If the colors are subtle as shown the "jaggies" will be camouflaged somewhat (or provide a larger size).
A good option is to use SVG which has good support in modern up-to-date browsers.
Lets assume I have a div with a Gradient applied as a background-property.
I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this.
I know I can have a working background-blend-mode when I render the Gradient into the CSS of the Div with the PNG image like:
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
This however results in the Gradient being as small as the actual PNG, which is not a desired effect, like this:
What I want to achieve is this with pure CSS (if possible):
Here a Codepen to illustrate what I'm trying to do: http://codepen.io/anon/pen/zxOXGP
Notice the Black Icon. I wanna overlay this.
Try using mix-blend-mode instead of background-blend-mode and switch to simple text for the plus-sign or a webfont for more custom figures.
Example Codepen of the below:
.placeholder {
position: relative;
width: 400px;
height: 300px;
background-image: -moz-linear-gradient(#ff0000, #0000ff);
background-image: -webkit-linear-gradient(#ff0000, #0000ff);
background-image: linear-gradient(#ff0000, #0000ff);
}
.center {
position: absolute;
top: 25%;
width: 100%;
font-size: 120px;
}
.center span {
display: block;
text-align: center;
color: red;
mix-blend-mode: screen;
}
<div class="placeholder">
<div class="center"><span>+</span>
</div>
</div>
The gradient sandwich
Ingredients
The :before forms the bottom z-layer with z-index: 1, it is full opacity
The .content div forms the filling, central z-layer, with z-index: 2. It needs position: relative to take its z-index.
The :after forms the top z-layer with z-index: 3 and completes our lunch item. It is half opacity.
This is the tasty result:
Full Example
I have removed all but the standard CSS3 gradient for simplicity. View in a supporting browser.
.gradient {
position: relative;
height: 200px;
padding: 20px;
}
.gradient:before,
.gradient:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background-size: 100%;
background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
opacity: 0.5;
}
.gradient:before {
opacity: 1;
z-index: 1;
}
.gradient:after {
z-index: 3;
}
.overlayed_image {
position: relative;
width: 64px;
height: 64px;
display: block;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}
.content {
position: relative;
z-index: 2;
}
<div class="gradient">
<div class="content">
You can see me!
<div class="overlayed_image"></div>
</div>
</div>