グランジからかわいい系まで！CSS3でステッチ（縫い目）を表現する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はボタンなどのあしらいに便利な小ネタをご紹介します。 上記画像のような、糸で縫いつけたようなあしらいをCSS３だけで実装できちゃうんです。 HTML <body> <h2>outlineでステッチ</h2> <p class="s1">LIFE IS GOOD <h2>outlineでステッチ+box-shadowで更に外枠</h2> <p class="s2">LIFE IS GOOD <h2>borderでステッチ+box-shadowで外枠</h2> <p class="s3">LIFE IS GOOD <h2>角丸</h2> <p class="s4">LIFE IS GOOD <h2>変形</h2> <p class="s5">LIFE IS GOOD <p></body> body { background: #ccc; } h2 { text-align:center;
CSS３で角丸写真にシャドーを付ける方法
HTML5でしたら、divを使う機会は劇的に減るでしょう。 画像の加工の必要はありません。 display:hiddenの必要もありません。 ★置換インライン要素であるimgをblockに変更するだけです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <section class="photo"> <h2> <p> 画像を角丸で置いてみる。 </p> <figure><img src="" width="" height="" alt=""></figure> <p> スタイルシートは下記のようになります。 </p> <pre></pre> </section> のHTMLとすると・・・・ ★タブは＿に置換してあります。 <!doctype html> <head> ＿<meta charset="utf-8"> ＿<titl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
CSS Box Shadow Effects - Demo
