以前であればアニメーションGIFを用いることが多かったローディングアニメーション(プリローダー)も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。 また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。
ツルっとしたラインを手彫っぽく加工する このままだとハンコとしてはツルっとしすぎなので、デザインカッターを使い、削りだしたような加工をしていきます。 「効果」→「パスの変形」→「ラフ」で線をガタガタにします。 プレビューで確認しながら調整してみてください。ポイントを「ギザギザ」にしたほうが、より削りだす感じをだせるかと思います。 こんな感じです。手掘り感、でたでしょうか? かすれの加工をする スタンプ独特の風合いをだすために、インクがかすれたような加工をします。 素材からスプレーを吹き付けたようなオブジェクトを用意しました。 こちらを使って2通りのやり方でかすれを表現してみたいと思います。 パスファインダーを使う場合 スプレーが上になるようにオブジェクトをかさね、「パスファインダー」→「前面オブジェクトで型抜き」をします。 スプレーのオブジェクトで背面のオブジェクトが貫かれた複合シェイプが
WordPressの記事にちょっと凝ったデザインのパーツを入れようとすると、スタイルシートを設定したり画像を作ったりと、案外手間が掛かることがあります。そんなときに、簡単に様々なパーツを埋め込めるのが、今回紹介するプラグインの「WP Canvas – Shortcodes」です。 このプラグインひとつで記事内に追加出来る項目は以下の通り。 アコーディオン タブ トグル カラムとセクション お客様の声 ボーダー ボタン Full Width 通知 Googleマップ ソーシャルアイコン プログレスバー 価格表 フラグ付きの画像 ハイライト カウントダウン RSVP カスタムHTML コードスニペット 任意の投稿の表示 様々な種類のアイコン プラグインのインストール 下記のURLからプラグインをダウンロードして、wp-content/pluginsディレクトリにインストール。その後、管理画面か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く