CSSだけで雲をかき分けて進むかのような演出をアニメーションで表現
幾つもの雲の画像を使って遠近感を出しながら、アニメーションするものです javascriptは使われておらずCSSのアニメーション効果で作られています
Brackets Sprint 36 が公開 LESSのコードヒントのサポートなど
Brackets 36 の主なアップデート内容 LESSのコードヒントをサポート LESSのコードヒントがサポートされるようになりました、.lessとなるファイルでもCSSと同様にコードヒントが利用可能になります &nb […]
WP PostViewsで自動で記事のカテゴリでランキングを好きなレイアウトで表示させる方法
WP PostViewsで好きなレイアウト好きな場所で表示させるときに、さらにその記事が含むカテゴリを自動で取得してランキングを表示させる方法です。 WP PostViews http://wordpres […]
面白いギミックを仕込んだ入力フォームのデザイン
ユニークなキャラクターと入力フォームです、入力フォームに各フォームにフォーカスが当たるとキャラクターの手が動いて指さしている感じになります、面白いアイディアですね。腕の部分はパーツになっていてrotateをつかって回転を加える事で方向を変えています 変化を加える条件は[data-position=' ']をつかってフォームの順番で操作されています
Paint.NETで選択範囲を簡単に削除してしまう方法
これは知ってると知らないとでは結構作業効率の違いになるかと思う方法です Paint.NETはフリーソフトで動作が軽くて、ちょっとした画像の加工にはぴったりんですがこういうフリーソフトっていうのは基本的に説明書みたいなのは […]
CSSだけで作られた目玉のモンスターっぽくデザインされたスイッチ(チェックボックス) Toggle Switch
ものすごくユニーク、とても楽しいスイッチボタンになっています クリックすると目玉のタイプ・色・方向がアニメーションして変わります。
Windows XP 終了後、費用を掛けずに無料でセキュアにPCを使いたい時の候補
MicrosoftのWindows XPが2014年4月9日(日本時間)をもってサポートが終了します これに伴ってWindows XPのサポート終了以降はOSの脆弱性が発見されても修正されることが無くなり危険な状態になり […]
CSSのスケール(scale)を使えばマウスオーバーで画像を拡大したり縮小したりが簡単に出来ちゃう
CSSを使えば画像の拡大、縮小はwidth、heightを使って行えますが これだと拡大した時の位置が動いたり、周りの要素に影響を与えたりします そんな時scaleを使えばとても簡単に画像を拡大・縮小する事が出来ます & […]
Paint.NETでグラデーション部分の修正にスタンプを使うと綺麗に修正できる
画像編集系のソフトでスタンプという機能があります Paint.NETでもこの機能があります、これを使えば周りの色と同系色に色を塗りつぶすことができるのでグラデーションがかかった箇所の修正時に効果を発揮します […]
マウスオーバーでパカっとカバーが開くキュートな SNS・ソーシャルボタンのデザイン Social Button
ボタンにマウスポインターを乗せると、パカっとカバーが開いて中にあるSNSのボタンが見えるという仕組みです ロゴ(アイコン)はウェブフォントで表示されていますので、レイアウトだけ変えてそのまま使えそうです。
CSSを使って描かれたオリンピックの輪 Olympic rings
Olympic rings http://codepen.io/MattSmith/pen/cHjIC 今の時期らいしいものですね オリンピックの五輪の輪をCSSで作成したものです あのリングとリングの重なりを表現してい […]
CSSのbox-sizingって知ってますか？borderやpaddingによるレイアウト崩れを防ぐことができる便利なプロパティ
CSSにbox-sizingっていうものがあります 私も最近知ったもので、まだまだ知らないものが沢山ありそうですが 今回紹介するbox-sizingを使うと、特に初心者が陥りがちなboderの幅の計算忘れ、padding […]
Windows7でPCが立ち上がったら自動で特定のソフトを起動するようにする方法
windowsにはスタートアップというものがあります そこにwindowsを起動した時に一緒に起動させたいソフトをスタートアップに登録することで自動で起動するようにすることが出来ます PCを使うときに毎回常 […]
複数のてtext-shadowを使ってデコレーションされたテキストとアニメーション Trembling text
テキストシャドーをいくつも使うことで、文字に立体感をつけ、アニメーションでブルブルさせたものです ブルブルするアニメーションはちょっと使いドコロを選びますが、text-Shadowをうまく使った文字の装飾はいい勉強になりますね。
Windows7で右クリックの送るメニューを編集する方法
Windowsの送るメニュー使っていますか？ うまく使えば結構便利な機能なんですけど、初期状態ではあまり使うことが無いかな？と思います どんな使い方をすると便利なのか？ 私の場合はデスクトップにあるドラッグアンドドロップ […]
Chromeで入力フォームに表示される候補を個別に削除する方法
Chromeでは入力フォームに今まで入れた文字から候補を出してくれます オートコンプリートという機能です とても便利なんですが、間違って入力した文字も覚えていていつまでも表示してくれます それはちょっと目障りだし、選択す […]
3Dにメリーゴーランドの様に回転する 画像ギャラリー 3D images gallery
遊園地に有るメリーゴーランドのように回転する 3Dに出来た画像ギャラリーです 画像をマウスオーバーすれば、回転がとまり、画像に掛けられたグレースケールのフィルターが解除されてカラーの写真になり画像が枠内に収まったまま少し拡大します
WordPressでテーブのセル結合を行えるようにするプラグイン Editor Extender
WordPressの記事は基本的にWLWを使って書いています それでも最終確認のためにWordPressの投稿画面を使いますが、プレビューとアイキャッチ登録とWLWでうまく書けないコード部分だけです WLWには表を挿入す […]
経歴や経緯、ロードマップなどに使えるWEBページを作れるコード Timeline Blueprint
ページを表示するときにアニメーションで線が走ります HTML部分はとてもシンプルなので、javascript部分をまるごとコピペして、CSS部分は背景や色を調整すればOK
WordPressの記事一覧(ループ)ではてなブックマークのボタンをそれぞれのページのブックマークとして設置する方法
はてなブックマークのボタンがありますが そのまま設置すれば、そのページのブックマークが出来ます URLとタイトルを指定すれば、指定されたURLとタイトルでブックマークされます これをWordPressで記事一覧のページで […]
