[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック
Simple yet amazing CSS3 border transition effects デモ 実装 デモ デモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。 デモは大きく分けて、3種類です。 デモ下段 最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。 実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。 かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base
【レビュー】CSSでつくる透明なボーダーライン | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. Transparent Borders with background-clip - CSS-Tricksにおいて、CSSを使って透明なボーダーラインを描画する方法が紹介されている。透過になりそうだが透過にならない記述の説明、それを回避するためのダブルdivテクニック、さらにCSS3で導入されるbackground-clipを使った方法の3つのCSSが紹介されている。簡単に透過ボーダーを実現する方法として参考になる。紹介されているテクニックは次のとおり。 1. ボーダーに透過を指定する ボーダーに透過を指定した場合 - divの背景に対する透過になっており、divの下までは透過しない まず最初に考えつく方法が、ボーダーに対して透過の指定をすること。たとえば背景に白を指定して、ボーダーに「bord
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
borderプロパティを使用した華麗なる四つのエフェクト | コリス
border-width を取得／設定するときに気をつけること
