Text Effects With CSS (and A Little Contenteditable Trick) | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
CSS3でのアニメーションボタン＆テキストエフェクト「Space CaCSS」＆「CSS3 Tilt-Shift Text experiment」｜BLACKFLAG
CSS3でのアニメーションやエフェクトなど、 サンプル＆チュートリアルはいろいろ増えていますが、 ロールオーバーで他とは違ったおもしろい動きをつけている CSS3アニメーションサンプルを２つほど紹介。 Space CaCSS – Animated CSS3 background patterns ≫Space CaCSS – Animated CSS3 background patterns 画面上のドット柄が付いているボタンにロールオーバーすると ボタンが拡大し、ボタンについている柄が ランダムなアニメーションで動きます。 見ていると酔いそうなくらい激しい動きをしますが おもしろい演出方法に感じます。 CSS3 Tilt-Shift Text experiment – Where are the trees ≫CSS3 Tilt-Shift Text experiment – Where
テキストがはみ出た時に「…」を表示するCSS | uni-memo
「text-overflow:ellipsis; 」とか使う。 css3 はみ出たのは隠しちゃう！っていうcssも入れる 改行無効もいれる white-space:nowrap; //テキスト改行無効 overflow:hidden; //width幅からはみ出た要素を隠す width:320px; -webkit-text-overflow: ellipsis; // Safariで省略... -o-text-overflow: ellipsis; // Operaで省略... text-overflow: ellipsis; // IEで省略... http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow
The New Lens Flare · David DeSandro
White hot glowing text is the new lens flare By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo. Here’s how it was pulled off: #content h2 e
CSSで影付きテキストにマウスオーバーでスポットライトを当てるサンプル:phpspot開発日誌
text shadow bow CSSで影付きテキストにマウスオーバーでスポットライトを当てるサンプルが公開されています。 Safari, Firefox 3.5, Opera, Chromeでしか動きませんが、Flashを使わずに、CSSとJavaScript で実現されているのが面白い。 マウス移動でスポットライトが移動。 Text Shadow 部分が画像でなくて以下のようなタグで表現されているのも面白いところです。 <div class="wall"> <p id="tsb-text">Text Shadow</p> <div></div> </div> 関連エントリ 便利なＣＳＳテクニック３０選 CSSとdivを使った画像先読みテクニック 本の目次部分のようなリストをCSSでデザインするテクニック
Typetester Compare fonts for the screen
Design Beautiful Typography One of the most popular applications for web designers is now a full-blown typography editor. Typetester classic that is known and loved by all is still online! Test and compare more than 2800 web fonts. The new Typetester is a WYSIWYG web typography editor. Create, export and share unlimited projects.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cmmntr.com