読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

transform:rotate() を使うと CSS だけでテキストにアンチエイリアスがかけられる

MS P ゴシックなどの ClearType でないフォントが使われてしまう場合に、CSS だけでテキストのジャギーを抑えてアンチエイリアスをかける方法があった。 CSS で、transform:rotate(0.001deg); を指定することでハードウェア・アクセラレーションを有効にし、…

img 要素に pointer-events:none; を指定すると、その画像を囲むリンクが効かなくなる件の回避方法

経緯 画像をむやみに右クリックで保存されないようにするため、img 要素に pointer-events:none; を指定した。 この CSS プロパティは、クリックや右クリックによるイベントを発火させなくするプロパティで、CSS の指定なのに JavaScript のイベント伝播にま…

CSS3 の gradient とか flex とかを使って凝ったデザインを作ってみた

アーケードゲーム用エミュレータとして知られる「MAME」のサイトのヘッダ部分の画像がカッコよかったので、CSS だけでどこまで再現できるか試してみた。 MAME Multiple Arcade Machine Emulator 結果は以下。 CodePen で公開しているので、CodePen 上で広げ…

CSS だけでフキダシを作る

スラスラわかるCSSデザインのきほん作者: 狩野祐東出版社/メーカー: SBクリエイティブ発売日: 2014/09/26メディア: 単行本この商品を含むブログを見る 昔は可変長な角丸ボックスを作るだけでも、どうやって四隅に画像を置こうか、とか、画像を分けちゃうとリ…

textarea 要素内の placeholder 属性で改行するには

前回の記事で placeholder 属性というものを紹介した。 neos21.hatenablog.com placeholder 属性は1行テキストボックスだけでなく、テキストエリアにも使える。そして、テキストエリアでも使えるということは、プレースホルダの文言も改行できるのではないか…

懐かしの marquee 要素を CSS3 で再現する

あの頃よく使っていた懐かしの HTML タグを思い出す企画。 第1弾は marquee 要素。 marquee 要素って? テキストを電光掲示板のようにスクロール表示させる要素。元々は IE が独自に導入したで、IE4 あたりから使えていたので、90年代のインターネットを彩る…

CSS3 のグラデーション背景をホバー時にアニメーションさせる簡単な方法

CSS の linear-gradient は transition で変化させることができないようで、困った挙句こんなやり方を発見。 グラデーションのかかった背景をCSSでふわっと変える方法 | web codery 以下、ロゴタイトル風に実装してみた。これは Neo's GitHub Pages のタイト…

幅・高さが不明な要素を上下左右中央配置する

昨日の記事の発展版。 neos21.hatenablog.com といっても特殊なことは全然なくて、やはり引き続き transform:translate を使う。 See the Pen 幅・高さが不明な要素を上下左右中央配置する by Neos21 (@Neos21) on CodePen. top:50% の他に left:50% も入れ…

高さが不明な要素を上下中央配置する

CSS で高さが分からない要素を上下中央揃えする方法。 今回は .wrapper というボックスが height:100% で1ページ分の画面の高さいっぱいに広がっていて、その中に .box というボックスがあるレイアウトで考える。よくポートフォリオ系のシングルページのサイ…

リンクホバーやメディアクエリでの簡単アニメーション

リンクホバー時に文字色をゆったり変化させたり、メディアクエリで画面幅に応じてレイアウトを変更させたりする時に、簡単にアニメーションする方法。 CSS で transition プロパティを使って変化するスピードを指定し、あとは :hover や Media Queries を指…

IE11 でページ読み込み時に Media Queries と transition を併用した要素がアニメーションしてしまう

メディアクエリを使って、幅○○px以下はメニューの形を変える、みたいなスタイルを書いておいて、その要素に transition を振っておくと、ウィンドウをリサイズした時にアニメーションしながら要素のスタイルを変更させることができる。 分かりやすくするとこ…

リンクホバー時に下線を引かせる CSS アニメーション

リンク文字列にマウスをホバーさせると、下線が左から右にニョキ~っとアニメーションで出てくる CSS アニメーションのサンプル。使っているのは CSS のみ。 See the Pen adRXEV by Neos21 (@Neos21) on CodePen. ソースは上記 CodePen よりご覧ください。 t…