CSS

tumblrのYouTube埋め込み表示がカッコイイ

tumblr_logo

最近tumblrのダッシュボードで流れるYouTubeの埋め込み表示が変わって「お!」な感じだったので調べてみました。

まずYouTubeの動画を普通に貼りつけると、こうなります。

特にこれでも問題ないというか、Youtubeの特徴的な再生ボタンのおかげで十分動画だと分かります。しかし最近のタンブラーの動画サムネはこのように変わりました。 続きを読む

ブラウザやOSのCSSクラスを追加するJavaScript「CSS Browser Selector」を読み解く

angry数年前の自分なら読めなかった感が漂っていたので、初心者向けにちょっと読み解いてみようという記事です。中級以上の方にはアクビの出る内容だと思います!ごめんね!

「CSS Browser Selector」は、JavaScriptで<html class=” webkit chrome win js”>のようにクラス定義してくれます。 CSSハックを使わなくてもブラウザ毎に分離して記述できるので便利です。

「CSS Browser Selector」にはPHP版も用意されており、そちらを読み解くのはあまり難しくないのですが、JS版は幾分合理的なソースになっています。 続きを読む

jQueryもあるWEB屋向けギークTシャツ50枚+α

twitter「ぐだぐだ言ってないでコード書けよハゲ」的なギークTシャツないかなぁと探してたんですが、楽天とかアマゾンには少ししかなくて、「あんま需要ないのかな?」と諦めかけたそのとき、大量のギークTシャツを扱うネットショップを見つけました。

zazzle というサイトなんですが「何を今更」だったらごめんなさい。はじめて知りました。デザインの量とカスタマイズ出来る範囲が半端ない!ギークなのがザクザクある!

オーダーメイドのようで、Tシャツはもちろん、ロンTやパーカーにもプリントできて色も自在。かなり自分好みの一枚を作れそう。ちと高いのは仕方ないか・・・。 続きを読む

ティルトシフトをCSS3でリアルタイム処理するjQueryプラグイン

写真をジオラマ風に見せることができるティルトシフト。小さく見えて可愛らしいので目を引きますね。

本来はティルトシフトというレンズによって得られるこのエフェクトは、遠近法のパースを補正したりピントが合う範囲を調整できます。

このティルトシフト、フォトショップなどの画像処理で擬似的に同じことが出来るのですが、今回はブラウザだけで再現してしまうjQueryプラグインを紹介します。 続きを読む

jQueryとCSS3で影を極めたプラグイン「Real Shadow」

CSS3にてマウスカーソルの位置から要素に動的に影を落とすjQueryプラグイン「 Real Shadow 」をご紹介します。 百聞は一見にしかず、動くサンプルを御覧ください。

続きを読む

IMGタグのストレスを激減して画像王に俺はなる

文字ばかりのページって、よっぽどコンテンツ力がないと見る気がしない。でも一点でも写真があると、ぐっとページの見栄えがよくなる。ブログの記事にも最低1つは写真を入れるようにしている人も多いと思う。

ワードプレスや無料ブログなんかのシステムは、写真のアップロードや画像サイズの変更にかかるストレスがかなり低減されており、記事内に画像を入れるのもそれほど面倒ではない。しかしHTMLを直接書く場合、IMGタグの指定や画像サイズの変更ってかなり面倒。

そこらへんを見なおしてみた。 続きを読む