web の小ネタ

Bootstrap 3 でキリトリセンを作る (画像:1枚)

glyphicon のハサミを使った「切り取り線」。 ポイントは、ハサミをちょっと回転させて、背景色をつけること。 閑話休題ないし Cut the C**p といった用途に適しているかも知れない。 表示例 テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキスト・テスト・テキ…

Bootstrap 3 でカードを作る (画像:1枚)

Bootstrap 4b のカードを真似てみるテスト alert-danger well

色名だけのカラーパレット (画像:1枚)

background-color:whitesmoke;color:darkgraybackground-color:snow;color:rosybrownbackground-color:mistyrose;color:lightpinkbackground-color:seashell;color:rosybrownbackground-color:linen;color:rosybrownbackground-color:antiquewhite;color:burlywoodbackground-color:blanchedalmond;color:lightsalmonbackg…

colspan と rowspan のできる・できない

table タグの colspan と rowspan における交差できるものとできないものの一例。 ソース下では配下を改行としたが、テーブル上は斟酌しない。 であれば徒に削除するより、何ら属性を補った上で、何ら要素を上重ねるべき? できる …

Screenshot.jpg

Opera 12 で発生する img-fluid がレスポンシブにならない問題 (画像:1枚)

問題 display:flex の中では max-width:100%; が適用されず、width:100%; ならレスポンシブになるが小さい画像まで拡大表示されるため根本解決ではない。 解決 親要素に min-width: 0; を追加する。 参考リンクと参考画像

ジャンボトロンの背景色をグラデにしてアニメにする

@keyframes の background に linear-gradient が使えなかったので、.jumbotron を2つ作って重ねて上を透明にしたらできました。