【ツール】linear-gradientで遊ぼう！ - Little Strange Software
どうも！LSSです！！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ コード 使い方 色選択ボックスとスライダーのセットが９つ、並んでいます。 ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。 スライダーはそれぞれの位置指定（%）に該当します。 色選択やスライダーをいじると、リアルタイムに枠のグラデーションが変化し、またその状態のlinear-gradientのコードが表示されます。 CSSとしてこの生成されたコードを使用する場合は、 background-image:linear-gradient(なん
【ツール】雨降りCSSコード生成ツール - Little Strange Software
どうも！LSSです！！ 「雨降りCSSコード生成ツール」完成しました！ 雨降りCSSコード生成ツール 使い方 雨降りCSSコード生成ツール 速度:秒（雨枠１つ分、横に移動するのにかかる時間） 雨の色: 雨の太さ:px 雨の角度:deg 雨の横位置:px（雨の長さにも影響） 雨枠の幅:px 雨枠の高さpx 雨２の横ズレ:px 雨２の縦ズレ:px 雨３の横ズレ:px 雨３の縦ズレ:px 背景色グラデーション: コード 使い方 雨が降っているアニメーション、調整用コントロール、コード、があります。 調整用コントロールの内容を変更する事で、リアルタイムに雨のアニメーションが変化します。（アニメーション速度、雨の角度など） 色々変えてみて遊べる他、調整を加えたアニメーションを表示するためのコードが表示されます。（こちらも調整用コントロールの内容を変更した時点でリアルタイムに内容生成されます） 気に入
【ツール】repeating-conic-gradientによる背景模様生成ツール - Little Strange Software
どうも！LSSです！！ CSSで、３種類あるgradientを用いて「模様が繰り返すタイルパターン」のような背景を描画できます。 中でも、repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeating-conic-gradientによる背景模様生成ツール 使い方 repeating-conic-gradientによる背景模様生成ツール 開始角度： 中心位置（横）： 中心位置（縦）： 繰り返し： 色1： 色2： 幅： 高さ： ランダム設定 コード 使い方 最初は、白と黒の格子模様、オレンジ色
【ツール】3D直方体コード生成ツール - Little Strange Software
どうも！LSSです！！ 【CSS】preserve-3dを使って直方体を描いてみたら案の定大変だった話 で、とりあえず直方体をCSSで描いてみました。 要領はなんとか分かったものの、サイズ変更時のtranslateZの値の指定が少々面倒です^^; という事で、CSSが分からなくても、3Dの概念が分からなくても、画面上でスライダーをいじるだけで「直方体が描けるコード」を出力するツールをJavaScriptで作ってみました！ 3D直方体コード生成ツール 使い方 貼り付けた後のコードの修正について あとがき 3D直方体コード生成ツール コード 使い方 表示サンプル 直方体の傾きを示す「X:-20deg Y:-20deg Z:0deg」という表示 X軸回転、Y軸回転、Z軸回転に対応した３つのスライダー 直方体のサイズを示す「幅:200px 高さ:100px 厚さ:50px」という表示 幅、高さ、厚
【コード生成】text-shadow調整ツール - Little Strange Software
どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール 文字色 文字サイズ 太字 影色 影位置・横 影位置・縦 影ぼかし コード 使い方 「文字色 文字サイズ 太字」で、装飾対象となる文字の設定ができます。 「影色 影位置・横 影位置・縦 影ぼかし」でtext-shadow部分の設定ができます。 お好みの設定ができましたら、「コード」内の文字列をコピペして、文章部分を書き換えてご利用ください^^ …という小ネタなんですが 自分でtext-shadowを使う際には、コード上の数値を調節しては、表示を確認して、また調整…という事をやっていたので、text-shadowを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
