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>
Related
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>
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 two skewed divs with linear gradient backgrounds, which should be lining up perfectly, yet they leave a 1px gap between them.
This fiddle demonstrates the problem: https://jsfiddle.net/jesperryom/rn1ncd5u/
I have seen two suggested solutions (moving one div 1px to compensate, or giving them a transparent border), but none of those seem to work when the background color of the divs is a linear gradient as this image shows:
Left has div moved 1px, right has transparent borders
Any ideas?
HTML
<div id="top"></div>
<div id="left"></div>
CSS
#top {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 50px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0));
transform-origin: left top;
transform: skew(45deg);
}
#left {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 200px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0));
transform-origin: left top;
transform: skewY(45deg);
}
Box shadow are way harder to manage, but don't have that problem
#top {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 50px;
transform-origin: left top;
transform: skew(45deg);
box-shadow: inset -22px 45px 80px -18px black;
}
#left {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 200px;
transform-origin: left top;
transform: skewY(45deg);
box-shadow: inset 45px -22px 80px -18px black;
}
<div id="top"></div>
<div id="left"></div>
I was looking for a multi component date picker like the one in the image under, but didn't find anything on Github, or elsewhere.
So I decided to make one. I'm having problems implementing the CSS where it fades out on top and bottom.
I thought about using :before and :after in the container, but no success. Can I apply gradients in :before and :after
For example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
<ol>
<li>2010</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
<li>2015</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ol>
How to make the shadow on top and bottom?
Yes, you can apply gradients in :before and :after elements.
Example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
position: relative;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
ol:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom : 80%;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
ol:after {
position: absolute;
left: 0;
right: 0;
top: 20%;
bottom : 0;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
Ok, got it by using gradients not on :before / :after but in a new div which floats with position: absolute; like:
.fader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 9em;
background: linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
pointer-events: none;
}
and the HTML:
<div class="date-picker">
<ol>
<li>2010</li>
<li>2011</li>
...
</ol>
<div class="fader"></div>
</div>
jsFiddle: https://jsfiddle.net/bo7dyx83/
Try something like this:
<div class="date-picker">
<ol>
<li>2010</li>
...
</ol>
<div class="shadow"></div>
</div>
With the date-picker styled however you like (setting width and height), and the following CSS:
.date-picker {
position: relative;
width: 8em;
height: 6em;
border: 0.5em solid black;
border-radius: 0.5em;
}
ol {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.2), transparent, transparent, rgba(0, 0, 0, 0.2));
}
This creates a gradient image overlay positioned in front of the ol which is the image's sibling. Keep in mind that the z-index of .shadow needs to be larger than that of the ol.
EDIT: Looking more closely at the image you posted, the gradient seems closer to quadratic than linear. If you want the list to look more rounded, making a non-linear gradient in photoshop or something would make it look much more three dimensional.
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>