ウェブデザインと同様に大手ブランドもロゴのデザインを変更しています。最近では、日本ハム、三菱電機、村田製作所など、また一昔前では話題になったGAP、Twitter、スターバックスなども。 好みはありますが、リデザインしたロゴは洗練されており、トレンドをうまく取り入れているものが多いと思います。 ロゴのトレンドの最新版は、こちら。 2021年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
フォームにテキストを入力する際、ちょっと面白いアニメーション(5種類)を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
HTML 画像とキャプションのテキストをfigure要素で配置し、divで内包します。 <div class="flip-3d"> <figure> <img src="yacht.jpg" alt=""> <figcaption>Yacht</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="bee.jpg" alt=""> <figcaption>Bee</figcaption> </figure> </div> シャドウ用の余分なマークアップは、必要ありません。 CSS まずはfigure要素を3Dにし、各画像をfloatで配置します。 div.flip-3d { perspective: 1200px; width: 30%; float: left; } div.flip-3d figure
Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。 Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。 まずは、本家のBootstrapから。 Bootstrap 3 スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。 最新のBootstrap 3rc1(7/27に公開)はリリース候補版です。 Examples Templates for Bootstrap Bootstrap純正のテンプレートやページの仕掛けが揃っています。 Narrow marketing 小さいプロジェクト用の軽量のテンプレート。
海外のクリエイティブチーム「Freepik」とのコラボで、ビジターのみなさんに日頃の感謝を込めて、コリス限定のアイコン素材を配布します。 先日Twitter@colisscomでどんなアイコンが欲しいか希望を聞き、Freepikの中の人と相談し、アイコンを作成していただきました。 Freepik.comは、海外のウェブ制作系ブログSmashing MagazineやSix RevisionsやWeb Designer Depotでもお馴染みで、そのブログだけのオリジナルのアイコンセットを配布するコラボに当ブログも加わりました。 日本では初だそうです、やったね! アイコンのテーマは「Celebrations」 ビジネス系のは他のサイトにたくさんあるので、ホビーやライフなどを主体としたアイコンを依頼しました。
最近のトレンドを踏襲した、ディテールの作りこみも丁寧に解説されたウェブデザインを作成するPhotoshopのチュートリアルを紹介します。 ここ半年くらいに公開されたものから厳選しました。
dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの?」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。
ノスタルジックなデザインがかわいいヴィンテージペーパーの高解像度のテクスチャ素材を紹介します。 ウェブサイト・ブログの背景をはじめ、ストーリーボード、カードなど利用方法はあなた次第!
フラットが最初にきた時ほど大きな波ではないと思いますが、単調なフラットなデザインのアクセントにつかえそうなじわじわきてる新しいデザイントレンド「long shadow design」を紹介します。 long shadow design 「long shadow design」は文字通り「長いシャドウを使ったデザイン」で、フラットなスタイルに奥行きを与えることができます。 dribbbleなどのアイコン作品でも最近よく見かけますね。
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応! Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード(矢印キー)での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ:div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
素材の利用にあたっては個人でも商用でも無料、とのことです。 詳しくは、ライセンスページをご覧ください。 Terms of Use
ドロップシャドウはウェブデザインで非常に人気のあるエフェクトです。 このドロップシャドウのエフェクトを使いこなすために、Photoshopのドロップシャドウの各種設定の使い方を紹介します。 How to Use Drop Shadows in Photoshop [ad#ad-2] 下記は各ポイントを意訳したものです。 ドロップシャドウとは レイヤースタイルのドロップシャドウ 描画モード 不透明度 角度 距離 スプレッド サイズ 輪郭 ノイズ ノックアウト 設定の保存と初期化 ドロップシャドウのサンプルファイル ドロップシャドウとは ドロップシャドウの主な用途は、2Dのイメージで3Dの奥行きをシミュレートすることです。これはオブジェクトが3Dの空間で背景の上に浮いていることを表すために、オブジェクトの後ろにオフセットのシャドウをつけます。 下記の例はドロップシャドウを変えることで、光源の大
当サイトで使用しているWordPressのサーバー移転をしたので、その際に行ったWordPressの旧データのバックアップの手順の覚え書きです。 セットアップ編に続く予定です。 はじめに:移転先の確認 1. WordPressのサイトデータのバックアップ 2. WordPressのデータベースのバックアップ 3. WordPressの設定と現況のバックアップ 4. バックアップしたファイルのリスト はじめに:移転先の確認 現在使用しているWordPressのデータを保存する前に、移転先が現在と同じ環境で利用できるのか、それともバージョンが異なるかなどを確認する必要があります。 移転先で使用するWordPressのバージョン 移転先のPHPのバージョン 移転先と異なる場合は、事前に旧環境でバージョンアップを済ませてから各データの保存を行います。 ※バージョンアップの前には別途、データのバック
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く