WEB制作

SVGモーフィングアニメーションを自動補完してくれるjsライブラリ『flubber』

通常SVGのモーフィングアニメーションといえばCSSで動かすにしろ、jsで動かすにしろ、元のSVGの頂点の数を次のSVGの頂点の数に合わせなければ、スムーズなアニメーションにはならないです。flubberは簡潔な記述で、その問題を解決し、スムーズなSVGモーフィングアニメーションを実行できます。どのような感じかというと、次の動画みたいな感じになります。

no image

SEOのまとめ、やっている人が少ない効果のあるSEO

サイトやブログ運営者にとってSEO(Search Engine Optimization)は、特に重要視すべき要素のひとつ。 近年ではgoogleのアルゴリズムの進化によって【コンテンツ】と【ソーシャルメディアでの言及数】が重要視されており…

WEB制作のアイキャッチ画像

CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類+α】

CSSアニメーションエフェクトを使った表現のメニューや、ボタンを作るときに参考にさせてもらっているサイトのご紹介。WEBデザインでメニューやボタン、画像のキャプション表示等のエフェクトに悩んだ時に見て欲しいDEMOの紹介です。フラットデザインやマテリアルデザインにも調和するので、デザインに悩んだ時にどうぞ。CSS3初心者はまずこちらをどうぞCSS3をまだ勉

no image

独学で学んできたWEBクリエイターだったけど、初心者に役立つサイトと学習方法を教える

今日のはてぶチェックで上がっていた記事に影響受けて書いてみました。 紹介されている情報と被らないように書いてみたので、下記もチェックしてみてくださいな。 なるべく【学んでいく】というのを趣旨で書いたので、コピペだけでサイトが作れる様になる的…

no image

【wordpressの不正ログイン対策】WP-Ban Pluginの国別で拒否設定方法&ホスト名リスト

最近になって当ブログへのブルートフォースアタックがかなり増えてきたので、不正ログイン対策としてwp-ban Pluginの設定を見直してみた。一応パスワードはかなり強固なものにしてあるので、数百回の試行程度では破られないものと自負してますが…

no image

【javascript】jQueryでクラスを切り替え、CSS3でアニメーションさせるテキストロゴ

jQueryでCSSを操作してアニメーション効果を出す手法が、ちょっと前から流行っていまして、簡単に出来るテキストアニメーションを作ってみました。 概要としてはこんな感じです。 setIntervalを使い一定時間で動作させる。 jQuer…

photoshopのアイキャッチ画像

photoshopで周りの景色を反射させる3dテキストエフェクトのチュートリアル

海外のphotoshopチュートリアルサイトを見ていたら、かっこいいテキストエフェクトのチュートリアルがあったので試して見ました。Chrome 3D Text Using Ima

no image

EmmetでCSSを記述する時、連番表示をしたい場合の方法

コーディングの速度を爆速にしてくれるemmet。 HTML側の連番出力は公式サイトでも解説があるので、簡単にできていたのですが、HTML側で連番でclass名とかを出力したら、CSS側でも連番出力したい!でも公式で調べても見つからなかったの…

no image

jQuery+css3でスクロールすると要素をアニメーションで表示するやつ

画面を下にスクロールしたら画像やらテキストやら等の要素を、ふわっっとアニメーションして表示されるやつのコードを書いてみました。 こういったエフェクトを使用しているページは、キャンペーンサイトとか、商品のランディングページとかによく使われてい…

photoshopのアイキャッチ画像

photoshopでアイメイクをする方法

photoshopでアイメイクをするチュートリアルです。アイメイクといっても、ナチュラルメイク、たれ目メイク、特殊メイク、ヴィジュアル系メイク、小悪魔系メイクと挙げていったらキリが無いほど様々な手法と種類がありますが、今回は基本的なメイクの手法・ナチュラルメイクでアイメイクをしていきます。ナチュラルメイクはあまりbefore,afterの変化具合が少ないですが、ナチュラルメイクの手法を