見た目がなんかこう光ってる丸いマークみたいなのが欲しかった
デザインでLEDランプ（電気製品についてる発光ダイオードみたいなランプ）とか信号機みたいな感じのやつが欲しかった
けど探しても案外見つからなかったのでCSS書いてみた
できたやつ（CodePen）
See the Pen LED lamp(Traffic Light) by sola-msr (@sola-msr) on CodePen.
ソースコード
<divid="app"><divclass="green-circle"></div><divclass="yellow-circle"></div><divclass="red-circle"></div></div>#app{text-align:center;}.green-circle{display:inline-block;/* センター寄せ用 */background-color:rgb(0,255,0);/* ベースカラー */box-shadow:003px3pxrgb(224,255,211),3px3px5px3pxrgb(200,255,0)inset;/* 外側のカラー・左上のカラー */height:20px;/* 円の大きさ */width:20px;/* 円の大きさ */border-radius:50%;/* まるみ *//* 以下はそろえるだけの為のmargin */margin-right:10px;margin-bottom:5px;margin-top:2px;}.yellow-circle{display:inline-block;background-color:rgb(255,230,0);box-shadow:003px3pxrgb(251,255,199),3px3px5px3pxrgb(244,255,93)inset;height:20px;width:20px;border-radius:50%;margin-right:10px;margin-bottom:5px;margin-top:2px;}.red-circle{display:inline-block;background-color:rgb(255,0,0);box-shadow:003px3pxrgb(255,213,213),3px3px5px3pxrgb(255,166,0)inset;height:20px;width:20px;border-radius:50%;margin-right:10px;margin-bottom:5px;margin-top:2px;}おわり
- CSSわからなさすぎる
- ということで正しいかは自信ないです
