I want only one circle at the center and not the circles surrounding it.And I do not want to change the current code (gradient-style).How can I achieve it??
#bar {
position: relative;
height: 200px;
width: 600px;
background: linear-gradient(to left, yellow 99.9%, blue 99.9%), radial-gradient(circle at 50% 50%, yellow 50%, transparent 10%);
background-position: 50% 100px, 50% 50%;
background-size:100% 15px, 100px 100px;
background-repeat: no-repeat, repeat-x;
}
<div id="bar"></div>
Remove repeat-x
#bar {
position: relative;
height: 200px;
width: 600px;
background: linear-gradient(to left, yellow 99.9%, blue 99.9%), radial-gradient(circle at 50% 50%, yellow 50%, transparent 10%);
background-position: 50% 100px, 50% 50%;
background-size:100% 15px, 100px 100px;
background-repeat: no-repeat;
}
<div id="bar"></div>
You should remove the repeat-x
#bar {
position: relative;
height: 200px;
width: 600px;
background: #fff; //type in your color between # and ;
background-position: 50% 100px, 50% 50%;
background-size:0 15px, 100px 100px;
background-repeat: no-repeat;
}
Related
I'm trying to get this background image to reapply itself to cover a div container. I want it to remain the same size so that it doesn't become 'zoomed in' when the screen scale changes. However, at present, it's just zooming in and not remaining the same size:
.top-container {
background: background: -webkit-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -moz-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
position: relative;
z-index: 1;
}
.top-container:before {
content: "";
background: url("./../images/skulls.PNG") no-repeat center center fixed;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
width: 100%;
height: 100%;
}
Any advice?
EDIT: The image is already really small, so what I want is for it to remain the same size and just keep reapplying itself to fit the div. But instead of doing that, it's just zooming in, which distorts the image.
There are a couple of problems, the skull is not repeating, it is covering the whole div which means it looks 'fuzzy' as it's basically a small image. Also, be aware that IOS does not cope with background attachment fixed.
Taking out the no-repeats (there are several) and the fixed and just letting the skull show at its natural size we get an effect as in this snippet:
.top-container {
background: background: -webkit-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -moz-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
}
.top-container:before {
content: "";
background: url("https://i.stack.imgur.com/B9QHI.png");
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
width: 100%;
height: 100%;
}
<div class="top-container"></div>
I have two boxes, each have :hover selector which transition linear-gradient background image.
linear gradient to top works perfectly fine with transition (code below).
.box7:hover{
color: #FFF;
background-image: linear-gradient(to top, #000 50%, #fff 50%);
background-position: 0% 100%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
but I am having problems with linear gradient to bottom, transition effect doesn't seems to work (code below).
.box2:hover{
color: #FFF;
background-image: linear-gradient(to bottom, #000 50%, #fff 50%);
background-position: 100% 0%;
background-size: 100% 200%;
transition: all 1s ease;
border: none;
}
Any help would be appreciated.
Below is the link to check (hover on all boxes)
https://conrad93.github.io/linear-gradient-sliding-effect/boxbox.html
The problem is that your styles are not applied when you aren't hovering over the element. The solution is therefore to apply these styles to the default state of the element as well. Something like this:
// html
<div class="container">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
</div>
// CSS
.container {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: solid 1px red;
margin: 5px;
transition: all .4s ease;
background-color: lightgoldenrodyellow;
}
.box-1 {
background-image: linear-gradient(to top, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 0%;
background-size: 100% 200%;
}
.box-1:hover {
background-position: 0% 100%;
}
.box-2 {
background-image: linear-gradient(to bottom, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 100% 200%;
}
.box-2:hover {
background-position: 0% -200%;
}
.box-3 {
background-color: crimson;
background-image: linear-gradient(to bottom left, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% 100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-3:hover {
background-position: 0% -100%;
}
.box-4 {
background-image: linear-gradient(to top right, crimson 50%, lightgoldenrodyellow 50%);
background-position: 0% -100%;
background-size: 200% 200%;
background-repeat: no-repeat;
}
.box-4:hover {
background-position: 0% 100%;
}
Within the declaration block for the hover state, you only need to declare those properties that are changing, in this case background-position.
Here is a working example on JsFiddle.
You probably also want the diagonal gradient to animate up from the bottom left of the element. This is a little tricky to do, but you can see it working in the example. To understand why it works, you need to understand what the x and y values in the background-position property mean. MDN docs are a good place to learn.
I'm trying to create an animated background fill effect (still learning animation) but the fill color jumps quickly before it reaches the end of the div. What's the issue and how to fix it? Thanks in advance.
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
animation: makeItfadeIn 3s 1s;
animation-fill-mode:forwards;
}
#-webkit-keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
#keyframes makeItfadeIn {
100% {
background-position: left bottom;
background: linear-gradient(to right, black 100%, black 0%);
}
}
<div class="outer">
<div class="button">
</div>
</div>
Background inside the animation is the culprit. You simply need to animate the position from right to left:
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, transparent 0);
background-size: 200% 100%;
background-position: right;
animation: makeItfadeIn 3s 1s forwards;
}
#keyframes makeItfadeIn {
100% {
background-position: left;
}
}
<div class="outer">
<div class="button">
</div>
</div>
Related to get more details: Using percentage values with background-position on a linear-gradient
I do not know if this is even possible with only css. I want to make a circle with transparent horizontal lines and you can change size and position of each of these lines. Something like this png picture:
I did this so far, but it is not responsive it has not transparent lines inside, but you can move all lines freely.
.enjoy-css {
box-sizing: content-box;
width: 300px;
height: 300px;
position: absolute;
border: none;
border-radius: 150px;
background: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white)black;
background-repeat: no-repeat;
background-position: 90% 90%, 55% 75%, 90% 10%, 95% 30%, 90%;
background-origin: padding-box;
background-size: 124px 20px, 153px 20px, 124px 20px, 153px 20px, 80px 20px;
}
<div class="enjoy-css">
<span></span>
</div>
You can use svg to create the responsive shapes like below.
For this first you have to create the svg of your shape inside svg <symbol> tag so that you can use this later.
Then create a div having class enjoy-css and then use the previously created svg using <use>. Don't forget to give width="100%" to the <svg> for responsive purpose
svg.defs-only {
display: block;
position: absolute;
height: 0;
width: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
body {
background: gold;
}
.enjoy-css {
max-width: 400px;
}
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px">
<symbol id="potofgold" >
<path fill-rule="evenodd" fill="rgb(0, 0, 0)"
d="M387.395,270.000 L154.000,270.000 L154.000,298.000 L374.370,298.000 C368.372,308.648 361.409,318.675 353.632,328.000 L103.000,328.000 L103.000,356.000 L325.121,356.000 C290.863,383.519 247.363,400.000 200.000,400.000 C89.543,400.000 0.000,310.457 0.000,200.000 C0.000,177.987 3.567,156.809 10.136,137.000 L263.000,137.000 L263.000,109.000 L21.855,109.000 C28.645,95.734 36.895,83.344 46.356,72.000 L238.000,72.000 L238.000,44.000 L74.879,44.000 C109.140,16.485 152.638,0.000 200.000,0.000 C310.457,0.000 400.000,89.543 400.000,200.000 C400.000,224.628 395.538,248.212 387.395,270.000 ZM326.000,187.000 L63.000,187.000 L63.000,215.000 L326.000,215.000 L326.000,187.000 Z"/>
</symbol>
</svg>
<div class="enjoy-css"><svg viewBox="0 0 400 400" width="100%"><use xlink:href="#potofgold"/></svg></div>
This is it:
body {
background: #aaa;
background: url(http://www.lorempixel.com/600/600/abstract); /* background to show transparency */
}
.circle {
max-width: 20em; /* Set the max diameter */
margin: 0 auto;
}
.circle span {
position: relative;
display: block;
padding-bottom: 100%;
}
.circle span::after {
content: "";
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
border-radius: 50%;
background-image: linear-gradient(
black 10%,
transparent 10%,
transparent 18%,
black 18%,
black 28%,
transparent 28%,
transparent 36%,
black 36%,
black 45%,
transparent 45%,
transparent 55%,
black 55%,
black 64%,
transparent 64%,
transparent 72%,
black 72%,
black 82%,
transparent 82%,
transparent 90%,
black 90%
),
linear-gradient(to right, transparent 60%, black 60%),
linear-gradient(to right, transparent 70%, black 70%),
linear-gradient(
to right,
black 15%,
transparent 15%,
transparent 85%,
black 85%
),
linear-gradient(to left, transparent 60%, black 60%),
linear-gradient(to left, transparent 70%, black 70%);
background-size: 100%, 100% 20%, 100% 40%, 100% 20%, 100% 20%, 100% 20%;
background-position: top, top, top, 40%, 0 70%, 0 90%;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<body>
<div class="circle">
<span></span>
</div>
</body>
</html>
does anyone knows a way to create a div with responsive width in shape of an inverted cone (see attached code snippet) only using css. Also this div needs to have a repeated background image (pattern).
I tried to use clipPath:
#div {
height: 100%;
width: 100%;
-webkit-clip-path: polygon(50% 90px, 100% 0%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(50% 25%, 100% 0, 100% 100%, 0 100%, 0 0);
background: blue;
padding-top: 160px;
}
<div id="div"></div>
This works fine in Safari and Chrome but won't work in Mozilla, Opera or IE.
Is there a way to achieve for all relevant browsers?
Any help would be appreciated.
Use linear-gradient with side or corner values instead of fixed angles. You can make that shape with transforms too, but that'll require JS to make it responsive.
Fiddle
body {
background-color: blue;
margin: 0;
padding: 0;
}
div {
height: 150px;
width: 100%;
position: relative;
}
div:after, div:before {
content:"";
position: absolute;
height: inherit;
width: 50%;
}
div:before {
left: 0;
background: -webkit-linear-gradient(to bottom left, white 50%, transparent 50%);
background: -moz-linear-gradient(to bottom left, white 50%, transparent 50%);
background: -o-linear-gradient(to bottom left, white 50%, transparent 50%);
background: linear-gradient(to bottom left, white 50%, transparent 50%);
}
div:after {
right: 0;
background: -webkit-linear-gradient(to bottom right, white 50%, transparent 50%);
background: -moz-linear-gradient(to bottom right, white 50%, transparent 50%);
background: -o-linear-gradient(to bottom right, white 50%, transparent 50%);
background: linear-gradient(to bottom right, white 50%, transparent 50%);
}
<div></div>
You can set the div to have overflow hidden, and then set 2 pseudo elements with skew, one for each half
.test {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.test:after, .test:before {
content: "";
position: absolute;
top: 0px;
width: 50%;
height: 100%;
}
.test:before {
left: 0px;
transform: skewY(15deg);
transform-origin: top left;
background: repeating-linear-gradient(-15deg, white 0px, lightblue 40px);
}
.test:after {
right: 0px;
transform: skewY(-15deg);
transform-origin: top right;
background: repeating-linear-gradient(15deg, white 0px, lightblue 40px);
}
<div class="test"></div>