Graphs

Developer
Olivier C
Size
4,250 Kb
Views
16,192
  1. Graphs Previews
  2. Graphs HTML Codes
  3. Graphs CSS Codes
  4. Graphs JS Codes

How do I make an graphs?

What is a graphs? How do you make a graphs? This script and codes were developed by Olivier C on 19 November 2022, Saturday.

Graphs Previews
IQ Test

Graphs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Graphs</title> <link rel='stylesheet prefetch' href='https://scriptura.github.io/Public/Styles/MainDualColor.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <body> <section class="section"> <h1 class="emphasized">Graphs</h1> <h3 class="h4 highlight">Full Css & Responsive</h3> <div class="columns"> <div><code>.graph-vertical</code> <ul class="graph-vertical"> <li><span>Label 1</span><span style="height: 5.7rem"><span class="cover"> : </span>57</span></li> <li><span>Label 2</span><span style="height: 9.9rem"><span class="cover"> : </span>99</span></li> <li><span>Label 3</span><span style="height: 7.7rem"><span class="cover"> : </span>77</span></li> <li><span>Label 4</span><span style="height: 4.2rem"><span class="cover"> : </span>42</span></li> <li><span>Label 5</span><span style="height: 6.7rem"><span class="cover"> : </span>67</span></li> <li><span>Label 6</span><span style="height: 10rem"><span class="cover"> : </span>100</span></li> <li><span>Label 7</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 8</span><span style="height: 13.7rem"><span class="cover"> : </span>137</span></li> <li><span>Label 9</span><span style="height: 0"><span class="cover"> : </span>0</span></li> <li><span>Label 10</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 11</span><span style="height: 4.5rem"><span class="cover"> : </span>45 </span></li> </ul> </div> <div><code>.graph-vertical-animation</code> <ul class="graph-vertical-animation"> <li><span>Label 1</span><span style="height: 5.7rem"><span class="cover"> : </span>57</span></li> <li><span>Label 2</span><span style="height: 9.9rem"><span class="cover"> : </span>99</span></li> <li><span>Label 3</span><span style="height: 7.7rem"><span class="cover"> : </span>77</span></li> <li><span>Label 4</span><span style="height: 4.2rem"><span class="cover"> : </span>42</span></li> <li><span>Label 5</span><span style="height: 6.7rem"><span class="cover"> : </span>67</span></li> <li><span>Label 6</span><span style="height: 10rem"><span class="cover"> : </span>100</span></li> <li><span>Label 7</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 8</span><span style="height: 13.7rem"><span class="cover"> : </span>137</span></li> <li><span>Label 9</span><span style="height: 0"><span class="cover"> : </span>0</span></li> <li><span>Label 10</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 11</span><span style="height: 4.5rem"><span class="cover"> : </span>45</span></li> </ul> </div> </div> <div class="columns"> <div><code>.graph-vertical-image</code> <ul class="graph-vertical-image" style="background: url('https://scriptura.github.io/Images/demo/ponton.jpg')"> <li><span>Label 1</span><span style="height: 5.7rem"><span class="cover"> : </span>57</span></li> <li><span>Label 2</span><span style="height: 9.9rem"><span class="cover"> : </span>99</span></li> <li><span>Label 3</span><span style="height: 7.7rem"><span class="cover"> : </span>77</span></li> <li><span>Label 4</span><span style="height: 4.2rem"><span class="cover"> : </span>42</span></li> <li><span>Label 5</span><span style="height: 6.7rem"><span class="cover"> : </span>67</span></li> <li><span>Label 6</span><span style="height: 10rem"><span class="cover"> : </span>100</span></li> <li><span>Label 7</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 8</span><span style="height: 13.7rem"><span class="cover"> : </span>137</span></li> <li><span>Label 9</span><span style="height: 0"><span class="cover"> : </span>0</span></li> <li><span>Label 10</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 11</span><span style="height: 4.5rem"><span class="cover"> : </span>45</span></li> </ul> </div> <div><code>.graph-mark</code> <ul class="graph-mark"> <li><span>Label 1</span><span style="height: 5.7rem"><span class="cover"> : </span>57</span></li> <li><span>Label 2</span><span style="height: 9.9rem"><span class="cover"> : </span>99</span></li> <li><span>Label 3</span><span style="height: 7.7rem"><span class="cover"> : </span>77</span></li> <li><span>Label 4</span><span style="height: 4.2rem"><span class="cover"> : </span>42</span></li> <li><span>Label 5</span><span style="height: 6.7rem"><span class="cover"> : </span>67</span></li> <li><span>Label 6</span><span style="height: 10rem"><span class="cover"> : </span>100</span></li> <li><span>Label 7</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 8</span><span style="height: 13.7rem"><span class="cover"> : </span>137</span></li> <li><span>Label 9</span><span style="height: 0"><span class="cover"> : </span>0</span></li> <li><span>Label 10</span><span style="height: 8rem"><span class="cover"> : </span>80</span></li> <li><span>Label 11</span><span style="height: 4.5rem"><span class="cover"> : </span>45</span></li> </ul> </div> </div> <p class="headband"><a class="addletter" href="https://scriptura.github.io/">Scriptura Project</a></p> </section> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Graphs - Script Codes CSS Codes

[class^="graph"] { display: table; table-layout: fixed; box-sizing: border-box; width: 100%; height: 22rem; margin: 0 0 2rem; padding: 0; background-image: -webkit-linear-gradient(#eee 5%, rgba(0,0,0,0) 5%), -webkit-linear-gradient(left, #eee 5%, rgba(0,0,0,0) 5%); background-image: linear-gradient(#eee 5%, rgba(0,0,0,0) 5%), linear-gradient(90deg, #eee 5%, rgba(0,0,0,0) 5%); background-size: 2rem 2rem;
}
[class^="graph"] li { display: table-cell; vertical-align: bottom !important; text-align: center; padding: 0 0.1rem;
}
[class^="graph"] li span:first-child { position: relative; display: block; top: 1rem; min-width: 8rem; margin: 0; padding: 0; color: #333; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-45deg) translateZ(0); transform: rotate(-45deg) translateZ(0);
}
[class^="graph-vertical"] li span:last-child { display: block; vertical-align: bottom; color: #fff; text-shadow: 0 0 0.1rem rgba(0,0,0,0.8); background-color: #be3c00; background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.1) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.1) 100%);
}
[class^="graph-vertical"] li:nth-child(odd) span:last-child { background-color: #4f9143;
}
[class^="graph-vertical"] li:nth-child(4n+1) span:last-child { background-color: #5448a8;
}
[class^="graph-vertical"] li:nth-child(5n+4) span:last-child { background-color: #d50ba6;
}
[class^="graph-vertical"] li:nth-child(6n+2) span:last-child { background-color: #d5a60b;
}
[class^="graph-mark"] li span:first-child { top: 0;
}
[class^="graph-mark"] li span:last-child { display: block; vertical-align: bottom; color: #fff; position: relative; top: 1rem;
}
[class^="graph-mark"] li span:last-child:after { content: ''; display: block; height: 1.5rem; width: 1.5rem; margin: -3.7rem auto 0; background-color: #000; background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.1) 100%); border-radius: 50%;
}
.graph-vertical-caption,
.graph-mark-caption { position: relative; border-bottom: 7rem solid #555;
}
.graph-vertical-caption li span:first-child,
.graph-mark-caption li span:first-child { position: absolute; top: 100%; margin-left: 2rem; text-align: left; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
@media (max-width: 40em) { [class^="graph"] li span:first-child { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .graph-vertical-caption, .graph-mark-caption { border-bottom: none; } .graph-vertical-caption li span:first-child, .graph-mark-caption li span:first-child { position: relative; margin-left: 0; }
}
.graph-vertical-animation li span:last-child { -webkit-animation: anim-graph 2s linear; animation: anim-graph 2s linear;
}
.graph-vertical-image { background-size: cover !important;
}
.cover { display: none !important;
}
@-webkit-keyframes anim-graph { 0% { height: 0; }
}
@keyframes anim-graph { 0% { height: 0; }
}

Graphs - Script Codes JS Codes

// no js...
Graphs - Script Codes
Graphs - Script Codes
Home Page Home
Developer Olivier C
Username olivier-c
Uploaded November 19, 2022
Rating 3
Size 4,250 Kb
Views 16,192
Do you need developer help for Graphs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Olivier C (olivier-c) Script Codes
Name
Resize Navigation Bar
Space Invaders
One Page Template HTML5
Flex layout
Mosaic
TagSphere
Parallelogram with background-image
Mosaic cubes
Some problems caused by flexbox
Vertical Organizational Chart
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!