スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 デモページのアニメーション 通常時は細めのヘッダとコンテンツがあるだけで、ヘッダをホバーすると、非表示だったナビゲーションがアニメーションでスライドして表示されます。 デモのようなナビゲーションだけでなく、他のコンテンツを設置することももちろん可能です。 実装 Step 1: HTML ヘッダ部分は最初に表示されている要素、非表示の要素の2つが配置されています。 <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a> <div id="tophiddenbar"> Other Links: <a href="http://designshack.net/cate
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
inline-blockを使ってシンプルなグリッドで、ふわりと浮かんだ感じの美しいシャドウを適用して画像を配置するギャラリー用のスタイルシートを紹介します。 Gallery -Inline Block Grid 実装 Step 1: HTML HTMLはシンプルでimg要素をdiv要素で内包するだけです。 .galleryのdiv要素は、ギャラリーとして画像を配置するためのものです。 <div class="gallery"> <div class="panel"><img src="image.jpg" alt="" /></div> <div class="panel"><img src="image.jpg" alt="" /></div> </div> Step 2: CSS まずは、画像にシャドウを適用するスタイルシートです。 画像のimg要素と白いパネルの.panelにbox-
※2018/03のはてブの大リニューアル対応 ◆Git Source:https://github.com/ovoncovon/hatena-user-css/ ◆ https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css.css ◆Firefox用 https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css_ffx.css TOPページ ENTRYページ 履歴 2018/11/06 フォントなど微調整 2018/05/19 2018/03のリニューアル対応 2017/08/30 エントリーページの微調整 2017/08/23 エントリーページのリニューアル対応 2015/10/21 「
CSS演出小ネタ連投です。 【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。 transformで拡大と回転 言葉で説明するのはとっても難しい（けどやってることは全然難しくない）のでさっそくサンプルをご覧下さい。 HTML <p> <span>Shop</span> <a href="#">More info</a> </p> 【p】のなかに【span】と【a】が並んで内包されています。通常時は【span】のみ表示させておいてhoverで【a】を浮き上がらせてこよう、という構想。 p,span,a{ display:block; position:absolute; width:100px; height:100px; border-radius:50%; font-size:16px; text-align:cen
画像を使わずCSSだけでボタンを表現するのが最近の流行りですね。影やグラデーションなども設定できるので便利です。CSSを自分で書くのは面倒という方は「CSS Button Generator」を使うとはかどりますよ。 以下に使ってみた様子を載せておきます。まずCSS Button Generatorへアクセスしましょう。 プレビューは最上部に表示されますよ。まずカラーセットを選んで、グラデーションを調整しましょう。その後横幅や縦幅などのサイズ調整、影をカスタマイズしたりしてお好みのボタンを作りましょう。最下部にCSSのコードが表示されるのであとはコピペして完了ですね。CSSでボタンを作りたいときはぜひ活用してみましょう。 CSS Button Generator （カメきち）
タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック状態でコンテンツを表示・非表示します。 デモと共に、「:checked」擬似要素の使い方を紹介します。 モーダル ボタンをラジオボタンにし、そのチェック状態でモーダルを表示・非表示します。 HTML <-- Button to trigger modal --> <label for="modal1" role="button" class="btn">Launch demo modal</lab
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
