文字を入力して英単語を完成させるゲームを作ったコード 『Word Guessing Game』
これはかなり面白い 表示された上部のアンダーラインの数だけのローマ字が入る文字を予測して完成させていくゲームです
23種の連続した色のシンプルなグラデーションのCSSコード 『Day/Night Gradients』
1～23番、全部で23種のCSSで作られたグラデーションのパターンがあります 左から右へとグラデーションとグラデーションの並びもグラデーションになっています
一つの画像で違った見え方の背景にするトリック 『Background Image Trickery』
背景をスクロールすると何かフィルターを掛けたかのように感じる変化をします これは背景画像と背景色をうまく使ったトリックで
ユラユラと揺れる文字ののれんっぽいものがちょっと面白い 『Swinging Chain Text』
これまた変わり種な演出なんですが、文字を縦に並べてユラユラと揺らすものです 文字は予め指定した文字からランダムに並び替えて表示されるようになっています
集まった粒子が弾けるような感じの背景の演出がカッコイイ ウェブデザイン
ちょっと閲覧すると重たいのですが、ページをヒュ持するときに、つぶつぶがバラバラに飛び散るのが、なんかカッコイイ
ボックスの高さを合わせて、背景を常に表示させていられるようにするテクニックのコード 『Equal Height Price Blocks』
リンク先のページの画面を大きくさせたり、小さくさせてみてください それぞれのブロックで常に背景が表示されるようになっています
昨日のニュース 『はてながサーバー管理ツールをリリース予定。ファンコミュニケーションズのnex8 他6件』
2014年4月9日分 昨日読んだニュース・記事を紹介するコーナー はてなが今春リリースするのはサーバ管理ツール——その名も「mackerel（日本語で鯖）」 | TechCrunch Japa […]
skewとrotateを組み合わせてアナログ風なペンでマーキングしたよな要素のボタンを作る コード 『Skewed buttons』
beforeで図形を作り それを、skewとrotateで変形させることで、長方形とは違った辺の長さが違う長方形を作り出しています カラフルでポップなノート系のデザインのボタンに使えばマッチするかなと思います あと付箋的にプチタイトルに使っても良いかと思います
文字の切り替えのエフェクトがファンタスティックなコード 『Next Effect』
文字の切り替えがとてもおもしろい NEXTを押すと、次の文で使われている英単語が残り 次に文に組み込まれていくという さり気なくすごい ページを移動せずに、文字だけを読ませていくとうことで 小説系のサイト、ブログとかに導入するとマッチするかな
CSS(SASS)だけで作られた夜空に星が流れる パララックス 『Parallax Star background in CSS』
SASSで作られたパララックスです 背景に夜空の星が流れるようになっています 完成度はかなり高く、星の流れ方は毎回ランダムに決定されます 毎回違った、表情になるので それもまた面白いかなと思います
skewを使ったボタンのhoverアクション4パターン 『Skew (& Flower) power』
skewで変形させた要素にhoverアクションを色々付けたアイディアです 要素はベースが文字の部分で、外の枠線がbeforeとafterで作られており、そこにskewを当てて変形させていますので文字は変形しないままです
jQueryプラグインでレスポンシブなリキッドな画面サイズに合わせて文字のサイズを変えれるプラグイン 『FitText』
HTMLの要素とか、画像のサイズとかリキッドに変化出来るのに なんで文字サイズは変化できないんだろう？ なんていうのはWEB制作をしていると思うことですが jQueryのプラグイン 「FitText」 を使うと、親要素の […]
ユニークな3Dに回転するキューブ型のメニューデザイン 『Rotate Menu Link Cube 3D』
かなり奇抜なデザインのメニューです なかなかこのように縦長のメニューっていうのは見かけないのですが、3Dに回転するアニメーションと組み合わせると面白い表現になりますね
ドット絵のアニメーションする砂時計のローダーデザイン 『Hourglass Loader』
シンプルながら、結構手間の掛かっているアニメーションです。 砂時計をドットで表現し、それをローディング用にアニメーションを付けられたものです
SVGをbase64(URIスキーマ)のコードに変換してくれるコード 『SVG-encoder』
SVGの画像データをbase64の画像データに変換してくれるものです コードをPaste SVG code に貼り付けるだけで、即座に下の方に Take Code に表示されます javascriptを使ってクライアントサイドで変換の処理が行われています
CSSのcounterを使ってlist表示の数字をオリジナルのものに変更するデモ 『Decorated Numbered Lists』
リスト表示の際に表示される番号 これをCSSのcounterを使って、独自のものに置き換えたものです この方法を使うことによって、幅広いデザインが可能になります
CSSだけで作成、シンプルなコードでグラフィカルな画像ギャラリーを作るコード 『CSS/HTML Only Carousel』
左右に表示されるサムネイルをクリックすることで、隣の画像を大きく中央に表示させる画像ギャラリーです CSSだけで作られており、さらにコードもとてもシンプルです
丸いエリアに写真とテキストがリンクして表示される少し変わったデザインのスライダー
特徴的なスライドのデザインです、写真とテキストをリンクさせて表示させています テキスト部分は実際には画像に置き換えられたもので、すべて画像で行われています
ボタンをクリックで、要素がクルッと半回転して裏面になるメニューが表示されるデザイン 『Responsive 3D Flip Navigation』
裏面のナビゲーション(メニュー)部分は レスポンシブ対応となっています メニューを隠してスッキリしたウェブデザインに使えるテクニックかと思います
3Dに重ねて表示されたエレメントをクリックで最前に並び替えるコード 『Map portfolio』
3Dに整列されたDIV要素をクリックする事で手前に持ってくるものです 後ろに並ばされているものは、順序が維持されます
