はてなブックマーク

そろそろ「またCSSネタかよ！」っていうツッコミが入りそうですが、今日も懲りずに新しく仕入れたテクニックを紹介します。今回は割と実用的です（重要） まずはサンプルを そもそもジグザグな枠線（境界線）とはなんぞや？って人もいるかと思うので、とりあえずサンプルをご覧ください。 See the Pen ZigZag by Kuzlog (@Kuzlog) on CodePen. こういうギザギザした境界線って結構見ますよね？この程度なら、わざわざ画像を用意しなくてもCSSだけで再現可能です。 HTMLもこれだけ。シンプル！

マウスを乗せるとアンダーラインがヌルっと出てくるリンクテキストを最近良く見るので、使用率が高そうな2パターンを作ってみました。

すごく今更感がありますが、CSS3のtext-shadowを使ったテキスト装飾のサンプルを12個作ってみました。 多分ほとんどのコードがコピペでそのまま使えるので、使いたい人はご自由にどうぞ。色とかは各自のWebサイトに合わせてね！

前々から「CSSだけでお洒落なモーダルウィンドウ作れないかな～」と思って色々と試していたんですが、ようやく納得のいく出来の物が完成したので載せておきます。 PureCSS ModalWindow 仕組みは後で解説するとして、とりあえず作ったサンプルを5つ紹介します。 一応、画面外をクリックしてウィンドウを閉じる機能にも対応していますし、ピュアCSSのモーダルウィンドウにしては珍しい閉じる際のアニメーションも実現できました。 通常パターン See the Pen PureCSS ModalWindow (Normal) by Kuzlog (@Kuzlog) on CodePen. 上から See the Pen PureCSS ModalWindow (Top) by Kuzlog (@Kuzlog) on CodePen. 拡大 See the Pen PureCSS ModalWind

このように、filter:drop-shadow()はPNG画像の透過部分を無視して、透過されていない部分を基準に影を落とします。CSSだけでこんなことが出来るなんて、全く知らんかった… 他にも、borderで作った三角形に影を付けたりも出来ます。 See the Pen bs & ds by Kuzlog (@Kuzlog) on CodePen. transparent部分が無視されて、しっかり三角形の影が出来ていますね。最高かよ。 drop-shadowの弱点 box-shadowと違い、広がり距離とinset(内側の影)は指定できません。どっちもたまーに使うから、これはちょっと残念ですね… 対応ブラウザ うん、まぁ、IE10まではどうせ対応してないだろうとは思ってたけど、IE11もダメっすか。早くIE死滅しねぇかな。 使い方を知るとちょっとテンションの上がるfilter:drop-

最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね（うちのブログもだけど） そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン（上に画像・下にタイトル）を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。 そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ﾇﾙﾘ。

Leo(@Akamaru12mg)はPureCSSでワケの分からないものを作るのが大好きなフレンズなので、けものフレンズのタイトルロゴをCSSのみで作ってみました。 ちなみに制作時間は約6時間！貴重な休日が潰れちゃったね！しにたーい！ 参考にしたのはけもフレ公式サイトのこれ↓ この画像を参考にしながらpositionで無理矢理レイアウトを組み立てました。見ての通り、「の」と「ズ」の部分は鬼畜です。CSSって丸っこい形は作りにくいんだよね… 「まぁ、どうにかなるっしょ」と甘い考えで作り始めた結果が、6時間という制作時間です。諦めなかった自分を褒めてあげたい。そして皆に「すっごーい！」って言ってほしい。 Kemono Friends Title Logo 完成品がこちらです。 See the Pen LxKNPm by Kuzlog (@Kuzlog) on CodePen. 最初は「綺麗なコ

主に話題の区切りで使われる<hr />ですが、デフォルトの状態だとただ線が引かれるだけで味気ないので、CSSを使って斜めストライプに装飾してみました。 Pure CSS Stripe Border で、作ったものがこんな感じです。シンプルだけどお洒落でしょ？ See the Pen hr Stripe by Kuzlog (@Kuzlog) on CodePen. CSSのコード量は割と少なめ。

表示結果 Dummy Text 解説 display: flex;(CSS:4行目) p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。 align-items: center;(CSS:5行目) flexアイテム（p要素内のテキストと、before,afterで生成された疑似要素）を上下中央に配置。 flex-grow: 1;(CSS:9行目) 左右の疑似要素（ボーダー）の幅を、空いているスペースいっぱいまで広げています。 height,background(CSS:10,11行目) heightでボーダーの太さを、backgroundで色を指定しています。 display: block;(CSS:12行目) 疑似要素は、displayプロパティにblockやinlineを指定しないとIEで表示されません。 margin-○○: .4em;(CSS:15

2カラムレイアウトといえばfloatを使うイメージが強いですが、CSS3のFlexboxを使う方法もあります。 今回はFlexプロパティを使った2カラムレイアウトの作り方を紹介します。

「左右」の中央寄せは頻繁に使いますが、「上下」や「上下左右」の中央寄せとなると一瞬戸惑う…という人は結構いるんじゃないでしょうか？ 今回はテキストやブロック要素など、様々なコンテンツを中央寄せするテクニックを紹介します。 最初に書いておきますが、この記事はdisplay:flexを使った中央寄せのテクニックがメインです。なので、Flexboxがよく分からない！という方はこちらの記事を軽く読んでおいたほうが幸せになれます。