以前であればアニメーションGIFを用いることが多かったローディングアニメーション(プリローダー)も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。 また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。
ストライプやドットなどのパターンオーバーレイを、 任意の色に編集可能な状態で変更する方法を紹介します。 一般的には、パターンをラスタライズするか、スマートオブジェクト化してから レイヤースタイルのカラーオーバーレイで着色する方法が多いかと思いますが、 その方法では、シェイプのカタチを変更させづらいのです。 1.シェイプにレイヤースタイルでパターンを適用 シェイプを作り、シェイプの塗りを0にして、 レイヤースタイルで任意のパターンを適応します。 ※パターンは塗りと透過で出来ている必要があります。 2.シェイプをグループ化し、レイヤースタイルでカラーオーバーレイを適用 パターンを適応したシェイプをグループ化し、 そのグループにカラーオーバーレイで着色完了です! 直接シェイプにカラーオーバーレイをすると、 パターンだけに着色されそうですが、透過にしていても 土台となるシェイプ全体に色がついてしま
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか? 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します! ▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 デフォルトのスタイルが原因となる隙間 ボックスモデルが原因となる隙間 ブロック要素内のインライン要素にできる隙間 inline-blockが保持している隙間 DreamWeaverなどWYSIWYGエディタでできてしまう隙間 マージンとマージンの相殺が原因となる隙間 デフォルトのスタイルが原因となる隙間 HTMLを作成する際、スタイルシート無しでも読みやすいようにすることをWeb制作者は忘れがちです。これはすべての要素にブラウザがもつデフォルトのスタイルを上書きして、サイト用のスタイルを適用することを意味します。 ブラウザがもつデフォルトのスタイルとは例えば、パラグラフ
個人事業主がロゴデザイナーに自身のブランドのロゴデザインを依頼し、実際に完成するまでの全ての情報をまとめ、全ての内部資料を公開します。本記事を読めばロゴデザイナーの考え方について理解が深まります。 ※記事のタイトルでは「自社ロゴ」としましたが、正確には個人事業のロゴとなることをご了承ください。 ツイート マーケティストの新しいロゴを作成 お客様にロゴの重要性を説明する仕事があります。しかし、そもそも私自身のブランドであるマーケティストのロゴが既製フォントを並べただけのもので独自性がなく、「ブランドを象徴的に示すものとしてロゴ」の重要性を説明をする説得力が欠けていました。 ちなみに以前までのロゴは以下のようなロゴです。 Zapfinoというフォントを使用 個人事業であるマーケティストを創業して約一年。おかげさまである程度の資金的な余裕ができ、仕事の方向性も固まってきました。マーケティストとし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く