CSS – ページ 2 – WebTecNote

[CSS3] Androidのmask-imageに関する不具合について

2013/01/282013/01/09 by

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなるというデモでした。
でもよく調べてみたらそれだけじゃなかったんです。

モバイル端末のブラウザ画面サイズとMedia Queries

2013/01/082013/01/07 by

Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。

20日目 : CSS Programming Advent Calendar 2012

2012/12/202012/12/20 by

CSS Programming Advent Calendar 2012の20日目
2週間ちょっとぶりにTenderfeelがお送りいたします。

さてみなさん。
ここにイラレのライブラリから適当に作ったリボンのデザインがあります。

リボンの例

(デ・∀・)　「このリボンは背景色と線色を変えられるようにしたいんだよね。できれば影も」

デザイナーがこんなこと言ってたらどうやって作りますか？

Android 4.* で画像がぼやける不具合について

2013/02/052012/12/13 by

最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。 Android4.xで画像という画像がぼやけまくるという怪現象があり、シンプルな例を書いてみたらtranslateZが１つの原因のようでした … 続きを読む

9日目:CSS Preprocessor Advent Calendar 2012

2012/12/09 by

CSS Preprocessor Advent Calendar 2012の9日目です。

今年の8月にSassの神バージョンアップがあった勢いでレポートを書いたんです。
社内にSass使い増えるといいなーと思って書いてはみたものの、とにかく使い勝手が悪い。
長文過ぎて見づらかったのでカッとなってWebサイト化しました。

Sassオレオレリファレンス

加筆し過ぎて序盤しか出来てないんですが、後は追々書いていくつもりです。

明日はTakatsudoさんです！

[css] CSS3時代の上下中央に配置するパターン

2016/02/052012/12/06 by Tenderfeel

最近多用するので…。

4日目 : CSS Programming Advent Calendar 2012

2012/12/042012/12/04 by

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは１つだけです。Chromeでしか動作確認してません。

[Sass+Compass] Rubyで作るカスタム関数と設定

2012/10/03 by

RubyでSassの@functionを作ると色々やれて便利です。
CompassのConfig使うとより便利です。

[Compass] 超訳 Configuration Reference

2013/11/072012/09/30 by

CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。

Compassの設定ファイルはRubyファイルです。
これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。
それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！

※この記事は完全な和訳ではありません。

公式 Configuration Reference

[CSS3] gradient が使えるところ

2012/09/242012/09/24 by

gradientは背景にグラデーションを設定できるプロパティです。ってさらりと書いてあった記事がTLにあって、えー確かアレにも使えたはず…と思ってテストしてみるに至ったんだけど、ジェネレーターでbackgroundの … 続きを読む

[Sass] Sass 3.2で実装された新機能がヤバい

2019/08/222012/08/31 by Tenderfeel

8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて
ただでさえヤバイくらい高機能なSassがますますパワーアップした。
Sass信者のみなさんはすでにお使いでしょうか？

[css,js] Retinaディスプレイ対策

2011/11/142011/09/07 by

スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。

500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。

[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)

2019/09/262011/08/15 by Tenderfeel

Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！

特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。

この記事はiOS5、Android 3以前について記載したものです

【css】タップ時にz-indexを無視して下の要素に枠がつく(Android)
【html, css】マルチバイト文字にfont-weight:boldが効かない(Android)
【css】 border-radiusのコーナーがジャギる(Android)
【css】 box-shadow、text-shadowでblurを0にすると描画されない(Android)
【css】　@keyframeアニメーションに関する不具合(Android)
【css】 @keyframeの100%で指定したスタイルが維持されない(Android, iOS3.*)
【css】アニメーション開始時・終了時に一瞬だけアニメーションしている要素が消える(Android)
【css】 rgbaアニメーションで残像が発生する(Android)
【css】 transrateを使用したアニメーションがちらつく(Android, iPhone)
【css】アニメーション開始時に関係ないところが点滅するようにちらつく(Android、iPhone)
【html, css】 JSやCSSで出力したマルチバイト文字が文字化けする(Android)
【html】ソフトウェアキーボードやブラウザメニューを表示するとbodyのheightが削られたまま戻らない(Android)
【html, css】テキストボックスに関するバグ(Android)
【css】 transitionでscaleを使用すると実行前のサイズに戻る(Android)
【css】対応していないCSS3 Animationの指定をすると誤動作する（Android 2.2）
【css】 background-imageが２重に表示される

[CSS3] テーブルで作った表をグラフに変える

2011/03/232011/03/23 by

CSS3でグラフを作る手法はList of CSS3 Graph and Chart Techniquesにあるように色々公開されているんだけども、ソースで見ると意味不明だったりするものが多いんでそれならテーブルをグ … 続きを読む

【初音ミク】フルCSSでみくみくにしてあげる♪ 【してやんよ】

2011/03/112011/03/03 by

3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。

その昔、マクパペットをフルカスタムしたり…

あの楽器を再現したり…

あの楽器 (Firefox4 only) – jsdo.it – share JavaScript, HTML5 and CSS

…した過去があるのでつい反応。

したらすかさず煽られた。

いや〜いくらCSS3がスゴイとはいえ初音ミクは難しいですよねえ？(ﾟω｀)ﾁﾗｯ

…………CSS3に不可能はない！！

心の中で啖呵を切った。そして釣られた事に気付いた午後６時。
ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、
前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。

※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね！
（IE6-8で見るのはダメ！絶対！）

jsdo.miku forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ブラウザ起動するのﾏﾝﾄﾞｸｾという人の為の画像はこちら。（左はノーマル素体）

jsdo-miku はちゅねミク

我ながら変態なソースだなと思いました。だがそれがいい。

髪や服やネギは同色で作った擬似要素を重ねてあの形にしています。
はちゅね化したときのほっぺ渦巻きはborder-radiusで円にしたborderだけの要素を擬似要素加えて３つ繋げて描いてます。
同じくはちゅね化した時の口はborderで作った台形を2枚重ねてます。
あと足の絶対領域や脇もちゃんとありますので目を凝らしてチェックして貰えるとありがたい。

CSSだけで絵を書くのは図形を上手いこと作る事がポイントなんですけど、パターンさえ覚えてしまえばそう難しくないです。
CSS3でつくれる形いろいろ。　や　The Shapes of CSSを見れば一目瞭然。
幾何学図形を重ねる手法はForza2のペイントカーと通じるものがあるので、痛車職人と同じ位変態になればkei版ミクの再現も出来るんじゃないかなぁと思ってみたり。

来る3/9に向けて、他のユーザーやWonderflもみっくみくにされるよう呪っておきます 😀

ミクの日終わったけどVOCALOIDコンプ目指してまだまだ製作中！