グランジからかわいい系まで！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
Youtubeの動画を背景に
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ページを開く
CSS Box Shadow Effects - Demo
