The code in CodePen here provides bullets, stripes and some squares. I want circles. I found this source but I don't know how to implement it.
Code also here
#import url(https://fonts.googleapis.com/css?family=Oswald);
div {
text-align: center;
font: bold 21px 'Oswald',sans-serif;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
text-transform: uppercase;
}
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(45px 45px, circle cover, rgba(0,0,0,.90), rgba(0,0,0,.90) 2px, transparent 0px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 9px 9px;
-moz-background-size: 9px 9px;
background-size: 9px 9px;
}
You can do this by changing the radius, notice the rgba(0,0,0,0.5) 4px instead of rgba(0,0,0,0.5) 1px on the first line about background-image:.
Code
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,0.5) 4px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 10px 10px;
}
Related
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I was looking at the site https://gradientbuttons.colorion.co/. It has some awesome examples of buttons and hovering. I tried out their examples and I could not get them to work. This is what I have:
div {
width: 90%;
height: 200px;
background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
border-radius: 15px;
position: relative;
margin: 0 auto;
margin-top: 15px;
-moz-box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
-webkit-box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
div:hover {
background-position: right center;
}
<div></div>
It's not showing the animation that is shown on the website mentioned above.
According to their source you're missing transition: 0.5s; so the transition is not instantaneous, and background-size: 200% auto; to increase the button's background width so when it scrolls to the right it has content to display.
Using their source, here's an example of a simple button:
.btn-grad {
padding:15px;
background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
transition: 0.5s;
background-size: 200% auto;
color: white;
text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
box-shadow: 0 0 20px #eee;
display: block;
}
.btn-grad:hover {
background-position: right center;
}
<button class="btn-grad">Submit</button>
And here's your code:
div {
width: 90%;
height: 200px;
background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
border-radius: 15px;
position: relative;
margin: 0 auto;
margin-top: 15px;
-moz-box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
-webkit-box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
transition: 0.5s;
background-size: 200% auto;
}
div:hover {
background-position: right center;
}
<div></div>
You are missing with transition: 0.5s;
background-size: 200% auto; css properties
Please check this. This is work on all the browsers.
div {
transition: 0.5s;
background-size: 200% auto;
width: 90%;
height: 200px;
background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
border-radius: 15px;
position: relative;
margin: 0 auto;
margin-top: 15px;
-moz-box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
-webkit-box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.1),
0 0 0 2px rgb(255,255,255),
0.3em 0.3em 1em rgba(0,0,0,0.3);
}
div:hover {
background-position: right center;
}
<div></div>
I am trying to use a border image where the source is a radial gradient. I have seen plenty of examples with images but have seen none with radial gradients.
Full example in My CodePen
#main {
width: 200px;
border: 8px solid red;
padding: 10px;
border-image:
radial-gradient( farthest-corner, #777 50%, #7770 60%) /* source */
28 / /* slice */
8px 8px 8px 8px / /* width */
4px 4px 4px 4px /* outset */
round; /* repeat */
}
I simply want to surround the box in small circles spaced a few pixels apart preferably using a CSS only solution. Though I am happy to hear other issues
You can do it with background like this:
#main {
width: 200px;
padding:10px;
background:
radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>
If you want all the sides you can do this:
#main {
width: 200px;
padding:13px 10px;
background:
radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-y,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom right/10px 10px repeat-y;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>
I need only horizontal line in a square, I tried in this way but in my case I need only horizontal line on top ,
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>
below is my working fiddle
http://jsfiddle.net/uXbn6/4322/
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image:
linear-gradient(to bottom, black, black),
linear-gradient(to right, red, transparent),
linear-gradient(to right, black, black),
linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
Fiddle
I want to customize a slider like this:
So I was wondering if there was an easy CSS way of doing that, which would adapt to the width of the parent element. Or if I need to add circles in my html and set the color given the percentage.
Here are my two problems that I don't know how to do in full CSS:
Make circles repeat in the background
color only circles using some kind of overlay div that would have background: #color
Is any of that possible?
Thanks!
I don't want to use anything with javascript though, my webpages are heavy enough as is :p
You can use a repeated radial gradient to create dots like this:
Create a single circle with a radial gradient:
radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%)
Place the gradient into a background which is repeated on the x-axis with background-repeat: repeat-x
Center the background horizontally with background-position
Control the size of the circles with background-size
Example
body {
margin: 0;
}
div {
background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%);
background-size: 20px 20px;
background-repeat: repeat-x;
background-position: 5px center;
width: 100vw;
height: 50px;
}
<div></div>
Create a custom range slider input
You can use <input type="range"> and customise it. It's a little bit messy to work cross-browser.
Example
body {
margin: 0;
}
input[type=range] {
-webkit-appearance: none;
cursor: pointer;
background: radial-gradient(ellipse at center, #ffbdd7 0%, #ffbdd7 30%, transparent 30%, transparent 100%) 5px center repeat-x;
background-size: 20px 20px;
width: 100vw;
height: 50px;
outline: 0;
margin: 0;
box-sizing: border-box;
}
/*Chrome*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
transition: box-shadow .3s;
}
input[type=range]:focus::-webkit-slider-thumb {
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.5)
}
/*Firefox*/
input[type=range]::-moz-range-thumb {
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
border: none;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-moz-range-track {
background: none;
}
/*IE 11 and Edge*/
input[type=range]::-ms-track {
color: transparent;
background: none;
border: none;
}
input[type=range]::-ms-thumb {
height: 27px;
width: 15px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 39%, #ffbdd7 39%, #ffbdd7 61%, #ffffff 61%, #ffffff 100%) 0 no-repeat;
border-radius: 4px;
background-size: 100% 17px;
border: none;
margin-top: 3px;
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type=range]::-ms-fill-lower {
background: none;
}
input[type=range]::-ms-fill-upper {
background: none;
}
<input type="range">
A useful blog article on cross-browser range input styling can be found over here.
You could fudge it with a full-stop repeated within a CSS content attribute on the :before and :after selectors.
Crude example:
https://jsfiddle.net/xkueyxvb/
I am interested in creating a series of dots that are very close together, like how they have it on the Bloomberg website: http://www.bloomberg.com/markets/commodities
How can I create this? I especially don't know how to create the close compact lines in between the rows.
.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
padding:0px;
}
Thanks in advance!
Inspect element
SNIPPET
.dots {
line-height:17px;
}
.dots:before{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVQIW2P83Sf3n7XoESMjAxQAADjFBAPqoJzEAAAAAElFTkSuQmCC) repeat;
text-indent: -119988px;
overflow: hidden;
text-align: left;
text-transform: capitalize;
content: "pattern dots";
height: 1.25rem;
width: 100%;
display: block;
}
<div class="dots"></div>
the solution can be found in this link
https://codepen.io/aleprieto/pen/nAmIy
<div class="dotted">Dotted</div>
<style>
#import url(http://fonts.googleapis.com/css?family=Oswald);
div {
text-align: center;
font: bold 21px 'Oswald',sans-serif;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
text-transform: uppercase;
}
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
}
</style>