ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

CSS3

CSSだけで縞模様が書けるらしいけど、いまいちだった

久々にCSSのお話です。先に結果を言ってしまうとまだ実用的とは言えませんが、CSSだけで縞模様が書ける時代になっていました。 描くのに使うのは、グラデーションを繰り返し書くことができるrepeating-linear-gradientです。名前の通り、本来はグラデーショ…

CSSのグラデーションと背景画像に関する小ネタ

まずは基本から CSSでグラデーションを設定する方法ですが、たとえば背景に使いたいときは background: linear-gradient(#fff, #aaa); というふうにします。なお、上では省いていますが、実際にはベンダープレフィックスをつける必要があります。とはいって…

CSSでテキストを多段組みする

今回は見ての通りテキストを多段組みする方法のご紹介です。CSS3で新しく追加されたcolumn-countとかcolumn-width、column-gapを使います。まとめると column-count:段組みの数 column-width:段組みの幅 column-gap:段組み間の幅 となっています。column-cou…

CSSだけで5つ星評価のアレを作った

おそらく既出ネタですが、画像もJavaScriptも一切使わないであの5つ星評価のやつを実装しました。 ネタは簡単。 :checked擬似要素と+セレクタ、~セレクタを使う input:checked擬似要素は、選択されたチェックボックスやラジオボタンなどを表します。それから…

このブログのボーダーに画像を使おうと思ってやめた

このお話のまとめ 今は CSSでボーダーに画像を指定できるらしい border-image-CSS3リファレンス bit.ly/118buDK— ゆうなんとか@ふっきしたいさん (@yuu_hara) 1月 7, 2013 + 「超簡単レースの描き方」/「Formalin」の漫画 [pixiv] bit.ly/e9fP5S この発想は…

HTMLのアニメーションいろいろ

@kyubuns 今回ネタ(HTML系のなにか)が見つかったからLT枠やってみたいんだよねー— ゆうなんとか@ね む いさん (@yuu_hara) 10月 1, 2012 ということでネタというのはタイトル通りです。4つほどあるのですがここは雑記帳。超さくっと総ざらいしてみます。 1. …

首をすえたら完成です ほか

首をすえたら完成です @kazoo04 メトロノーム代わりにご使用ください。— めびうす(残骸)さん (@catina013) 9月 12, 2012 とのことだったので、 @catina013 @kazoo04 素材をいただけたらCSSとJSで実装できそうな気がするので、今夜やってみますw— ゆうなんと…

FirefoxでCSSアニメーションのキーフレームを設定するとき、名前をクォーテーションマークでかこうとうまくいかない

この前うまく動かなかった原因はこれでした。 CSS animations | MDN このサイトのサンプルコードを見て気がつき、修正したところFirefoxでもうまく動いてくれました。 それからベンダープレフィックスをWebkit系とFirefox以外の分も追加しています。OperaとI…

もう少し汎用性のあるモノにしませんか? ほか

もう少し汎用性のあるモノにしませんか? 昨日の続きです。 とりあえず動くものを!と思って作ったので、私が知る限りChromeでしか動かないっぽいことがわかりました。っていうかChrome以外でまともに動きませんでした。 Androidの標準ブラウザ→SVGのレンダ…