hoverで残像が残る心地いいアニメーション ～hover fading navigation bar～
マウスポインターを乗せると背景が変化し、離すとアニメーションしながら消えていくhoverを使ったアニメーションです。 これは簡単に実装することが出来ます
Canvasを使った宇宙空間のようなアニメーション ～Canvas Starfield～
Canvasで宇宙空間で星が流れるような表現をしたアニメーションです Canvas Starfield See the Pen Canvas Starfield by Nick Mkrtchyan (@Sonick) o […]
CSSで文字などを点滅させる方法 アニメーションを使った方法
CSSで、文字や要素を点滅させようとおもったらCSS3のopacityとanimationを使うと実現出来ます IE10以下等、ブラウザによっては表示されなかったりします 対応しているブラウザでのみ動作します […]
Canvas・javascriptでランダムに迷路を作り出す・生成する ～Simple Maze code～
ちょっと不思議でおもしろと思った迷路をランダムで作り出すものです Simple Maze code See the Pen Simple Maze code by Gabriel Valfridsson (@GabbeV […]
最終形？WEBで使う画像サイズを極力小さくして使うための画像圧縮ソフトのコンボ PNGoo×Caesium×optipng×jpegoptim
画像を最適化するために色々と創意工夫しているのですが、現在たどり着いた実践している画像最適化術です 妥協と最適化 WEBで使う画像ということで、画面サイズ以上の大きなサイズの画像は不要です まずはWEBペー […]
背景とグラデーションと透過効果をうまく使ったCSSの見出しデザイン ～Gradients～
CSSでグラデーションとRGBaの透過効果をうまく使って背景となじませながら、かっこ良く見える見出しです Gradients See the Pen Gradients by Em Weisiger (@emweisig […]
スマートフォンやタブレットでのトグルボタンにつかえるクリックでアニメーションするアイコン5種 Animated Burgers
Animated Burgers See the Pen Animated Burgers by Adam Orchard (@orchard) on CodePen. http://codepen.io/orchard […]
WordPress 3.8.1が利用可能に メンテナンスアップデート
WordPressの3.8.1が利用可能になりました 主な内容は、バグの修正です とくにこのバグに関係していない方は、急いでアップデートする必要はなさそうです 主なバグはTwitterのURLでの貼付けによる埋め込み機能 […]
150ものSVGアイコンをいろいろなアニメーションで表示するアイコン集 150 Animated SVG Icons
150 Animated SVG Icons See the Pen 150 Animated SVG Icons by Joseph Howard (@jhoward) on CodePen. http://codep […]
無料でCDNで使えるアイコン WEBフォント Font Awesome の使い方
TwitterやFacebook等のSNSのアイコンもあるWEBフォントFont Awesome 無料でCDNで利用出来ます、ダンロードして利用することも可能です WEBフォントでアイコンが使えると、サイズ、カラー、シャ […]
javascriptがあまり分からなくてもランダムに画像や要素ローテーション表示する方法
PHP側でもランダムにして表示することも可能ですが、動的なページをキャッシュして静的なページにしている場合などには、PHPは動かないので出来ません そんな時にjavascriptをHTMLに組み込んでおけばキャッシュの有 […]
レスポンシブデザインで現在どのブレイクポイントで動いているかわかるようにするアイディア ～Responsive without max-width～
Responsive without max-width See the Pen Responsive without max-width by Bart Veneman (@bartveneman) on CodePe […]
CSSのコピペだけで背景のパターンができる ～CSS3 Patterns Gallery～
CSS3 Patterns Gallery http://lea.verou.me/css3patterns/ こちらのサイトではパターン画像をCSSだけで表現したGALLERYです とても短いコードで画像を使うよりも軽 […]
USBメモリー風のCSSだけで作られたボタン アニメーション付き ～Animated CSS3 USB Drives～
Animated CSS3 USB Drives See the Pen Animated CSS3 USB Drives by John Slipper (@johnslipper) on CodePen. http: […]
CSSの画像フィルターを使ったアニメーションの演出 ～Animated skewed panes～
Animated skewed panes See the Pen Animated skewed panes by Terry Mun (@terrymun) on CodePen. http://codepen.io […]
アロー型のパンくずリストのCSSデザイン ～Sledgehammer Breadcrumb Method～
Sledgehammer Breadcrumb Method See the Pen Sledgehammer Breadcrumb Method by Oliver Knoblich (@oknoblich) on C […]
FacebookのLikeボタンをテキストリンクでポップアップにする方法
Facebookのボタン作成からURL形式を取得してそれをテキストにしたときに、javascriptを使ってポップアップで表示する方法 1.Like Button を作成する まずはLikeボタンをFacebookのデベ […]
CSSでマスクを掛けるmask-imageを使ってフォトショップ等で作ったような文字にする ～Masked text～
Masked text See the Pen Masked text by YozhEzhi (@YozhEzhi) on CodePen. http://codepen.io/YozhEzhi/pen/JbjFl ま […]
Twitterのつぶやきボタンをテキストリンク化するバージョン2
Twitterのつぶやきボタンのリンクが少し変わっていたので 改めて、現在のバージョンでのテキストリンク化とjavascriptによってポップウィンドウにする方法です 現在のTwitterのツイートボタンの […]
CSSで作ったいろいろな天候をアニメーションで表現したウェザーアイコン ～CSS3 animated weather icons～
CSS3 animated weather icons See the Pen CSS3 animated weather icons by Lennart Hase (@motorlatitude) on CodePe […]
