今度はsvg+cssを使ったアニメを練習してみた。sampleたのしい。 コードは以下svg <svg> <path id="path" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text id="text" font-size="8" dx="0" dy="0"> <textPath xlink:href="#path"> testtesttesttest </textPath> </text> </svg> css #path { stroke:#808080; fill:none; stroke-width:1; …
<path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> このパスの上にテキストを描画しましたコードこんなかんじ <path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text font-size="8" dx="0" dy="0"> <textPath xlink:href="#textTest"> testtesttesttest </textPath> </text> strokeもnoneに…</path></path>
引き延ばしても大丈夫、アルファチャンネルを保持する、アニメーションも可能、いいとこだらけなSVG 基本は以下で学ぶ &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html" data-mce-href="…
<a href="http://leko.jp/archives/442" data-mce-href="http://leko.jp/archives/442">Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG</a> Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG はじめてのEmmet with Sublime Text2 from Sadaaki HIRAI 【便利ツール】Emmetで、ちょっと気持ちいいコーディング…
Blocks — Productivity tools for designers and developers 水彩画風の滲みの上に白の単純なラインだけでイラストが浮かんでいるのがかわいい。 イラスト画像はsvgだ。 あとレスポンシブでもある。 最初にも最後にもフォームがある構成もなんかしらの機会で…
配色パターンからWebデザインを考える 配色パターンからWebデザインを考える | Webクリエイターボックス これのぴったりの配色を考えるのところが何気にPhotoshop Tipsな気がする 2. 彩度のバリエーションを表示 ５色の上部に白で塗りつぶしたレイヤーを重ね…
ページ全体が枠で囲われているようなデザイン。 例 <a href="http://t-p-n.jp/" data-mce-href="http://t-p-n.jp/">風ノウタ / IRONNATS(アイアンナッツ) | 岡山市にあるレストランウエディングのお店</a> 風ノウタ(kazenouta) / アイアンナッツ(IRONNATS) | 岡山市にあるレストランウエディングのお店 <a href="http://litalico.co.jp/" data-mce-href="http://litalico.co.jp/">株式会社LITALICO（りた</a>…
覗いて見たらマジ未知な知識ばっかりやった。 フロント作業の効率化 from Yuto Yoshinari zen-codingの次期バージョンことEmmet、あとで調べよう、めっちゃ便利そう あとsassじゃなくてstylus使ってるのか〜 関数も定義出来るとか…でもCSSで関数使う機会今の…
なんてものがあるらしいです。 Zepto.js: the aerogel-weight jQuery-compatible JavaScript library Zepto.js: the aerogel-weight jQuery-compatible JavaScript library IE対応とか関係ないもの(ex:スマホ向け)とかに good とのこと
モチイエ女子web モチイエ女子web｜女子と住がもっと近づくwebサイト コンテンツは置いといて、各パーツが全部綺麗に8の倍数で揃っていてきれい。 8の倍数を指標にして設計するとやりやすそうというのはこちらでも言及済み。 『デザインは8の倍数でできてい…
「人類は200歳まで生きられる」 がん細胞を死滅させ、食糧問題までも解決する“プラズマ”の可能性とは？ | ログミー[o_O] 「人類は200歳まで生きられる」 がん細胞を死滅させ、食糧問題までも解決する“プラズマ”の可能性とは？ | ログミー[o_O] プラズマすご…
デザイナーという人達の仕事 デザイナーという人達の仕事 | freshtrax | btrax スタッフブログ 良記事。 デザイナーというと、絵を描いて形だけを決める仕事だと勘違いしている人が多いのだが、実はそれらは最終アウトプットのごく一部であり、本来デザイナ…
Objective-C - iPhone6/iPhone6 Plusの画面対応について - Qiita Objective-C - iPhone6/iPhone6 Plusの画面対応について - Qiita これより iPhone4siPhone5/5siPhone6iPhone6 Plus デバイスピクセル 640 x 960 640 x 1136 750 x 1334 1080 x 1920(1242 x 22…
ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは ユーザーインターフェースの質を高める手法「ユーザーはヨッパライ法」とは - GIGAZINE 工学倫理でやったフールプルーフを思い出した なんの流れで出てきたのか忘れたけど、UI構成…
ワイヤーフレームとメインビジュアルとロゴだけでもめっちゃ時間かかった 【見本】 ちょっとバグってる 【模写】 メインビジュアルのフォント、全然違うんだけど、文字間隔の取り方が特徴的だったのでそれを完コピしたのとネオンぽいエフェクトがやっぱりで…
楕円ベースで出来た葉っぱを並べてエンベロープかけて作る 葉っぱの作り方次第で違う雰囲気になるのでテスト 1,完全に同じ楕円をずらーと並べた これだとこうなる いかにもイラレで並べて作りました感 色で暖かく見えちゃいますが形はなんというかミニマムな…
tebukulo: 吉祥寺を拠点に活動するデザイナーとライターのユニット ふんだんに動きが使われているけど仰々しくない。 サイト自体も軽めでストレスが少ない。 かわいい。
フォントの知識 凝縮したページを発券した。 メトリクスとオプティカルの違いを知らずにとりあえず両方試していい感じに見えるほうを選んでたけど、今後は選び方を考えよう メトリクス：文字のカーニング情報に基づく オプティカル：文字の形状に基づく ちな…
SOHO NEON | FRED PERRY JAPAN | フレッドペリー日本公式サイト SOHO NEON | FRED PERRY JAPAN | フレッドペリー日本公式サイト レスポンシブの参考に探してていいな〜と思ったもの 特にいいな〜と思ったのがメインロゴと、セクション1の背景が微妙にチカチ…
既に投稿した記事を下書きに戻したりしたい まだやれてないらしい
手順 1,パスツールでパスを描きます(みづらい) 2,描画用のレイヤーを必ず用意すること これみたいにテキスト、塗りつぶしレイヤーとかしかないとできない 必ず用意する 3, Bを押してブラシツールを選択。描画したい線をブラシパネルで作る。 4, パスパネルか…
.scssではなく.sassでプロジェクトつくるとき compass create --syntax sass とやると最初から.sassででてくる、便利 この記事がわかりやすかった <a href="http://howtohp.com/2011/09/19/compass/" data-mce-href="http://howtohp.com/2011/09/19/compass/">CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。</a> CSS書くならCompass使った方がいいよ。SASS…
ファイル全体が純粋な PHP コードである場合は、ファイルの最後の終了タグは省略するのがおすすめです。 終了タグの後に余分な空白や改行があると、予期せぬ挙動を引き起こす場合があるからです。 余分な空白や改行のせいで PHP が出力バッファリングを開始…
PHP では、短い形式の開始タグ も使えます (しかしこれはおすすめしません。というのも、この形式のタグは php.ini でshort_open_tag を有効にするか --enable-short-tags オプションつきで PHP を configure した場合でないと使えないからです)。 PHP: PHP…
