空の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]ボタンのクリックを楽しくする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要素で実装するだけで... 続きを読む

[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 ... 続きを読む