[B! tutorial] hinaesanのブックマーク

ブログにYoボタンを設置した

ブログにYoボタンを設置した最近はほとんどのコミュニケーションがYoで完結している．得に日本はハイコンテキスト文化なので助かる．だいたい伝わってると思う．最近だとYoに人生を救われたひともいるくらいだ．さて，ブログを書いたあとにわざわざ「ブログ書いたので読んでください」などと言うのは，粋じゃない．さらっとYoするのが現代のスタイルだ．ということで，Yoボタンをブログに設置した． YoがインストールされたデバイスでこのYoボタンを押すと”SOTABLOG”というアカウントがYoのリストに登録される（PCとかだと手動で..）．すると，ブログ記事が更新される度に”SOTABLOG”からYoされるようになる．仕組みといっても自分の個人アカウントが”SOTABLOG”で一人一人に手動でYoするわけではない．Yo Developers APIを利用している．やり方は以下． http://yo

hinaesan 2014/07/01

Yo

リンク

CSSスプライトについてあれこれ。

「CSS Sprites（CSSスプライト）」についてまとめます。すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

hinaesan 2014/06/25

リンク

CSS3 Image Styles - Web Designer Wall

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the

hinaesan 2014/06/25

リンク

CSS3アニメーションの基本

CSS3アニメーションの基本：脱エンジニアっぽさ！クライアントの笑顔を引き出すCSS3アニメーション（1）（1/3 ページ）エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ！」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。