タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます！【極端な例】 - Little Strange Software
どうも！LSSです！！ だいぶ前の記事ですが、 で使用した、background-sizeとbackground-positionというプロパティの自由度の高さを確認してみます！ CSSでドット絵が描けます！ まず枠を作ります ドットをひとつ置いてみます 小さすぎて分かりにくいので、大きくしてみます ここで ちょっと解説 その１ background-image: linear-gradient(red,red); background-size: 5px 5px; background-position: 25px 25px; background-repeat: no-repeat; ２つめのドットを置いてみます ここで ちょっと解説 その２ ２つめのドットを横長にしてみます どんどん増やせます！ かなり極端な例でした^^; CSSでドット絵が描けます！ まず枠を作ります コード <d
【CSS】background-positionプロパティにマイナスの値を指定してみます - Little Strange Software
どうも！LSSです！！ 以前に、やってみたかったけどうまくいかなかった事があります。 little-strange.hatenablog.com これを使いこなせたら、例えば背景画像のスクロールアニメーションができるなー、とか、以前に作ったとあるゲームの表現性が凄く上がるなー、とか思っていたのですが…。 実はもっと簡単な方法で出来そうな気がしてきました！ まず、画像を用意します background-image:url～で指定するとこうなります background-positionプロパティにマイナス値指定 では、background-positionの値を変更するアニメーションを作ってみます！ あとがき まず、画像を用意します ↑以前、散歩記事に使用した画像ですｗ で、これを、幅300px・高さ400pxにサイズ指定したdiv要素に background-image:url('画像ファ
【CSS】background-positionを使った画像の16分割（4x4）やっとできた - Little Strange Software
どうも！LSSです！！ もう何か月も前の記事ですが、 little-strange.hatenablog.com で頭を悩ませていた問題が解決しました！ 画像の16分割 コード background-positionの%指定の特異性 16分割する意味 画像の16分割 画像を16分割した上で、borderで各枠に盛り上がったような効果を書けています。 これ、16個のdivタグで一つ一つ、16分割した各画像を割り当てています。 （画像の縦横サイズを得るために、その下に一枚絵も隠されていたりしますが。） なお、元の画像は↓こちら。 悩ましかった表示位置のズレ、画像の端まで表示できていないなどの問題が解決しています^^ コード <style><!-- #gbox{ display:inline-block; position:relative; width:100%; } #m0,#m1,#m2,
【CSS】background-position 縦スクロールの場合 - Little Strange Software
どうも！LSSです！！ 一昨日の記事、 little-strange.hatenablog.com にコメントいただき、ありがとうございました^^ 「上下もいけるんですよね？」とのコメントを複数いただきましたので、今回は上下移動を含めたスクロールを試してみます！ 縦・横・斜めスクロールする画像 コード 解説 余談：JavaScriptからbackground-positionを指定 縦・横・斜めスクロールする画像 ※あまり真剣に見ると酔っちゃうかもなのでご注意ください！ 画像は一昨日のと同じものを使いまわしていますｗ コード <style><!-- @keyframes bgscr{ 0%{background-position:0px 0px;} 10%{background-position:-470px 0px;} 20%{background-position:-470px -18
【つまづき】background-positionと%の関係性に悩む - Little Strange Software
どうも！LSSです！！ 今日はなんだか、background-positionと格闘していて惨敗しました^^;;; ちなみに、やろうとしているのは こういうのなんですが、実は表示位置指定が失敗していて、ちゃんと分割されていない上に画像も端まで表示されてなかったりしますｗ 失敗しているコード <style><!-- #gbox{ display:inline-block; position:relative; margin:0px; padding:0px; } #m0,#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8,#m9,#m10,#m11,#m12,#m13,#m14,#m15{ position:absolute; width:25%; height:25%; background-image:url(画像ファイルのURL); background-origin:bo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gettingdays.com
www.sunday-webry.com
rail.hobidas.com
2-9-9.com
mainichi.jp
2-9-9.com