css 项目阶段的徽章
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 项目阶段的徽章相关的知识，希望对你有一定的参考价值。
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Badges for Project Stages</title>
<link href="./dabblet.css" rel="stylesheet" />
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
</head>
<body>
<script src="https://pother.ca/JsBase/add-on/load-dabblet-on-bl.ocks.org.js" id="dabblet-html-goes-here"></script>
</body>
</html>
/* */<h1>Badges for Project Stages</h1>
<article>
<h2>Introduction</h2>
<p>
As any active software developer, I tend to have a lot of projects laying about. With the advent of Github all of these projects now live in the public eye.
</p>
<p>
For me, as the author, it isn't dificult to keep track of which project is in which state of production. For the casual visitor of my project pages this is a different matter.
</p>
<p>
To help passers-by to identify how solid a certain project is at-a-glance, I felt it would be prudent to offer them a "Badge". Some uniform way of knowing what to expect of the code in the repository without even having to look at it.
</p>
<h2>Project Stages</h2>
<p>
Before a visitor can be alerted of which stage of production a project is in, these stages need to be defined. After some general research on what are the most common terms used elsewhere I came up with the following list:
</p>
<div class="stage-banner">
<ol class="current-stage-container">
<li class="stage-block stage-1">C</li>
<li class="stage-block stage-2">R</li>
<li class="stage-block stage-3">E</li>
<li class="stage-block stage-4">D</li>
<li class="stage-block stage-5">.</li>
<li class="stage-block stage-6">!</li>
<li class="stage-block stage-7">?</li>
</ol>
<p class="stage-description">
This project is in its
<span class="stage-list">
<b class="stage-1">Concept</b>
<b class="stage-2">Research</b>
<b class="stage-3">Experiment</b>
<b class="stage-4">Development</b>
<b class="stage-5">Production Ready</b>
<b class="stage-6">Deprecated</b>
<b class="stage-7">Unknown</b>
</span>
stage
</p>
</div>
<h2>The Badges</h2>
<p>
It would be nice to be able to display these stages in an uniform manner across projects. Preferably in a way that mirrors the look and feel of other badge providers.
</p>
<p>
This can quite easily be achieved using the excellent service provided by <a href=" http://shields.io/">Shields.io</a>
</p>
<p>
Below you can find the full set of badges I use and the HTML code needed to display them:
</p>
<table>
<thead>
<tr>
<th>Project Stage</th>
<th>Badge</th>
<th>HTML Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>Concept</td>
<td>
<img src="https://img.shields.io/badge/Project%20Stage-Concept-red.svg" />
</td>
<td><code><img src="https://img.shields.io/badge/Project%20Stage-Concept-red.svg" /></code></td>
</tr>
<tr>
<td>Research</td>
<td><img src="https://img.shields.io/badge/Project%20Stage-Research-orange.svg" /></td>
<td><code><img src="https://img.shields.io/badge/Project%20Stage-Research-orange.svg" /></code></td>
</tr>
<tr>
<td>Experimental</td>
<td><img src="https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg" /></td>
<td><code><img src="https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg" /></code></td>
</tr>
<tr>
<td>Development</td>
<td><img src="https://img.shields.io/badge/Project%20Stage-Development-yellowgreen.svg" /></td>
<td><code><img src="https://img.shields.io/badge/Project%20Stage-Development-yellowgreen.svg" /></code></td>
</tr>
<tr>
<td>Production Ready</td>
<td><img src="https://img.shields.io/badge/Project%20Stage-Production%20Ready-brightgreen.svg" /></td>
<td><code><img src="https://img.shields.io/badge/Project%20Stage-Production%20Ready-brightgreen.svg" /></code></td>
</tr>
<tr>
<td>Deprecated</td>
<td><img src="https://img.shields.io/badge/Project%20Stage-%20!%20DEPRECATED%20%20%20!-ff0000.svg" /></td>
<td><code><img src="https://img.shields.io/badge/Project%20Stage-%20!%20DEPRECATED%20%20%20!-ff0000.svg" /></code></td>
</tr>
<tr>
<td>Unknow</td>
<td colspan="2"><i>no image required</i></td>
</tr>
</tbody>
</table>
</article>
<h2>Usage</h2>
<h3>Markdown</h3>
One-liners for badges in markdown files are less readable and less maintainable,
so use the following instead.
The link for all badges is the same, pointing to this page.
<h4>Concept</h4>
<pre class="code">
[![Project Stage Badge: ][Project Stage Page]
[Project Stage Badge: Concept]: https://img.shields.io/badge/Project%20Stage-Concept-red.svg
[Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Research</h4>
<pre class="code">
[![Project Stage Badge: Research][Project Stage Page]
[Project Stage Badge: Research]: https://img.shields.io/badge/Project%20Stage-Research-orange.svg
[Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Experimental</h4>
<pre class="code">
[![Project Stage Badge: Experimental][Project Stage Page]
[Project Stage Badge: Experimental]: https://img.shields.io/badge/Project%20Stage-Experimental-yellow.svg
[Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Development</h4>
<pre class="code">
[![Project Stage Badge: Development][Project Stage Page]
[Project Stage Badge: Development]: https://img.shields.io/badge/Project%20Stage-Development-yellowgreen.svg
[Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>Production Ready</h4>
<pre class="code">
[![Project Stage Badge: Production Ready][Project Stage Page]
[Project Stage Badge: Production Ready]: https://img.shields.io/badge/Project%20Stage-Production%20Ready-brightgreen.svg
[Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<h4>DEPRECATED</h4>
<pre class="code">
[![Project Stage Badge: DEPRECATED][Project Stage Page]
[Project Stage Badge: DEPRECATED]: https://img.shields.io/badge/Project%20Stage-%20!%20DEPRECATED%20%20%20!-ff0000.svg
[Project Stage Page]: https://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0/
</pre>
<footer class="created-by">
<p>
Any questions or comments can be made on the page of this <a
href="https://gist.github.com/potherca/a2ae67caa3863a299ba0">Gist</a>
or just <a href="https://twitter.com/intent/tweet?screen_name=potherca" class="twitter-mention-button" data-size="large" data-related="potherca">Tweet to @potherca</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</p>
<p>
Source of this page available as a <a href="https://gist.github.com/potherca/a2ae67caa3863a299ba0">Gist</a> under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"
>Creative Commons Attribution-ShareAlike 4.0 International License</a> — Created by <a href="https://pother.ca/" class="potherca">Potherca</a>
</p>
</footer>/**
* Badges for Project Stages
*
* @see: http://result.dabblet.com/gist/a2ae67caa3863a299ba0
* @see: http://bl.ocks.org/potherca/raw/a2ae67caa3863a299ba0
*/
@import url(https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
@import url(https://pother.ca/CssBase/css/base.css);
@import url(https://pother.ca/CssBase/css/created-by-potherca.css);
body {
font-family:'Droid Sans', Arial, sans-serif;
max-width: 45em;
}
td[colspan="2"] {
background: #CCD;
color: white;
text-indent: 2em;
}
.stage-banner .current-stage-container {
position: relative;
border: 0.1em solid;
display: block;
height: 4em;
width: 28.40em;
padding: 0;
border: 1px solid rgb(225,225,225);
box-shadow: 0 0 0.5em rgba(50,50,50, 0.5), 0 0 0.75em rgba(50,50,50, 0.5), 0 0 1em rgba(50,50,50, 0.5);
}
.stage-banner .current-stage-container .stage-block {
display: block;
float: left;
height: 2em;
width: 2em;
margin: 0;
padding: 0;
border-right: 0.05em solid;
border-color: rgb(250,250,250);
color: white;
font-size: 2em;
line-height: 2em;
text-align: center;
font-family: sans, sans-serif;
background-image: radial-gradient(
circle closest-corner,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.25)
)
;
text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}
.stage-banner .stage-block:last-child {
border-right: none;
}
.stage-list {color:white; border-color: #000;}
.stage-banner .stage-1 {background-color: #e05d44;}
.stage-banner .stage-2 {background-color: #fe7d37;}
.stage-banner .stage-3 {background-color: #dfb317;}
.stage-banner .stage-4 {background-color: #a4a61d;}
.stage-banner .stage-5 {background-color: #4c1;}
.stage-banner .stage-6 {background-color: #F00;}
.stage-banner .stage-7 {background-color: #000;}
/*
"brightgreen": { "colorB": "#4c1" },
"green": { "colorB": "#97CA00" },
"yellow": { "colorB": "#dfb317" },
"yellowgreen": { "colorB": "#a4a61d" },
"orange": { "colorB": "#fe7d37" },
"red": { "colorB": "#e05d44" },
"blue": { "colorB": "#007ec6" },
"grey": { "colorB": "#555" },
"lightgrey": { "colorB": "#9f9f9f" },
"lightgray": { "colorB": "#9f9f9f" }
*/
.stage-description {
height: 8em;
vertical-align: top;
}
.stage-banner .stage-list {
display: inline-block;
text-align: center;
position:relative;
border-bottom: 0.1em solid;
}
.stage-banner .stage-list > * {
font-weight: normal;
display: block;
border: 0.1em solid;
border-bottom: none;
}
.stage-banner .stage-list > *:last-child {
background-color: black;
color: white;
}
/*EOF*/以上是关于css 项目阶段的徽章的主要内容，如果未能解决你的问题，请参考以下文章
在 CSS 中以圆形垂直和水平居中文本（如 iphone 通知徽章）
html 徽章45°da mettere su box https://css-tricks.com/snippets/css/corner-ribbon/