Juan
/
lab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[HTML5] class for having a faded corner background

Browse Source
master
Juan Massuelles 2 years ago
parent b1291edae8
commit 5a527e6a3d
5 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File

28
gradient-border/_gradient-border-html.scss
Unescape View File

@ -0,0 +1,28 @@
.cornered {
padding:3px 8px;
position: relative;
@at-root ul#{&} {
padding-left:2em;
}
&:after {
content:"";
position:absolute;
bottom:0;
left:0;
height:60px;
width:60px;
border: 1px solid transparent;
border-image: linear-gradient(45deg,rgba(165,165,165,0) 5px, rgba(165,165,165,1) 10px, rgba(165,165,165,0) 45px, rgba(165,165,165,0) 100%);
border-image-slice: 1;
}
&:before {
content:"";
position:absolute;
bottom:0;
left:0;
height:15px;
width:15px;
background: linear-gradient(45deg, rgba(165,165,165,1) 0%,rgba(165,165,165,1) 50%,rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
border-radius: 0 0 0 5px;
}
}

31
gradient-border/gradient-border-html-initial.css
Unescape View File

@ -0,0 +1,31 @@
.cornered {
padding:3px 8px;
position: relative;
}
ul.cornered {
padding-left:initial;
}
.cornered:after {
content:"";
position:absolute;
bottom:0;
left:0;
height:60px;
width:60px;
border: 1px solid transparent;
border-image: linear-gradient(45deg,rgba(165,165,165,0) 5px, rgba(165,165,165,1) 10px, rgba(165,165,165,0) 45px, rgba(165,165,165,0) 100%);
border-image-slice: 1;
}
.cornered:before {
content:"";
position:absolute;
bottom:0;
left:0;
height:15px;
width:15px;
background: linear-gradient(45deg, rgba(165,165,165,1) 0%,rgba(165,165,165,1) 50%,rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
border-radius: 0 0 0 5px;
}

26
gradient-border/gradient-border-html.css
Unescape View File

@ -0,0 +1,26 @@
.cornered {
padding: 3px 8px;
position: relative; }
ul.cornered {
padding-left: 2em; }
.cornered:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 60px;
width: 60px;
border: 1px solid transparent;
border-image: linear-gradient(45deg, rgba(165, 165, 165, 0) 5px, #a5a5a5 10px, rgba(165, 165, 165, 0) 45px, rgba(165, 165, 165, 0) 100%);
border-image-slice: 1; }
.cornered:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 15px;
width: 15px;
background: linear-gradient(45deg, #a5a5a5 0%, #a5a5a5 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
border-radius: 0 0 0 5px; }
/*# sourceMappingURL=gradient-border-html.css.map */

7
gradient-border/gradient-border-html.css.map
Unescape View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAAA,SAAU;EACR,OAAO,EAAC,OAAO;EACf,QAAQ,EAAE,QAAQ;EACT,WAAO;IACd,YAAY,EAAC,GAAG;EAElB,eAAQ;IACN,OAAO,EAAC,EAAE;IACV,QAAQ,EAAC,QAAQ;IACjB,MAAM,EAAC,CAAC;IACR,IAAI,EAAC,CAAC;IACN,MAAM,EAAC,IAAI;IACX,KAAK,EAAC,IAAI;IACV,MAAM,EAAE,qBAAqB;IAC7B,YAAY,EAAE,0HAA4H;IAC1I,kBAAkB,EAAE,CAAC;EAEvB,gBAAS;IACP,OAAO,EAAC,EAAE;IACV,QAAQ,EAAC,QAAQ;IACjB,MAAM,EAAC,CAAC;IACR,IAAI,EAAC,CAAC;IACN,MAAM,EAAC,IAAI;IACX,KAAK,EAAC,IAAI;IACV,UAAU,EAAE,wGAAyH;IACrI,aAAa,EAAE,SAAS",
"sources": ["_gradient-border-html.scss"],
"names": [],
"file": "gradient-border-html.css"
}

15
gradient-border/index.html
Unescape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="gradient-border-html.css">
</head>
<body>
<h2 class="cornered">sources : </h2>
<ul class="cornered">
<li><a href="https://stackoverflow.com/a/40747995">pour le border en gradient cf https://stackoverflow.com/a/40747995</a></li>
<li><a href="https://stackoverflow.com/a/30668976">pour le @at-root ul#{&} cf https://stackoverflow.com/a/30668976</a></li>
<li><a href="https://www.colorzilla.com/gradient-editor/">pour construire les gradients cf https://www.colorzilla.com/gradient-editor/</a></li>
</ul>
</body>
</html>
Write Preview
Loading…
Cancel
Save