I have some problems with the picture display. Below is my code：
.night-sky {
position: relative;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
height: 100%;
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
This is how it looks like now:
If I didn't add the paragraph between the class div class = "night-sky" , it just shows nothing. but if i just add the background-image in the body it will shows correctly. I don't know what's wrong.
Thanks.
Add height: 100% to html and that would solve the problem.
Some suggestions:
You can see that now there would be some margin at the top - this comes due to margin collapsing (you can read more about it in this SO thread). To remove this add a border to the night-sky
Finish it up with:
* {
box-sizing: border-box;
}
so that there is no scrollbar on the body - see why border-box is important in this SO thread
Cheers!
* {
box-sizing: border-box;
}
html{
height: 100%;
}
.night-sky {
position: relative;
height: 100%;
margin: 0;
border: 1px solid black;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
height: 100%;
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
html, body { height: 100%; width: 100%; margin: 0;}
.night-sky {
position: relative;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -webkit-linear-gradient(top, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
.night-sky:before {
width: 100%;
content: ' ';
position: absolute;
top: 0;
/* http://bg.siteorigin.com/ */
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/424395/night-sky-texture.png");
opacity: .1;
}
body {
height: 100%;
margin: 0;
background: #000;
}
<body>
<div class="night-sky">
<p>qerqwer</p>
<p>hahahh</p>
</div>
</body>
Try this:-
<div style="background-image:url(http://www.html.am/images/image-codes/milford_sound_t.jpg);width:220px;height:140px;">
</div>
Related
The code is below.
gradient
there is a very small gap between two divs.but it should not have.
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
<div class='gra left'></div>
<div class='gra right'></div>
It's happening because of Antialiasing.
Use left:0; with the left class and left: -1px; with the right class to overlap Antialiasing
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
left:0;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
left: -1px;
}
<div class='gra left'></div>
<div class='gra right'></div>
You can change by:
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%) ;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 101%);
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
}
<div class='gra left'></div>
<div class='gra right'></div>
Or, another way:
.gra {
position: relative;
width: 200px;
height: 200px;
overflow:hidden;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
position:absolute;
bottom:0;
left:0;
width:201px;
height:201px;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
position:absolute;
top:0;
right:0;
width:201px;
height:201px;
}
<div class="gra">
<div class="left"></div>
<div class="right"></div>
</div>
Here is an idea without clip-path where you will have a better support, less of code and no gap issue
.container {
background: linear-gradient(to left, red 0%, blue 100%);
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, blue 100%);
transform-origin: bottom right;
transform: skewX(45deg);
}
<div class="container">
</div>
You can fix this by adding a half pixel to the 100% values.
Change:
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
To:
clip-path: polygon(0% 0%, 0% calc(100% + 0.5px), 100% calc(100% + 0.5px));
If you need to fix a gap on the top, you could change 0% to calc(0% - 0.5px).
I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.
Here is what I have done and what is am trying to achieve,
My Work :
Expectation :
Code :
.grad {
height: 400px;
width: 900px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
<div class="grad"></div>
I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.
Any help would be appreciated.
Use multiple gradient then adjust dimension and position to obtain what you want:
.grad {
height: 100px;
width: 300px;
background:
linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}
<div class="grad"></div>
Use pseudo-elements like :before and :after
.grad{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new{
position: relative;
height:200px;
width:450px;
margin-bottom: 10px;
overflow: hidden;
background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}
.grad-new:before{
content: '';
position: absolute;
width: 3%;
height: 10px;
bottom: 0;
right: 55.6%;
background: #62e6a5;
transform: skew(-20deg);
}
.grad-new:after{
content: '';
position: absolute;
width: 100%;
height: 10px;
bottom: 0;
left: 44.4%;
background: #fff;
transform: skew(-20deg);
}
<div class="grad"></div>
<div class="grad-new"></div>
I need this type gradient in the bottom of a background image
I can't figure out – how to I can make this type gradient with CSS. I've uploaded my code in jsFiddle.
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 300px;
bottom: 0;
background: linear-gradient(to bottom, white 10%, white 30%, white 60%, white 100%);
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://i.stack.imgur.com/VT8SR.jpg)"></div>
Here showing white gradient but not like what I expect.
Has there anybody who will help me to get the exact CSS code?
Add This Style to Image:
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
Use background: linear-gradient(to bottom, rgba(255,255,255,0), white 100%); for the bottom div.
I fork your jsfiddle here.
You can use the background like this.
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
Check the codepen here
Try changing css-
i have done for you
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before{
content: '';
position: absolute;
display: flex;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom, rgb(0, 0, 0) 30%, rgb(255, 255, 255) 100%);
opacity: .5;
}
do check- https://codepen.io/djmayank/pen/vJyoVe
Have you tried using alpha in the color?
Change the gradient rule to something like this:
.single-blog-bg:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 100%);
}
Edit: Remove the opacity property, change the bottom color alpha and give the effect more height
.single-blog-bg {
background-size: cover;
background-attachment: fixed;
height: 350px;
position: relative;
}
.single-blog-bg:before {
content: '';
position: absolute;
left: 0;
right: 0;
/*top: 300px*/
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 10%, rgba(255, 255, 255, 0.13) 60%, rgba(255, 255, 255, 0.04) 70%);
/* opacity: .5; */
height: 100%;
}
opacity: .5;
}
<div class="single-blog-bg" style="background-image: url(https://images.unsplash.com/photo-1495935225637-fa5838607df7?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=)">
</div>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
I'm trying to build a circle with 8 colors, could you please help me to tweak the code above?
Use following css:
div {
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, yellow 0%, yellow 50%, blue 50%, blue 100%), linear-gradient(135deg, gray 0%, gray 50%, green 50%, green 100%), linear-gradient(-45deg, black 0%, black 50%, #b2dba1 50%, #b2dba1 100%) , linear-gradient(-135deg, red 0%, red 50%, orange 50%, orange 100%);
background-size: 50% 50%;
background-position: 0% 0%,0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
Or with something like this.
Here you can add as many slices you want.
But its a little bit longer than the other solutions.
If you want to read more about this here is the right place.
.pie {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 50px, 100px, 0px);
}
.hold {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
z-index:8;
background-color: #1b458b;
-webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
#pieSlice2 .pie {
z-index:7;
background-color: red;
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
transform:rotate(100deg);
}
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>
I'm trying to create a light effect with CSS and HTML only. Just like this image
I don't know if it's possible. or how to do it.
Any help will be appreciated.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: green;
}
<div class="circle"></div>
Here is my example
*,
*:before,
*:after {
box-sizing: border-box;
}
div {
width: 120px;
height: 120px;
border-radius: 60px;
background: linear-gradient(to bottom, #393939 0%, #151515 100%);
position: relative;
}
div:before {
content: '';
width: 106px;
height: 106px;
border-radius: 53px;
background: #19f000;
border: 1px solid black;
position: absolute;
left: 7px;
top: 7px;
}
div:after {
content: '';
width: 80px;
height: 60px;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
transform: rotate(-18deg);
left: 13px;
top: 9px;
}
<div></div>
JSfiddle Demo
You can use a second div for the highlight to try and provide a stronger 3D effect, freeing up the box-shadow to be used for the darker contouring on the edges.
.circle {
width: 164px;
height: 164px;
background-color: #19f000;
border-radius: 100%;
position: relative;
border: 10px solid #444444;
box-shadow: 0 0 15px 0 rgba(0,0,0,.8) inset;
transform: rotate(-20deg);
}
.highlight {
position: absolute;
top: 2px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 64%;
opacity: .92;
border-radius: 100%;
/* gratuitous gradient compatibility - activate! */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
<div class="circle">
<div class="highlight"></div>
</div>
You can do with the combination of radial gradient and a pseudo element for glossy effect.
The transition from white to green can be produced through radial-gradient. The #fff color stops at 5%.
The glossy effect finish is given using the opacity on the pseudo element and has a similar shape of the parent with white background and reduced width.
JSfiddle Demo
.circle::after {
background: white none repeat scroll 0 0;
border-radius: 50%;
content: " ";
display: block;
height: 100px;
opacity: 0.15;
position: absolute;
width: 150px;
left: 20px;
}
.circle {
background-image: radial-gradient(ellipse at 50px 10px , #ffffff 0%, #fff 5%, #00ff00 100%);
border: 10px solid;
border-radius: 50%;
height: 200px;
position: relative;
width: 200px;
}
<div class="circle">
</div>
You can do it using a single element also by layering one radial-gradient image of the required size on top of an angled linear-gradient image and then positioning it appropriately. Multiple background images and layering has very good browser support (IE9+) but gradients are supported only in IE10+.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(ellipse at 90px 45px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0) 32%, rgba(25,240,0,1) 45%), linear-gradient(160deg, transparent 12%, rgb(25, 240, 0) 30%);
background-size: 125% 80%, 100% 100%;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="circle"></div>
Browser Compatibility Charts:
Multiple background images and layering
Gradients
<!doctype html>
<html>
<head>
<style>
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: rgb(25,240,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,240,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,240,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19f000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
</style>
<head>
<body>
<div class="circle">
</div>
</body>
</html>
Please use background gradient color as mentioned above. i hope this woould helpful to you
here is the working demo.Demo
Try box shadow like this: Updated Demo
Adjust the shadow values and background gradient colors according to your need.
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: #f8ffe8;
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZmZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzU2YmM2YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTliMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8ffe8), color-stop(17%, #56bc6c), color-stop(100%, #199b00));
background: -webkit-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -o-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -ms-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: linear-gradient(to bottom, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#199b00', GradientType=0);
-webkit-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
-moz-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
}