cyber_snufkinのブックマーク - はてなブックマーク

CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム｜ Tips Note by TAM
中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムをリキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() で相対値と絶対値をかけあわせたサイズを設定するので画面幅がかわっても、片側は中央揃えのカラムとツラをあわせたまま（端をそろえたまま）もう片側は画面端までのびたサイズをキープできます。 ※IEはpaddingの仕様に落とし穴があったので、最終的にはIEバグ対策のJavaScriptも併用しています。 INDEX よくある中央揃えのレスポンシブなカラムアシンメトリーなカラムまとめサンプルソースとりあえず実物から見てみたい方は、CodePenのサンプルソースからどうぞ！ See the Pen Asymmetry Column by webdev (@webdev-j
cyber_snufkin 2022/09/06
css
リンク
Tips Note by TAM ｜ TAM のテクニカルチームがお届けする WEB技術ブログ！
コーディングスタイルに一貫性をもたせことは重要であると広く認識されています。プロジェクト全体でEnumの使用を禁止する関数内でのthisを禁止するインデントにはスペースを使うセミコロンは必要でない場合省略する上…
cyber_snufkin 2019/10/28
あとで読む

技術

web

tips
リンク
CSSやJavaScriptで画像の保存を防止する方法4種類｜ Tips Note by TAM
画像の保存を完全に防ぐことはできませんが、右クリックなどから画像を保存されにくくする実装方法を4種類試してみましたのでご紹介します。 ■目次画像の上に要素をかぶせる pointer-eventsを使う -webkit-touch-calloutとuser-selectを使う contextmenuとdragstartを使う 1. 画像の上に要素をかぶせる画像の上に要素をかぶせて、画像をクリックできないようにする方法です。 See the Pen img-protect01 by tam_yi (@tam_yi) on CodePen. .img-protectの疑似要素を画像と同じ大きさにして、画像の上にかぶせるようにしています。 <div class="img-protect"> <img src="http://via.placeholder.com/160x120" class=
cyber_snufkin 2018/05/18
javascript

WebKit

画像

css

tips
リンク
SVGでリアルな湯気を作ってみる｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。それが『湯気』です。イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える『SVGで作るリアルな湯気』を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書くまずはSVGで湯気の形を自由に書いてみてください。難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動すよりリアルな動きに見せるため、SVGで書いた湯気を動かします。ここも動き
cyber_snufkin 2018/01/23
SVG

JavaScript

あとで読む
リンク
1