Logo Vs. Icon: What Is the Difference? | Namecheap
Often used interchangeably, the branding terms “logo” and “icon” are not synonymous. They vary in appearance and purpose, but business owners might embark on their venture believing that a logo can do an icon's job. We want to clear up any confusion once and for all. Let’s take a minute to understand the logo vs. icon conundrum and explore some popular examples so you can give your brand exactly w
指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン
「Stylify Me」は指定したウェブサイトで使われている配色を抽出してくれるサイトです。ウェブサイトではさまざまな色が使われていますが、その色を抽出して一覧にしてくれます。「このサイトの配色を参考にしたいな」といったときに便利です。配色に加え、使われているフォントの種類も教えてくれますよ。 以下に使ってみた様子を載せておきます。まずStylify Meへアクセスしましょう。配色を知りたいウェブサイトのURLを入力して「Stylify Me」ボタンを押します。 するとこのように使われている配色の一覧が表示されます。ライフハッカーで使われている色は少なくシンプルですね。 さらに使われているフォントの一覧も作ってくれますよ。お気に入りのサイトの配色やフォント情報がまとめて手に入るので便利ですね。この結果をPDFで出力することも可能です。ぜひウェブサイトのデザインを考える際にご活用ください。
[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション
Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awesomeが使われており、アイコン、アカウント、蝶番をそれぞれspan要素で配置しています。 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a href="http://twitter.com/jonitrythall"> <span class="button"> <i class="fa fa-twitter"></i> </span> <span cl
[CSS]ごくシンプルなHTMLとCSSで実装するアニメーションがかっこいいメガメニューのデモ
最小限のシンプルなHTMLとCSSで実装する、アニメーションで表示されるメガメニューのデモを紹介します。 デモ：Mega Menuオープン時 HTML HTMLは、トリガーとなるチェックボックス、メガメニューのリスト、コンテンツ、の3つで構成されています。 デモのコードをシンプルにしてみました。 <input type="checkbox" id="nav"> <label for="nav" class="entypo-menu"></label> <nav> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> <li><a href="#">アイテム</a></li> </ul> <ul> <h2>カテゴリ</h2> <li><a href="#">アイテム</a></li> <l
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高級感のある配色やデザインを作るコツまとめ