[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
WordPressでテキストリンクをさまざまなデザインのボタンに変更するプラグイン -Button Shortcodes
WordPressのショートコード：Black Glass [button link="#" variation="black_glass" size="large"]Your Text[/button] [button link="#" variation="black_glass"]Your Text[/button] WordPressのショートコード：Hot Pink [button link="#" variation="hot_pink" size="large"]Your Text[/button] [button link="#" variation="hot_pink"]Your Text[/button] ボタンで使用している画像は下記のようになっています。 自分用にカラーやサイズを変更する時は参考にしてください。
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
[JS]入力するのが楽しくなるアニメーションを備えたフォーム -Fancy Input
フォームにテキストを入力する際、ちょっと面白いアニメーション（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」と当スクリプト・スタイルシートを外部ファイルとして記述します。
ウェブデザインで大切な縦のリズムをチェックできるブックマークレット -Gridwax
ウェブデザインの縦のリズムをチェックできるブックマークレットを紹介します。 日本語のウェブサイトでももちろん利用できます。 Gridwax Gridwaxのインストール Gridwaxの使い方 Gridwaxのインストール Gridwaxをあなたのブラウザにインストールするのは、簡単です。 サイトにアクセスし、「1. drag to your bookmark bar」にあるアイコンをブックマークバーにドラッグするだけです。
iPhoneサイトで好まれるテキストサイズは？ iPhoneサイトのユーザビリティ調査【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」のまとめ
こんにちは。今日も元気にPhotoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労しました…Photoshopの文字詰め♪ 基本的なことがほとんどなので、知ってる人にとっては当たり前のことですが、おさらいによろしければご覧ください。 それではどうぞ！ ちょっと待って文字詰めって何？ まずは文字詰めが何か分からない人の為に軽く説明しておきますね。 ワンランク上のデザインにはかかせない文字詰め 文字詰めとは読んで字のごとく、文字と文字の間を詰めてバランスをとる作業のことです。 通常文字を打っただけでは「ベタ組み」と呼ばれ、基本的に文字と文字の間が空きすぎています。それを詰めてデザインのバランスをとります。 WEBの性質上テキストデータの文字詰めは難し
twitter→ɹəʇʇɪʍʇのように英数字を180度回転して表示する方法｜Colorless Green Ideas
twitter→ɹəʇʇɪʍʇのように英数字を180度回転する際に役立つ情報を掲載。この他、TeXで文字を回転して表示する方法についても。 どうやって180度回転するか “twitter”を“ɹəʇʇɪʍʇ”に、“7-11”を“⇂⇂-L”にするように、英数字を180度回転させて面白おかしく見せるという遊びがある。これは、英数字をひっくり返した形とよく似た文字を使っている。例えば、“M”を実際にひっくり返すかわりに、これをひっくり返した形によく似ている“W”を用いるのである。 自分でひっくり返した形を見つけるのは面倒だろう。だが、簡単に180度回転ができるウェブサービスが提供されており、これを使えばすぐにひっくり返してみせることができる。また、この記事に、英数字をひっくり返した形とよく似た文字の一覧を付けたので参考にしていただければ幸いである。 なお、ひっくり返した形とよく似た文字を使うのは
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
テキストをかっこよく魅せるPhotoshopのチュートリアル集 | コリス
テキストにメタル・光沢・グランジ・立体化などのエフェクトを使用したPhotoshopのチュートリアルの紹介です。 各サイトは英語ですが、キャプチャ付きで作成方法を説明しています。 一部のサイトでは、PSDファイルをダウンロードできます。
dotdotdot – はみ出したテキストを「…」に変えてくれるjQueryプラグイン – creamu
dotdotdotは、はみ出したテキストを「…」に変えてくれるjQueryプラグインです。 日本語の2バイトでの確認は必要かもですが、簡単に実装できるようです。 dotdotdot
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事