横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
モリサワ TypeSquareはけっこうおもしろいかもよ - ちくちく日記
JAGATのテキスト&グラフィックス研究会セミナー「Web電子出版システムとクラウドフォント・組版編集ソフトウェア」を受けてきました。 先日あったpage2012での注目製品を紹介ということで、モリサワのクラウドフォントサービスTypeSquareと編集ソフトMC-Smart 1、CrossDesign社のコンテンツ管理クラウドサービスLEPUSが紹介されてました。 ■TypeSquare すでにあちこちで話題になっているTypeSquareはモリサワのフォントがWeb表示につかえますという、フォントサービス。 モリサワのフォントがWeb表示につかるとなにかいい事があるのかというと…まぁテキスト検索がそのまま扱えるとか、テキスト変更するのにいちいち画像を作らなくてもいいとかそういう辺り。 技術的にはCSS3からこの機能は使えるようになった。なのでCSS3に対応した最新ブラウザでないとこの機
ミニマリズムなウェブデザインから学ぶ、5つの機能的な特徴
ミニマリズムなウェブデザインからユーザーが本当に必要とする機能を学び、散らかったウェブデザインから卒業する方法を紹介します。 Top Minimalist Website Designs: Trends and Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストベースのナビゲーション グリッド カラーの効果的な使い方 より多くの画像、より少ないテキスト ハイパーミニマリスト テキストベースのナビゲーション 画像のロールオーバーを持っていないテキストベースのナビゲーションです。これはユーザーを案内するのに多くを語る必要のないシンプルなテキストメッセージとも言えます。 単に水平に並べただけのものはクラッシクで、最近のサイトではその配置に工夫があります。
テキストをおしゃれにアニメーションしながら切り替えられるjQueryプラグイン「jLetter」:phpspot開発日誌
jQuery text rotator plugin - jLetter テキストをおしゃれにアニメーションしながら切り替えられるjQueryプラグイン「jLetter」。 単純にテキストを切り替えるだけでなく、一文字ずつ散らばるようにおしゃれにアニメーションさせながら切り替えられます。 実装も超簡単で、次のようなマークアップを記述。 $('#demo').jLetter(options) で実装できちゃいます。 なかなか面白いプラグインですね 関連エントリ 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 jQueryとCSS3でGoogle＋風のアニメーション実装チュートリアル バックグラウンドを奇妙にアニメーションさせるjQueryプラグイン
CSSのテキストシャドウをカンタンにかけられる「Css Text Shadow」
以前にブロック要素にCSSのドロップシャドウを付けるサービスをご紹介しましたが、CSSを使った高度なテクニックをカンタンにおこなえるオンラインサービスが増えていますよね。 今回は、テキストにシャドウなどのクールなエフェクトをCSSでかけられるサービスのご紹介です。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! CSSのテキストシャドウを作れる「Css Text Shadow」 「Css Text Shadow」は、テキストにドロップシャドウやネオン、炎などのエフェクトをかけるCSSを、プレビューで見ながら作成できるオンラインツール。 エフェクトは全部で１２種類。ログイン不要で、必要なときに手軽に使えるようになっています。 炎のエフェクトのサンプル このように、テキストへエフェクトをかけることがで
Web製作者やブロガーならブックマーク必須な個人商用フリーな5つの画像サービス * 男子ハック
@JUNP_Nです。ブログを書いている時なんかにテキストばっかりじゃ記事が見にくい、何か画像を入れたいなってことがよくあります。そんな時に個人商用問わずフリーに利用できる画像サービスを5つ紹介します。 テキストだけじゃ見にくいので適度に画像を使ってアクセントテキストばかりの記事だと読みにくい。（逆にテキストだけのほうがいいって場合もあるかもしれませんが）。見に来てくれた人が「読みやすい」と感じてもらうためのふ画像も適度に使ったほうがいいだろうし、場合によってはスクリーンキャプチャを使うこともあるでしょう。 僕の場合はテキストだけで記事を書くことができていしまう場合でも、適度に画像を使ったり、上記のように見たらすぐわかる説明のような画像を作ることもしばしば。 基本的にはキャプチャを撮ったり、画像を作ったりしていますが、それ以外にアクセントというかイメージとして画像を使いたい時には画像サービス
[CSS]テキストに面白いエフェクトを与えたデモと実装の注意点
Fun With Blurred Text デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストにブラー効果を与える方法と注意点 テキストにブラー効果を与えたデモ テキストにブラー効果を与える方法と注意点 テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。 .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } しかし、このままでは危険です。colorには対応していて、text-shadowには対応していないブラウザでは、何も見えない状態になってしまいます。 これを解決するには、「modernizr」を使用して、対応ブラウザかどうか確認して適用します。 .textshadow .blurry-t
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://n1kumeet5.com/2011/08/macapp/