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>
Related
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">
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 did not use the standard approach in CSS, is there a more semantically correct approach and moree cross-browser to solving such problems?
Problems:
Many code.
Using the property ::after (I think this is superfluous).
The button has a fixed size.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #050B1F;
}
#button-continue {
margin-top: 46px;
width: 331px;
height: 54px;
border: 3px solid transparent;
border-radius: 56px;
background-color: rgba(11, 27, 55, 1);
position:relative;
cursor:pointer;
}
#button-continue::after {
content: "";
width:337px;
height:60px;
position:absolute;
z-index:-5;
top:-6px;
left:-6px;
border-radius: 56px;
background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px);
}
.button-continue__text {
text-transform: uppercase;
font-size: 0.875em;
color: #99CEFF;
font-weight: 400;
}
.button-continue__text::after {
content: url('img/icon-continue.svg');
position: relative;
top: 3px;
left: 10px;
}
<button id="button-continue">
<span class="button-continue__text">Continue</span>
</button>
I found this example online.
By using this you can avoid using a pseudo-element. But the problem I found was that the created border-image does not bend around the border-radius. So this is probably not what you are looking for.
Using a plain-coloured border would work, but the background image is not made to work with rounded borders. So what you did is probably the way to do it.
I'll just include my code for completeness, but be warned.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: #050B1F;
}
#button-continue {
margin-top: 46px;
width: 331px;
height: 54px;
border-width: 3px;
border-style: solid;
border-radius: 56px;
border-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 120px) 1 round;
background-color: rgba(11, 27, 55, 1);
position: relative;
cursor: pointer;
overflow: hidden;
}
.button-continue__text {
text-transform: uppercase;
font-size: 0.875em;
color: #99CEFF;
font-weight: 400;
}
<button id="button-continue">
<span class="button-continue__text">Continue</span>
</button>
I am practicing and trying to display an image for a border. I created the image and it can be found here.
I am running Firefox 60.0.1 64-bit.
I checked the Network tab in Developer Tools and the image loads just fine. Also my #supports at-rule works just fine. And there are no CSS errors.
However, I don't see the border image at all.
div {
width: 250px;
height: 120px;
background-image: linear-gradient(90deg, rgba(40, 180, 255, 0.9), rgba(40, 100, 255, 0.9));
font-size: 2em;
font-family: Geneva;
margin: 100px auto 0px auto;
padding: 10px;
}
#supports (border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png)) {
div {
border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png);
border-image-slice: 30%;
border-image-repeat: round;
}
}
<div>This is a nice div.</div>
Set border property with some width:
div {
border: 20px solid orange;
width: 250px;
height: 120px;
background-image: linear-gradient(90deg, rgba(40, 180, 255, 0.9), rgba(40, 100, 255, 0.9));
font-size: 2em;
font-family: Geneva;
margin: 100px auto 0px auto;
padding: 10px;
}
#supports (border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png)) {
div {
border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png);
border-image-slice: 30%;
border-image-repeat: round;
}
}
<div>This is a nice div.</div>
That is my css:
width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;
Is it possible to make border-left have a gradient?
Demo: http://jsfiddle.net/abhitalks/fg7Ex/3/
#grad {
width: 60px;
height: 60px;
position: absolute;
top: 32px;
left: 32px;
clip: rect(auto 30px 60px auto);
}
#grad:after {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, .7);
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
-webkit-transform: rotate(-45deg);
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
border: 1px solid #fff;
}
<div id="grad"></div>
Shamelessly picked up from here: https://gist.github.com/distilledhype/582201
You can check the same kind of question in stackoverflow for solution right border gradient
Here is Jsfiddle Demo
There is no cross-browser css solution as it only supports chrome and firefox. So I recommend using div as parent and assigning it css:
.gradient {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
padding: 2px;
}
.gradient > div {
background: #fff;
}
here is html:
<div class="gradient">
<div>text in div</div>
</div>
How about using a box-shadow on a pseudo element of the div. Something like
FIDDLE
div:before
{
content: '';
display: block;
height: 60px;
width: 3px;
box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
left: -30px;
top: -31px;
position: relative;
}
--color:#777;
margin:0 1%;
padding:0 5%;
background:linear-gradient(to right, transparent, var(--color) 5%, transparent 5%, transparent 95%, var(--color) 95%, transparent);