空のdiv要素について - uhyo/blog

2021/09/06 71 users span uhyo 妥当 div要素 観点

昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskdこの記事は空のdiv要素やspan要素が妥当かどうかという疑問にHTML仕様の観点から考察を加える大変面白い記事です。記事の結論として... 続きを読む

[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type | コリス

2013/10/28 223 users パタ コリス エフェクト スゴイ CSS

画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 実際の動作は、下記ページで確認できます。 Opening type 面白そうなので、日本語でも試してみました。 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイト... 続きを読む

[CSS]ちょっと面白いMedia Queriesの使い方 -表示サイズで異なるメッセージを表示するテクニック | コリス

2012/03/18 39 users コリス Row CSS div span

実装 「BE なんとか」のメッセージは、「BE」だけ固定で、「なんとか」はMedia Queriesと擬似要素を使用して配置しています。 HTML h2要素をdiv要素で内包したシンプルな実装です。 <div class="row"> <h2>Be <span></span></h2> </div> 空のspan要素はCSSでコンテンツをレンダリングするために使用します。 CSS Media Qu... 続きを読む

[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ | コリス

2011/11/10 363 users ポパー コリス img要素 CSS アニメーション

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装し... 続きを読む

[JS]text-shadowをアニメーションでコントロールするスクリプト -animate-textshadow.js | コリス

2011/06/06 55 users text-shadow jQuery コリス シャドウ デモ

テキストにシャドウをつけるtext-shadowをアニメーションでコントロールして、さまざま面白いエフェクトを生み出すjQueryのプラグインを紹介します。 デモではさまざまなtext-shadowのアニメーションを楽しめます。 以下、デモを紹介しつつ、その実装方法もご紹介。 デモ：基本 一番シンプルな基本となるデモです。 HTML HTMLはすべてのデモで、テキストをspan要素で実装するだけで... 続きを読む

続・iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker

2011/06/03 33 users iOS Demo font-size iPhone 隙間

前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。 どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。 「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。 Demo これiPhoneで見るとこうなる。 なんかIEでもfont-sizeが... 続きを読む

[CSS]要素をボタン風にスタイリングするスタイルシートのテクニック集 | コリス

2009/05/27 248 users コリス Speckyboy button要素 CSS 要素

Speckyboyのエントリーから、button要素やspan要素などをボタン風にスタイリングするスタイルシートをいくつか紹介します。 22 CSS Button Styling Tutorials and Techniques submit button should look same everywhere How to make sexy buttons with CSS Sexy CSS ... 続きを読む