webデザイン

パタパタ時計をページ内に表示したくて作ってみました。  CSS等で３D表現しようとしたのですが、環境によって表示が重くなる場合があり、思ったよりカクカクした表示になってしまう場合がございました。またプラスチックのざらっとしたテクスチャも入れてみたかったので思い切って画像で対応することにしました。 そこで、下記の様な画像を制作いたしました。  ０から９までの数字毎に縦10列の構成になっていて、４コマで動く様に動かして行きます。 列の上から下に１列目が１コマ目、２列目が２コマ目、３列目が３コマ目、４列目が最終的に表示させたい数字になります。150ミリ秒ごとに列を動かして動いている様に見せています。 See the Pen flip clock by yoshiaki nakao ( @woopeer ) on CodePen . html、css、javascriptをうまく連携させて行います。 今回動かしたいパーツは、「時（十の位）」「時（一の位）」「分（十の位）」「分（一の位）」「秒（十の位）」「秒（一の位）」の６パーツになります。それぞれ <div id="hour10"></div><div id="hour1"></div><div id="min10"></div><div id="min1"></div><div id="sec10"></div><div id="sec1"></div>というブロックで構成いたしました。 先ずは、css。予め各パーツの背景に画像を貼り付けておきます（background-image）。 位置（background-position）はJSで設定するので設定を省きます。画像を１コマサイズ　横60px　縦100pxで制作してますが余白が下2px横4pxですのでそれぞれのパーツを　横56px　縦98px　で固定しました。秒に関しては時分より少し小さく表示させたかったので、cssで縮小（transform: scale3d）させています。 実際

背景に◯×を入れるという案件がございました。 「良いですよ」という内容の文章の背景に◯を表示し、「良くないですよ」という内容の文章の背景に×を入れるというものでございました。 やり方はいろいろあると思います。画像やSVGで背景に入れてもいいですし、CSSで整形したものを重ねても良いでしょう。 今回はCSSのグラデーションを使って実現する方法を選択いたしました。特に理由はないのですが、昨今ブラウザの対応が進んでますので、そろそろ「radial-gradient」も使って良いと判断したのとSVGで作るほど複雑なものでもないかなと思い、今回はCSSグラデーションを使っての制作となりました。 以下が実際のHTML、CSSになります。 See the Pen CSSで背景に○× by yoshiaki nakao ( @woopeer ) on CodePen . ◯は結構単純で外側から30px部分だけグラデーションでカラーを入れて、それより内側は透明にすれば完成です。 ×は多少テクニックが必要で、まず斜め45度と－45度の帯をクロスさせるのですが、普通にやってもうまくいきません。 センターでちょうどクロスさせるには、50%を基準に－15pxと＋15pxで帯をグラデーションさせることで30pxの帯をセンターでクロスさせることができます。（作りたい帯の幅を半分にして＋－させてセンターにしている。） ただ、これだけですとボックスの端まで帯が続いてしまうので×に見えません。 これを解決するために、外側にボックスと同じ背景のカラー（例では白）の円でマスクする形のグラデーションを重ねています。 ですので×の端っこは実は円です。でも幅30px程度の厚みでは見た目上、円に見えないというのが今回のポイントです。 ×に関しておさらいすると ①円グラデーション「中心から99.9%透明→100%背景カラー」 ②斜め45度グラデーション「中心から50%－15px透明→中心から50%－15px薄赤→中心から50%＋15px薄赤→中心から50%＋15px透明→100%透明」 ③斜めー45度グラデーション「中心から50%－15px透明→中心から50%－15px薄赤→中心から50%＋15px薄赤→中心から50%＋15px透明→100%透明」 の４つのグラデーションを重ねて×を