レスポンシブなCSSスプライト - MANA-DOT
よく知られたCSSスプライトはボックスの幅･高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、 background-sizeとbackground-positionを % で指定し、ボックスの幅によって可変サイズな (レスポンシブ、あるいはフレキシブルな)CSSスプライトの表示法を紹介します。 デモ 元画像 gulp-spritesmith で作成した適当なスプライトシートです。 スプライトの利用例 このページの幅を変えてみると、以下のスプライト画像のサイズが画面幅によって可変であることがわかると思います。 上からwidthを 70% 、 50%、 100% で指定しています。 ボタン1 ボタン2 ボタン3 利用例を含め
部屋の照明を操作するかっこいいWebアプリを作った - MANA-DOT
GW中に上記画像のような見た目と操作感で部屋の証明をコントロールできるWebアプリを作ったので紹介します。 概要 ページを開くと上記アニメgifのような部屋の間取りのUIが表示されます。 青いエリアは照明がOFFのエリア、緑のエリアは照明がONのエリアとなっています。 照明をON/OFFしたいエリアをクリックすると、そこのON/OFFが逆転します。また、全部ONにするボタンと全部OFFにするボタンもあります。 今回部屋のすべての照明をコントロールできましたが、単に照明を操作するボタンを並べるだけだとどのボタンがどこに対応してるのか難しいため、このように部屋の間取りをUIとすることでわかりやすくしてみました。 また、最初はただ地図をクリッカブルにするだけのつもりだったのですが、それだとつまらないので無駄に近未来っぽいかっこいいデザインにしてみました。 Webアプリは自宅内のサーバーで稼働して
ドット絵からsvgフォントを作るプログラムを書いたよ - MANA-DOT
前回作った、ドット絵からsvgを作るプログラムでは、文字を1つずつsvgとして出力するため、IcoMoonAppでWebフォントにする作業が大変でした。 なので、プログラムを回収してsvgフォントの形式でまとめた状態で出力するようにしてみました。(ソースコード) このプログラムを実行すると、8x8のフォントから以下のようなsvgフォント形式のsvgが出力されます。 <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <svg xmlns="http://www.w3.org/2000/svg"> <def> <font id="8x8" horiz-adv-x="1024"> <font-face units-per-em="1024" ascent="1024" descent="0"/> <missing-glyph hori
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
