HTML&CSS

SVG〜フィルターを使ってスライムのような効果

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。 応用するとモバイルのハンバーガーボタンの変わりにもなります。 元ネタはCSS-TRICKSのサイトです。 サンプル *このサンプルはSafari9.0.3 時点では対応していません。 仕組みが解りやすいように元ネタのサンプルを思  >>続きを読む

SVGとアニメーション2〜pathを描くようなアニメーション

CSS3を使用したアニメーションの例です。 ハートのパスを描いて最後に赤く塗りつぶすものです。仕組みがわかれば簡単に応用できて、見栄えのするパーツを作成できますのでマスターしておきましょう。 サンプル SVGコード ハートのパスはIllustratorで描き、SVGで書き出しをしてその際にSVGコー  >>続きを読む

SVGとアニメーション1〜pathに沿って移動するアニメーション

今回ははSVGのpathに沿ってDOM要素をアニメーションさせる方法です。 SVGのpathに沿ってアニメーションさせる CodeGridの記事が元ネタです。(有料ですがフロントエンドの方にはお勧めのサイトです。) シンプルなサンプル このサンプルのアニメーションの仕組みは刻々と進む時間に対してpa  >>続きを読む

SVG〜Illustratorで作成

SVGの基本的な描き方は「SVG入門」で書きましたが、四角や丸などを描くならまだしもちょっとしたイラストを描くだけでもコードで描写するのは現実的ではありません。 今回はIllustratorであらかじめイラストを作成しておいて、そのデータをSVG化してからインラインSVGとしてコードを記述する方法を  >>続きを読む

SVG入門

SVGとは SVG(Scalable Vector Graphics)とはベクター形式で描画することができる画像形式です。一般的な画像はラスタ形式のもので拡大すると画像が劣化しますが、SVGはベクター形式ですから劣化しない特徴があります。 SVGはXMLの記述をする必要があります。例えば空タグは最後  >>続きを読む

デザインスペースを使ってみよう〜PhotoshopCC2015.1

注意:PhotoshopCC2017からデザインスペースは(プレビュー)は使用できなくなっています。Xdを使ってねということでしょうか、XdのWindows版はまだ出てないけど。。あまり振り回されないでCS6活用している方が賢いかも。 PhotoshopCC2015からデザインスペース(プレビュー)  >>続きを読む

Webサイトの縦書き

2015年には主力ブラウザでは縦書きに対応してきています。縦書きの需要も高くなることが考えられます。まだまだ細かいところでは課題が多いですが、基本的な事はマスターしておきましょう。 横書きを縦書きに変更するCSS3プロパティ「writing-mode:vertical-rl」 HTMLタグ上では当然  >>続きを読む