コピペで簡単に使用できる、ローディング用のアニメーションにぴったりなSVGベースのスピナーを紹介します。 さまざまなデザインのスピナーが揃っており、画像は一切使用されていません。アニメーションも快適で、くるくる気持ちよく動きます。カラーやサイズなどのカスタマイズも非常に簡単！ <svg fill="hsl(228, 97%, 42%)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="3" r="1"><animate id="spinner_7Z73" begin="0;spinner_tKsu.end-0.5s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.3
待ち望んでいた人も多いと思います！ フォント制作の王道ソフト「Glyphs（グリフス）」初の解説書がついに発売！！ 執筆陣も非常に豪華、Glyphs日本語版を監修した書体デザイナーの大曲 都市氏、GlyphsのTipsを公開している照山 裕爾氏、Glyphs用のテンプレートを多数公開している丸山 邦朋氏、アドビの書体デザイナーである吉田 大成氏、ベジェ曲線の基本から実際のフォント制作の入門までカバーした解説書です。 「Glyphs（グリフス）」が気になっていたけど、どこから手をつけてよいのかさっぱりだったという人にお勧めの解説書です。Glyphsのダウンロード・インストールから、購入方法、インターフェイス・基本操作、ベジェ曲線のさまざまなパス操作、記号フォント・欧文フォント・和文フォントの作り方まで詳しくていねいに解説されています。 Glyphsの練習用ファイルや完成ファイルをサポートサイ
画像から1クリックで簡単に背景だけを切り抜くオンラインサービス「Remove.bg」がPhotoshopに対応したので紹介します。しかも無料で利用できます！ Photoshopのエクステンションとして利用でき、1クリックで背景だけを画像から切り抜くことができます。下記の切り抜きも1クリックだけです。 写真: ぱくたそ Remove.bg for Photoshopの使い方 Remove.bg for Photoshopのインストール Remove.bg for Photoshopの使い方 Remove.bg for Photoshopをさっそく使用してみました。 操作は1クリックだけなので、説明することがほとんどありません。 まずは、画像を用意します。
デザインで悩んだ時には、新鮮なトレンドをチェックしてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのトレンドを紹介します。 今まで使用してきたトレンドにも一手間加えられて、より魅力的なものになっています。 3 Essential Design Trends, January 2018 3 Essential Design Trends, February 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 左上のロゴをシンプルに 垂直型の細いサイドバー ピーチ・カラー サークル状の要素 分割レイアウト ダーク系の背景にホワイトのテキスト 左上のロゴをシンプルに このトレンドは見逃されがちですが、左上にブランドをテキスト化したものがカムバックしています。アイコンを含めるのももちろん有りで、注目
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
ごく普通のHTMLでも、BootstrapでつくったHTMLでも、あっという間にWordPressのテーマファイルに変換するオンラインサービスを紹介します。 HTML To WordPress HTML To WordPressは非常にシンプルな操作で、HTMLのフォルダをアップロードするだけで、簡単にWordPressのテーマに変換されます。変換したテーマはプレビューは無料で、テーマのダウンロードは1HTMLごとに$9、制作の手間を考えるとかなり魅力的な価格設定だと思います。 という訳で、静的なHTMLを用意してさっそく試してみました。 用意したHTMLは、こちら。 Land.io -GitHub ダウンロードページ 個人・商用利用、無料。 Bootstrap 4をベースにしたテンプレートで、新しいカードコンポーネントを使い、繊細なアニメーションでコンテンツを魅力的に見せています。 La
CSSスプライト用の画像はどうやって作成してますか？ ロゴやナビゲーションやアイコンなどをPSDファイルにちまちま並べて、Photoshopで書き出す感じでしょうか。 そんな面倒な作業とおさらばできる便利な機能拡張「Sprite Sheet Gen」を紹介します。 しかもコリスのビジター限定で3名様にプレゼント！ そして絶対欲しい人用に半額キャンペーンも同時に行います！ 応募期間は、2015年5月28日で終了しました。 半額キャンペーンは、29日23:59までです。 Sprite Sheet Gen コリス限定：プレゼント企画と半額キャンペーン 「Sprite Sheet Gen」の紹介 「Sprite Sheet Gen」の使い方 「Sprite Sheet Gen」をプレゼント！ 応募期間 応募要項 当選発表 コリス限定：プレゼント企画と半額キャンペーン 今回は通常のプレゼント企画だけ
Photoshopの設定を変更して、動作を軽快にするための10のステップをSmashing Magazineから紹介します。 10 Simple Steps to Better Photoshop Performance はじめに もし、あなたがPhotoshopの設定をデフォルトのまま使用していたり、パフォーマンスを改善するために再点検することを望むなら、ここで紹介する10のポイントをチェックしてみてください。 1. ヒストリーの数を調整 作業履歴を記録するヒストリーはRAMを肥大化させるため、できるだけ数を少なく設定します。 一つの目安として、RAMが2GB以下の場合はヒストリーを使用しない方が軽快に動作します。 [編集] - [環境設定] - [パフォーマンス]の「ヒストリー&キャッシュ」で設定を変更できます。 2. キャッシュレベルの数を調整 レイヤーの数が少なく高精細の画像の場合
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
Demo 3 BookBlockの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト、そしてスワイプイベント用に「jquery++」を外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquerypp.custom.js"></script> <script type="text/javascript" src="js/jquery.bookblock.js"></script> Step 2: HTML 各ページはdiv要素で実装し、それらをdiv要素で内包します。 <div id="b
カクカクとした真っ直ぐなラインが面白い、フリーのデザインフォントをDesignbeepから紹介します。 20 Free Popular Square Fonts For Designers
Code a Simple Folded Corner Effect With CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 デモページ [ad#ad-2] 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置したdiv要素に、class（foldtl）を加えます。 <div class="page foldtl"> <h2>見出し</h2> <p>パラグラフ...</p> </div> CSS まずは、ページ全体とdiv要素のスタイルです。 div要素の背景はCS
Demo 2 赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。 また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。 Sticky Sidebarの使い方 オーソドックスなデモを例に実装方法を紹介します。 外部ファイル スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="stickysidebar.jquery.js"></script> HTML ページは2カラムで、サイドバーにパネルをdiv要素で実装します。 <div id="main">コンテンツ</div> <div id="side"> <div id="
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 LeaVerou / animatable デモページ [ad#ad-2] デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。 全部同時にアニメーションすると、何がなにやら分からない状態にw [ad#ad-2] 下記に数多くあるデモから、いくつか紹介します。 デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
