html、css｜ぼうびろく

19 April

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

15 September

簡単ポップアップ

https://sdesignlabo.com/web/popupmenu/
【JS不要、コピペで1分】CSSだけで作るポップアップメニュー

ありがたいコード

PR

22 August

clip-path　ジェネレーター
https://bennettfeely.com/clippy/
今まで疑似要素とoverflow:hiddenを組み合わせたりしてたけど、位置調整とかタゲると見えてない位置のオブジェクトとか気になっていた
コレならきれいにできる。
IEもすでに対応するのやめたから使っていこうと思う

clip-pathを利用してテキストをアニメーションで表示する方法
https://digipress.info/tech/revealing-text-by-clip-path/

テキストのマスクアニメーション
なんかよくあるよね。カッコイイみたいなかんじでこれやってくれみたいな
なんか長方形の物体が文字の上を滑ってるみたいなやつとか
Animationがくそめんどくて仕方なかったんだが、
clip-pathならすごくいいかんじにできそう！まだやったことないが
IEいらねーならもう技術をいっぱい簡単にできていいよね
洗濯機が有るのにいつまで洗濯板使えばいいのっていうのがIEだから

19 December

スマホでスクロールバーを表示させる

https://www.tsukimi.net/css_scrollbar.html

class名とyかxか変える
あとはcss設定

.scroll{overflow-y:scroll;}

.scroll::-webkit-scrollbar{height:10px;}/*バーの太さ*/

.scroll::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/

.scroll::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/

スマホは自動的にスクロールバーが非表示にされる
そのためスマホのためにわざわざやる
ほんとうるせーなコンサルはよー

22 August

文字を縦書きにしたい

-ms-writing-mode: tb-rl; /* for IE */

writing-mode: vertical-rl;

IE11はプレフィックスをつけないと効かない
まじしねよ

15 May

IE11　transform　animation　ガタつく

background-size:cover　の背景画像をanimationで拡大
IE11のみガタガタぶるぶるする

transform:matrixで拡大してたんだが、何やっても治んないのでイライラしてscaleにしたら同じ動きだったのでscaleにした

【css3】IE11で transform :scale()などのアニメーションがカクつく時の対処法
https://sakatamemo.info/css/419/
↑とてつもないありがたいコード
animation keyframe内の拡大後の100%のtransformに rotate(0.1deg);を追加したら出来た！！！
100%{
transform: scale(1.5) rotate(0.1deg);　効果あり！！！！！
}

背景指定しているdivに
will-change: transform;　効果なし

transform: rotate(0.0001deg);　効果なし

transform: translate3d(0,0,0);　効果なし
backface-visibility:hidden;　効果なし

hoverとかのときは上の指定で上手くいったことも何度かあったため、
今回はanimationなので、keyframe内で一緒にちょびrotateを指定しないといけなかったっぽいのか？
ん、ていうかhoverのときはtransitionだからhover対象で微調整rotateとかつけるよな…
そうするとkeyframe内にrotateをつけるのは順当なのか…

どちらにせよもうIEまじしねよほんと