I can't tell my HR gradient is not taking effect or even displaying.
hr.green {
margin-top: 20px;
margin-bottom: 20px;
border: 1px dashed;
border-left: 0;
border-bottom: 0;
border-right: 0;
border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) !important;
border-image-slice: 1;
}
body {
background-color:black;
}
<h1>
TEST
</h1>
<hr class="green">
Did I have a typo somewhere?
I was hoping to see something like this.
add the slice inside the border-image because it will also set the border-image-width which is missing here:
hr.green {
margin-top: 20px;
margin-bottom: 20px;
border: 1px dashed;
border-left: 0;
border-bottom: 0;
border-right: 0;
border-image: linear-gradient(90deg, rgba(48, 183, 149, 1) 10%, rgba(130, 195, 65, 1) 100%) 1;
}
body {
background-color: black;
}
<h1>
TEST
</h1>
<hr class="green">
Related
at first I thought it was easy, until I tried...
is there some god of css can help me lol
but there is a premise, use css only and one html tag, no special character like ★
I finished the outside, But I got one tsudo content only, how to set two stars and one word into that or optimize that(not a real button, just look like it will be fine, thaaaaaaaaaaanks for any help or any thought)
i post what I did so far, and sorry for described it unclearly, It look like a button, not a lol.
#foo::after {
content: "";
position: absolute;
height: 31px;
width: 101px;
border: 1px solid rgb(90, 90, 90);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
box-shadow: 1px 1px 1px lightgrey;
}
#foo::before {
content: "";
color: rgb(78, 78, 78);
font-weight: bold;
font-size: 10px;
position: absolute;
height: 24px;
width: 93px;
border: 1px solid rgb(161, 161, 161);
/* box-shadow: 1px 1px rgb(134, 134, 134); */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
}
#foo {
position: relative;
height: 30px;
width: 100px;
border: 1px solid white;
border-radius: 8px;
background: rgb(209, 206, 206);
}
<div id="foo"></div>
Use before or after pseudo selector to add text. Use CSS Entities or HTML Symbols to add stars.
Use multiple box-shadows to add multiple border styles
body {
padding: 25px;
}
#foo:before {
content: "★ CHECKOUT ★";
}
#foo {
display: inline-block;
position: relative;
padding: 15px 20px;
border-radius: 8px;
font-weight:bold;
font-family:sans-serif;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
box-shadow: 0 1px 2px 2px #0000001a, 0 0 0 8px #cbcbcb, 0 0 0 10px white, 0 0 0 12px #7d7d7d;
}
<div id="foo"></div>
Here is my idea where I build the start using background (https://dev.to/afif/background-pattern-star-shape-194m)
body {
padding: 25px;
}
#foo:before {
content: "CHECKOUT";
display:block;
padding:20px 50px;
--s: 40px; /* size */
--m: 113px; /* space */
--v1:transparent,#fff 0.5deg 108deg,transparent 109deg;
--v2:transparent,#888888 0.5deg 36deg,transparent 37deg;
background:
conic-gradient(from 54deg at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
conic-gradient(from 126deg at calc(var(--s)*0.5) calc(var(--s)*0.7) ,var(--v1)),
conic-gradient(from 162deg at calc(var(--s)*0.5) 0 ,var(--v2)),
conic-gradient(from 90deg at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2));
background-size: calc(var(--s) + var(--m)) calc(var(--s) + var(--m));
mix-blend-mode: darken;
background-position: 0 9px;
}
#foo {
display: inline-block;
position:relative;
padding: 5px 10px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
box-shadow: 0 1px 2px 2px #0000001a, 0 0 0 8px #cbcbcb, 0 0 0 10px white, 0 0 0 12px #7d7d7d;
}
<div id="foo"></div>
I have a code:
button {
background: rgb(1, 81, 227);
background: linear-gradient(
90deg,
rgba(1, 81, 227, 1) 35%,
rgba(0, 90, 255, 1) 100%
);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
And a ton of buttons. I want to apply that css code for all buttons except two, with the IDs startAction & endAction.
How do I do that?
button:not(#startAction):not(#endAction)
by #underscore_d
Your startAction and endAction buttons probably share some of those styles.
If so, just keep those shared lines within the generic button declaration and move the other stuff into a new style and then apply that to the rest of the buttons.
Something like...
button {
display: inline-block;
border: none;
color: white;
...
}
.fancybutton {
background: rgb(1, 81, 227);
background: linear-gradient(
90deg,
rgba(1, 81, 227, 1) 35%,
rgba(0, 90, 255, 1) 100%
);
margin: 4px 2px;
...
}
I am able to customize scrollbar which now looks like below
But, the scrollbar-button looks ugly. I am trying to make the buttons looking like below:
Can anyone please help?
I am using the below css for customizing the scrollbar.
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: rgb(224, 224, 224);
}
::-webkit-scrollbar-thumb {
background: rgb(200, 200, 200);
border: 0.05em solid #eeeeee;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(180, 180, 180);
}
::-webkit-scrollbar-thumb:active {
background: rgb(117, 117, 117);
}
::-webkit-scrollbar-button {
border-style: solid;
height: 16px;
width: 16px;
}
::-webkit-scrollbar-button:vertical:decrement {
border-width: 0 7px 14px 7px;
border-color: transparent transparent rgb(117, 117, 117) transparent;
}
::-webkit-scrollbar-button:vertical:decrement:hover {
border-color: transparent transparent rgb(180, 180, 180) transparent;
}
::-webkit-scrollbar-button:vertical:increment {
border-width: 14px 7px 0 7px;
border-color: rgb(117, 117, 117) transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:increment:hover {
border-color: rgb(180, 180, 180) transparent transparent transparent;
}
Please try below
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 50px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.overflow
{
min-height: 400px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
#stylescroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#stylescroll::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#stylescroll::-webkit-scrollbar-thumb
{
background-color: #a6aebb;
}
<div id="wrapper">
<div class="scrollbar" id="stylescroll">
<div class="overflow"></div>
</div>
</div>
Scrollbar with Custom buttons(both horizontal and vertical bar).....Have a look
Have to customize these classes like:
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-radius: 5px 5px 0 0
height: 16px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,<svg
xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(121, 255,
108)'><polygon points='50,00 0,50 100,50'/></svg>");
}
I have a div tag and I added one triangle on the div box. How do I add a second triangle?
I want to have 2 triangles, one for best and one for worst that will work on most browsers.
JSFiddle
.arrow_box {
top: 40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
-moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 19px;
left: 70%;
margin-left: -19px;
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 70%;
margin-left: -20px;
}
<div id="nicebox" class="arrow_box">
<span class="pull-left">Best </span>
<span class="pull-right">Worst</span>
</div>
Here is the updated Demo
.arrow_box {
top:40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
-moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #719ECE;
border-width: 19px;
right: 0%;
/* margin-left: -10px; */
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 10%;
margin-left: -20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<div id="nicebox" class="arrow_box">
<span class="pull-left"><i class="fa fa-long-arrow-up" aria-hidden="true"></i>Best </span>
<span class="pull-right">Worst</span>
</div>
Ok, so I have a simple div with a height and width set.
Before and after also have height and width set.
They are all set to display as blocks, and the pseudo-elements have content "".
The :before is inside the content, not before it.
And the :after has a load of weird spacing before it.
HTML:
<div class="board">
Hi
</div>
CSS:
.board {
width: 260px; /*300 - 40*/
height: 400px; /*480 - 40 - 40*/
line-height: 400px;
color: #164d87;
font-size: 20px;
font-weight: 900;
margin: 0 auto;
background:
linear-gradient( 0deg,
rgba(2, 188, 226, 0.5) 0%,
rgba(51, 219, 253, 0.5) 25%,
rgba(51, 219, 253, 0.5) 75%,
rgba(2, 188, 226, 0.5) 100%
);
text-align: center;
border: 3px solid #2B2B2B;
}
.board:before, .board:after {
content: "";
display: block;
height: 40px;
width: 300px;
margin-left: -20px;
}
Codepen: http://codepen.io/MattCowley/pen/ZOQMNg
To keep existing markup, you can use position: absolute, and if you need the div to adjust to surrounding elements, give it a left/right margin matching the pseudo's width.
.board {
position: relative;
width: 260px; /*300 - 40*/
height: 400px; /*480 - 40 - 40*/
line-height: 400px;
color: #164d87;
font-size: 20px;
font-weight: 900;
margin: 40px auto 0;
background:
linear-gradient( 0deg,
rgba(2, 188, 226, 0.5) 0%,
rgba(51, 219, 253, 0.5) 25%,
rgba(51, 219, 253, 0.5) 75%,
rgba(2, 188, 226, 0.5) 100%
);
text-align: center;
border: 3px solid #2B2B2B;
}
.board:before, .board:after {
content: "";
position: absolute;
display: block;
height: 40px;
width: 100%;
background: red;
}
.board:before, .board:after {
bottom: calc(100% + 3px); /* 3px for the border */
}
.board:after {
top: calc(100% + 3px);
}
<div class="board">
Hi
</div>