My goal is to create a faded blue circle on black background.
However, there is a white square surrounding the circle, and it doesn't look good.
What can I do to get rid of this white background?
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}
<div class="circle"> </div>
You seems to overcomplicate a simple task:
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,blue,#0000);
}
<div class="circle"> </div>
One way is to fade away with black instead of white.
body{
background-color:black;
}
.circle {
border-radius: 50%;
width:200px;
height:200px;
background-color:blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
}
<div class="circle"> </div>
Related
So, I'm trying to fade out an image that has border-radius: 50% but I can't seem to get it down.
<section id="main">
<h1>Non-Important-Text</h1>
<h4>
it's all fun and games until you can't find a damn solution....
</h4>
<div id="img-container">
<img src="./assets/1.jpg" />
</div>
</section>
/* ... */
#main #img-container {
border-radius: 50%;
display: inline-block;
position: relative;
}
#main #img-container img {
width: 30em;
border-radius: 50%;
display: block;
border: 1px solid white;
}
#main #img-container img::after {
content: "";
display: block;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
); /* This doesn't work! */
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
My Image, is circle, and does have a border. But it doensn't get faded out( in a circular way). How can I achieve that
Goal:
What I Get:
I tried everything from, radial-gradient, -webkit-gradient, to even, -webkit-radial-gradient. But they all produce the same result!
you need to use mask-image
div{
background: skyblue;
padding: 20px;
}
img{
-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0, rgba(0,0,0,0) 70%);
mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0, rgba(0,0,0,0) 70%);
display: block;
margin: 0 auto
}
<div><img src='data:image/jpeg;base64,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' /></div>
I am trying to achieve this shape of div to hold profile information.
So far I've curved one of the corners. However, I am having problems parallel lines.
My HTML:
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
My CSS:
.profile-card{
margin-top:150px;
float:right;
background-color: rgba(0,0,0,0.4);
height:500px;
text-align:center;
padding: 50px 40px;
border: 2px solid red;
border-top-left-radius: 39px;
}
The codepen is https://codepen.io/anon/pen/wjMQmw
Thank you in advance.
I would consider a solution with pseudo-element with some skew transformation:
.profile-card {
background: rgba(0, 0, 0, 0.4);
width: 200px;
text-align: center;
padding: 50px 0 0 40px;
border-top-left-radius: 39px;
border-left: 1px solid red;
border-top: 1px solid red;
position: relative;
}
.profile-card:before {
content: "";
position: absolute;
right: -40px;
width: 40px;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
transform: skewY(45deg);
transform-origin: top left;
border-top: 1px solid red;
border-right: 1px solid red;
box-sizing:border-box;
}
.profile-card:after {
content: "";
position: absolute;
bottom: -40px;
height: 40px;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
transform: skewX(45deg);
border-left: 1px solid red;
border-bottom: 1px solid red;
transform-origin: top left;
box-sizing:border-box;
}
body {
background:linear-gradient(to right,lightblue,pink)
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Without the border I would consider multiple gradient to achieve the layout:
.profile-card {
background:
linear-gradient(to bottom left,rgba(0, 0, 0, 0.4) 50%,transparent 51%)0 100%/50px 50px no-repeat,
linear-gradient(to top right,rgba(0, 0, 0, 0.4) 50%,transparent 51%)100% 0/50px 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))100% 100%/calc(100% - 50px) 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 0/calc(100% - 50px) 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 50px/100% calc(100% - 100px) no-repeat;
width: 200px;
text-align: center;
padding: 50px 40px;
border-top-left-radius: 39px;
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Or the clip-path solution:
.profile-card {
background:rgba(0, 0, 0, 0.4);
width: 200px;
text-align: center;
padding: 50px 40px;
border-top-left-radius: 39px;
-webkit-clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%);
clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%)
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
For super complex bordering, one option is to use SVG. Here is an example of basic usage of polygon. SVG embedded into HTML can be styled using CSS easily:
body{
margin:0;
height: 500px;
background: url('https://cdn3.tropicalsky.co.uk/images/1280x720/downtown-dubai-aerial-view.jpg');
}
.profile-card{
margin-top:5px;
background-color: transparent;
height:800px;
width: 200px;
text-align:center;
padding: 50px 40px;
position: relative;
}
.profile-card h1, .profile-card p {
position: relative;
}
.frame {
position: absolute;
top: 20px;
left: 20px;
opacity: 0.7;
}
<div class="profile-card">
<svg class="frame" height="300" width="300">
<polygon points="50 0,250 0,300 50,300 300, 50 300, 0 250, 0 50,7.5 25, 15 15, 25 7.5" style="fill:lightgrey;stroke:orange;stroke-width:1" />
</svg>
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
I have a div wrapper and a div row and both have position properties set to relative. The wrapper div has a higher z-index than the inner div and both have background's set, however, the higher z-index background is still below the lower div's background. JS Fiddle Example
.wrapper {
position: relative;
z-index: 1000;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}
<div class="wrapper">
<div class="row"></div>
</div>
If you want the grid lines over the red bar, remove the z-index from the wrapper div:
.wrapper {
position: relative;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}
<div class="wrapper">
<div class="row"></div>
</div>
Remove z-index from wrapper div, and you should be good to go.
.wrapper {
position: relative;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}
<div class="wrapper">
<div class="row"></div>
</div>
I want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?
body {
background: #eee;
}
.darker {
position: fixed;
top: -94%;
left: -10%;
width: 150%;
height: 150%;
background: #dd4f39;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
<div class="darker"> </div>
I found an interesting way to do this from here, which uses clip-path
.Answering my own question so that everyone can use it.
html,
body {
margin: 0;
}
body {
background: #eee;
}
.box {
width: 100vw;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
<div class="box"></div>
This is one way of doing it. But this use case is strictly with respect to vw. Just make sure to give the same value to these elements
div and it's pseudo element should have same width and border-left respectively.
div and it's pseudo element should have same height and border-top respectively.
html, body {
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: white;
}
.box::after {
content: ' ';
border-top: 100vh solid #dd4f39;
border-left: 100vw solid transparent;
width: 0;
position: absolute;
}
<div class="box"></div>
JS fiddle
https://jsfiddle.net/kqsrmrss/2/
You can do that with a skewed pseudo element. The main trick is to keep the aspect ratio the same or else the sloped angle will fail
Fiddle demo
Stack snippet Note 1
body {
background: #eee;
}
.darker {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 50%;
background: #dd4f39;
overflow: hidden;
}
.darker::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: gray;
transform: skewY(26.5deg);
transform-origin: left top;
}
<div class="darker"></div>
Optionally, you can add media query to control the angle at different screen sizes
Fiddle demo 2
With a tiny script running when window resize's, you can control the angle and make it fully responsive both horizontally and vertically.
Note 1 Based on a comment, the Stack snippet might not work properly, and if, try the fiddle demos.
Please Use this code snippet.
div {
width: 100%;
height: 100px;
}
.diagonalRising {
border: 1pt solid black;
background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalFalling {
background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalCross {
position: relative;
background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}
.diagonalCross:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}
<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>
Try this,
.box::after {
background: #E52A35
content: '';
position: absolute;
width: 100%;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}
I want background like this. How can I get this with pure CSS.
I have searched for this but I didn't find any answer.
I want to ignore usages of large background images.
UPDATE
I have tried like this (only with color)
background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)
But, I want to add image with color.
Here is Fiddle which I have tried Fiddle-Demo
And it have problem with responsive, you can check by resizing window.
Multiple background images:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg);
}
<div></div>
Or a pseudo-element:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg);
background-size: 100%;
background-position: center right;
background-repeat: no-repeat;
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%);
}
<div></div>