[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 <p>塩レモン</p> CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 p{ padding:1em; background: linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px, linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px; background-color: #4885ff; background-position: left bottom !important; b
「へぇー」と言ってしまうかもしれない、css3の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ。 子供の出産予定日を過ぎているので、毎日お腹に応援歌を歌ってるADの野田です。 前回書かせていただきましたデザイナー募集の記事では、 一切笑いのない記事となり大変申し訳ございませんでした。 してやったりだったので、ドSな僕としてはちょっと快感でした。 今回、cssを使っていて私自身が「へぇー」となったものを記憶をたどってご紹介させていただきます。 常に、新しい技術等をチェックしているつもりですが、 日々の業務との葛藤で、つい情報を見逃してしまうこともございます。 そんな方は、今回の記事を見て「へぇー」っと、なっていただけると嬉しいです。 知らなくても恥ではないので、これを期に使ってみましょう。 なお、今回は単純に「こんなの出来るんだ」ということを知ってほしいだけなので、 対応のブラウザやバージョンは記載していません。 ご了承ください。 文字は透過せず、背景のみを透過する これは
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
