CSS

背景画像やグラデーションを簡単に文字でマスクできる

コメントをどうぞ

とあるサイトをみて初めて知りました。

利用するCSSは

・-webkit-background-clip:text; // これ設定しないとただ単に背景に画像やグラデがはいるだけ。
・-webkit-text-fill-color:transparent; //枠線も透明にしちゃう
・display :inline-block; // blockのままだと全体幅をみちゃう？

 

まみむめもまみむめもまみむめも

15 views 20 views 274 views
atom

AtomでEJSファイルをいじっているときにEmmetが.hogeをclassName=”hoge”にしやがる

コメントをどうぞ

ある日から急に.hogeを変換するとclassName=”hoge”となるようになってしまった。

なんかのプラグインのせいなのかと停止してみたりしたけどよくわからず。

なので以下を参考にsnipets.jsonをいじる
https://github.com/emmetio/emmet-atom/issues/459

"jsx": {
    "filters": "ejs",
    "extends": "html",
    "profile": "xml"
}

こうしたらなおった

423 views 286 views
CSS, html, JS

結局使うことになるImagemap

コメントをどうぞ

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

388 views 374 views
JS

colorboxでmodalが開くときに画面幅より一度大きい状態からフィットする現象

コメントをどうぞ

サイトのつくりの影響かもしれないが、画面を大幅に超える大きさで表示された後にぴったりとアニメーションで調整される現象がおこった。

 $(".inline").colorbox({
inline:true,
width:"90%",
maxWidth:1020,
rel:'group',
closeButton:false
});

スマホのときは画面幅の90％でPCなどの時は1020くらいを最大にしてよっていう書き方、

色々微調整してもうまくいかなかったので、以下のように逃げました。

$(".inline").colorbox({
inline:true,
maxWidth:"90%",
rel:'group',
closeButton:false
});

.modal-content {
  max-width: 1020px;
}

とりあえずこれで回避。
原因はなんだったのだろうか。

354 views 764 views
windows10

2560 x 1440のモニタを買ったけどたまに1920で表示されるときがある。windows10

コメントをどうぞ

windowsのダメなところなのか、なんなのか。
起動するとせっかくの2.5kモニタが今までの2kとしてボヤっとして表示される。

再起動で直ってたからいいかなーと思ってたが今日からそれでも直らず。

https://support.microsoft.com/ja-jp/help/182595/unable-to-select-a-higher-screen-area-in-display-properties
公式のリンクを参考にしようにも

[スタート] ボタンをクリックし、[設定] をポイントして、[コントロール パネル] をクリックします。次に、[画面] をダブルクリックします。

まず、これがない。

のでどうしようか悩んでいたのだが自分の環境だけかもしれないけど、nbiviaのコンパネにはいってディスプレイ＞解像度の変更　で最大解像度を選べば平気ぽい

 

374 views

うえぶでざいなー