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

Compare commits

base: Juan:3887788e3e6a5442a4bfcc45f9b83743cb0226cf
Branches Tags
Juan:master
...
compare: Juan:698874e6d54eccbcbaaf3afe074a3ff635a51a7a
Branches Tags
Juan:master

4 Commits
3887788e3e ... 698874e6d5

Author SHA1 Message Date
Juan Massuelles 698874e6d5 [HTML/CSS] pure css pie charts
1 year ago
Juan Massuelles 5362b590d6 [HTML/CSS] pure css pie charts
1 year ago
Juan Massuelles 15c79eed68 [HTML/CSS] pure css pie charts
1 year ago
Juan Massuelles 09f509a444 [HTML/CSS] cornered gradient border
1 year ago
5 changed files with 105 additions and 43 deletions
Show Stats

5
gradient-border/index.html
Unescape View File

@ -1,8 +1,9 @@
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="gradient-border-html.css" />
<title>Cornered with gradient border</title>
</head>
<body>
<h2 class="cornered">sources : </h2>

52
pies/_pie-charts.scss
Unescape View File

@ -0,0 +1,52 @@
$pie-size:300px;
$pie-bg:#3434AF;
$red:#ed3457;
$green:#248991;
$orange:#ed8724;
$line-color:#cecece;
$border-width:5px;
$segment-border-width:1px;
:root{
font-family: sans-serif;
}
.pie,.target {
border-radius: 100%;
position: relative;
}
.pie {
height: $pie-size;
width: $pie-size;
background-color:$pie-bg;
top:$border-width;
left:$border-width;
&-segment {
border: dotted $segment-border-width $line-color;
position: absolute;
height: 100%;
width:100%;
}
}
.target {
height: ($pie-size + $border-width * 2);
width: ($pie-size + $border-width * 2);
background-color:$line-color;
}
.references {
position:fixed;
bottom:5px;
right:5px;
border-radius:5px;
padding:10px;
background-color:lightblue;
a {
&[href],&:link,&:hover,&:focus,&:active {
color:darkblue;
}
}
}

49
pies/index.html
Unescape View File

@ -4,56 +4,23 @@
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="pie-charts.css">
<title>Input type="list"</title>
<style type="text/css">
:root{
--pie-size:300;
--pie-bg:#3434AF;
--red:#ed3457;
--green:#248991;
--orange:#ed8724;
--line-color:#cecece;
}
.pie,.target {
border-radius: 100%;
position: relative;
}
.pie {
height: calc( var(--pie-size,200) * 1px );
width: calc( var(--pie-size,200) * 1px );
background-color:var(--pie-bg,black);
top:5px;
left:5px;
}
.target {
height: calc( (var(--pie-size,200) + 10) * 1px );
width: calc( (var(--pie-size,200) + 10) * 1px );
background-color:var(--line-color,grey);
}
.references {
position:fixed;
bottom:0;
left:0;
right:0;
background-color:var(--line-color);
}
</style>
</head>
<body>
<div class="target">
<div class="pie">
<div class="pie pie1">
<div class="pie-segment"></div>
<div class="pie-segment"></div>
<div class="pie-segment"></div>
<div class="pie-segment"></div>
</div>
</div>
<p class="references">
<a href="https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e">
HOW TO: Pure CSS pie charts w/ CSS variables
<i>Create customisable pie charts in ~30 lines of CSS</i>
<strong>HOW TO: Pure CSS pie charts w/ CSS variables</strong>
<br/><span>Create customisable pie charts in ~30 lines of CSS</span>
</a>
</p>
</body>
</html>

35
pies/pie-charts.css
Unescape View File

@ -0,0 +1,35 @@
:root {
font-family: sans-serif; }
.pie, .target {
border-radius: 100%;
position: relative; }
.pie {
height: 300px;
width: 300px;
background-color: #3434AF;
top: 5px;
left: 5px; }
.pie-segment {
border: dotted 1px #cecece;
position: absolute;
height: 100%;
width: 100%; }
.target {
height: 310px;
width: 310px;
background-color: #cecece; }
.references {
position: fixed;
bottom: 5px;
right: 5px;
border-radius: 5px;
padding: 10px;
background-color: lightblue; }
.references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
color: darkblue; }
/*# sourceMappingURL=pie-charts.css.map */

7
pies/pie-charts.css.map
Unescape View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AASA,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO;;AAiCnB,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ",
"sources": ["_pie-charts.scss"],
"names": [],
"file": "pie-charts.css"
}
Write Preview
Loading…
Cancel
Save