想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
Scroll-driven Animations
# Introduction Scroll-driven animations are a common UX pattern on the web. These are animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. A similar type of s
XHTML & CSS Lightbox
A valid XHTML & CSS Lightbox (no JavaScript) by Jenna Smith / Opera fix by Tobias Wiersch Click any of the links below to see it in action Lorem ipsum dolor sit amet, consectetur about us adipiscing elit. Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condi
ブログ記事でHTML/CSS/Javascriptなどのソースコードを綺麗に表示したい ～ dpSyntaxHighlighter
ブログやホームページの記事の中でソースコード紹介する場合、コードをカラフルに読みやすく表示してくれるスクリプト”dpSyntaxHighlighter”があることを知り、遅ればせながら導入してみました。 これまでは、自分でタグに色をつけたりして見栄えをよくしていたのですが、このスクリプトを使えば、自動でタグを抽出してカラフルに表示してくれます。また自動で行番号もつけることができるのでわかり易くなります。さらにソース部分を印刷することができる「print」のリンクもあります。 ※ブラウザの設定でJavascrptの使用を禁止している場合はテキストエリアに表示されます。 ”dpSyntaxHighlighter”はこちらよりダウンロードできます。 コアとなるスクリプトと、目的のソースコードの言語に対応したスクリプトを組み合わせて使います。 このブログでは、専ら(X)HTML、CSS、Javas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールバーを常に表示させる方法 - Neo's World