【CSS】台形のタブ(transform)

ネットをふらふらしていたら、CSSで台形のタブみたいなのの作り方を見かけました。
こんなやつ。
タブ1タブ2タブ3
transformプロパティを使って変形してるんですが、この使い方みたいなものがちょっと分かりづらかったので少し調べました。
  1. とりあえずソース
  2. transformプロパティ
  3. 回転(rotate)
  4. 拡大、縮小(scale)
  5. 移動(translate)
  6. 傾斜(skew)
  7. ユーザーの視点距離(perspective)
  8. どういうことだったか

続きを読む(目次のリンクはこの先で有効になります)


スポンサーサイト



ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

Internet Explorer の方、ごめんなさい

すぐに確かめなかった私が悪いんですが、IEで見てくれてる人には背景色とかその他もろもろ、表示されてないですね……。

原因はCSSのカスタムプロパティです。
スタイルシートにユーザー独自のプロパティを指定できるんですが……
私の過去記事「【css】1行ごとに色を変える」でも少し説明しています。
これがまるっと理解できないんです、IEさんは。
……もう……IEめ……。

何度も書いてますが、IEは多分オワコンと言うか……ええ、オワコンなんです。
きっともうどうする気もないんです、マイクロソフトさんが(完全なる憶測)。
CSSでもjavascriptでも、対応してない機能が多過ぎるのです!
そのくせ色んな企業や公的機関のwebサービスの推奨環境がIEだったりするんです!
どうしろと!
jpegも表示されてないのがあるじゃないですか!
デコードできないってどういうことですか!

すみません、取り乱しました。
まあ、スタイルが適用されなくても内容に支障があるわけでもないので、このままいかせていただきます。
申し訳ありません。

ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

【CSS】アニメーションボーダー

左上からぐるっと囲むアニメーションをボーダーに設定してみます。 出来上がりはこんな感じ。
マウスオーバーしてみてください


html

マウスオーバーしてみてください
css

div {
	width: 300px;
	height: 50px;
	position: relative;
	--total-ms: 1200ms; /*アニメーションが完了するまでの時間*/
	--partial-ms: calc(var(--total-ms) / 4); /*線1本にかける時間*/
}
div::before, div::after {
	background-color: #000000;
	content: "";
	display: block;
	position: absolute;
	transition: all var(--partial-ms) ease;
	width: 0px;
	height: 0px;
}
.outer::before { /*左上から右へ*/
	height: 1px;
	top: -1px;
	left: 0;
	transition-delay: calc(var(--partial-ms) * 3); /*帰りのディレイ*/
}
.outer::after { /*右上から下へ*/
	width: 1px;
	top: 0;
	right: -1px;
	transition-delay: calc(var(--partial-ms) * 2); /*帰りのディレイ*/
}
.inner::before { /*右下から左へ*/
	height: 1px;
	bottom: -1px;
	right: 0;
	transition-delay: var(--partial-ms); /*帰りのディレイ*/
}
.inner::after { /*左下から上へ*/
	width: 1px;
	bottom: 0;
	left: -1px;
	transition-delay: 0ms; /*帰りのディレイ*/
}
.outer:hover::before {
	width: calc(100% + 1px);
	transition-delay: 0ms; /*行きのディレイ*/
}
.outer:hover::after {
	height: calc(100% + 1px);
	transition-delay: var(--partial-ms); /*行きのディレイ*/
}
.inner:hover::before {
	width: calc(100% + 1px);
	transition-delay: calc(var(--partial-ms) * 2); /*行きのディレイ*/
}
.inner:hover::after {
	height: calc(100% + 1px);
	transition-delay: calc(var(--partial-ms) * 3); /*行きのディレイ*/
}
「ボーダー」とは書いたけど、bofore擬似要素とafter擬似要素の幅や高さを変えることでボーダーっぽく見せています。
結構書くこと多かった。
行きと帰りでディレイ(アニメーションが開始されるまでの遅延時間)が入れ替わるから……。

ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

【CSS】グラデーションボーダーを設定する

このブログの記事タイトルとかに、だんだん消えていく下線を画像で表示してたんだけど、ブログのテンプレートカスタマイズするたびに画像も編集しなおさなきゃならないのが面倒だったの。
cssのborder-color属性の値はcssの基本データ型<color>しか使えない。
それっていうのはsRGB 色空間にある一つの色だからグラデーションは含まれない。
なんとかならないかなぁと思いながらMDNのCSSリファレンスを見ていたら、border-imageという属性が目に入った。
そうだよそうだ、なんで忘れてたんだろう。
border-image-sourceの値は<image>型。
<image>型は「<url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>」ってなってるから、グラデーションも使える。
これだー。
(スマホのブラウザの実装状況が良くないので、挙動が結構違ってきます)


  1. まずできたもの

  2. 色んなグラデーション

  3. border-image一括指定の書き方

  4. border-image-sourceの書き方

  5. border-image-sliceの書き方

  6. border-image-widthの書き方

  7. border-image-outsetの書き方

  8. border-image-repeatの書き方


続きを読む(目次のリンクはこの先で有効になります)


ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

cssで開閉式メニュー

前にもhtmlとcssだけで開閉式メニューって記事を書いたけど、それは<details>を使ったの。
ところがこの要素はIEとEdgeでは未対応(検討中らしい。なにをぐずぐずしてるんでしょうか)。
なので<details>を使わないでやってみます。

こんな感じです。

  • メニュー1
  • メニュー2
  • メニュー3
  1. checkboxを使う
  2. checkboxの当たり判定を大きくする
    1. 【横道】離れた場所にある要素を遠隔操作してみる
  3. 見た目を整える
  4. 要するにこういうコード

続きを読む(目次のリンクはこの先で有効になります)


ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
09 | 2019/10 | 11
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
リンク
カウンター
RSSリンクの表示
QRコード
QR