ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック | コリス
全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、、 デモ 実装 デモ デモページは構造的にはラッパーの中に上から、半透明のレッドのヘッダ、ホワイトのコンテンツの2つで構成されています。 まずは、表示サイズがラッパーの幅960pxを超えた時の表示。 Improved Full Width Browser：幅1200px コンテンツは幅960pxで表示され、ラッパー内にヘッダが含まれているけど、ヘッダの幅はそのコンテンツのラッパーを超えている状態です。 表示幅が960px以下になると、ヘッダはコンテンツの上部に成り行きで収まります。 Improved Full Width Browser：幅780px 実装 HTML HTM
2013年6月24日 管理人のブックマーク:phpspot開発日誌
2013年6月24日の気になったページ集です RSSリーダー Sylfeedがスタンドアロンアプリとなって登場！ ｰ Singer Song iPhone http://kuracyan.net/archives/17855 [CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス http://coliss.com/articles/build-websites/operation/css/css-button-library-buttons.html ドコモが語る「LINE」と提携した狙い--通話やメールは「共存できる」 - CNET Japan http://japan.cnet.com/interview/35033693/ 「手首が疲れない」は気のせい!? キーボードに角度を付けるあの小さな足が必要な「本当の理
アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル - かちびと.net
SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for sprites Check out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが良さそうです。尚、使っているSVGはこちら、PNGはこちらです。 サンプルを見た限りでは今あるブラウザではかなりパフォーマンスに影響が出てしまうようですね。SVGは凄く便利ですけど、まだ実用段階としては時期早尚という印象です。使いどころ次第なんでしょうけど・・ 少し仕事が立て込んでるのでメモだけ。サンプルのコードは以下でどうぞ。 PNG vs SVG for sprites
Bootstrapのselectをカッコよくできる「Bootstrap-select」:phpspot開発日誌
Bootstrap-select Bootstrapのselectをカッコよくできる「Bootstrap-select」。 通常のselectをもっとカッコよくカラフルにすることが出来ちゃいます カラフルなのもなかなか使えそう 関連エントリ BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」 Bootstrapなサイトで使えそうなクールなツールチップ実装jQueryプラグイン「Smallipop」 Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 Bootstrapに270の使えるアイコンを追加で
WordPressロゴのフォントMrs Eavesに隠された一ひねり
二ヶ月連続で寄稿しなかったら存在を抹消されかけたネカマのGreyよ。みんな、久しぶり！ 元気かしら？ 私は、そうね……最近、生きるっていうただそれだけのことの裏側に多くのドラマがあるんだなっていうことをよく考えるわ。 電車で股を大きく開けて眠っているOLや、パズドラで狂ったようにコンボを決めているサラリーマンを眺めていても、以前ほど「このクソが！」という思いが沸き上がってこなくなったの。この人たちにもきっとドラマがあるんだって。それぞれの人生を生きて、その結果、股を広げたりパズドラをやったりしているんだって。 それはあなたが日頃なにげなく使っているあんなものやこんなものについても同じよ。そう、それがWordPressであってもね。 WordPressのロゴに使われているタイプフェイス WordPressは巨大なコミュニティを持っているから、なにかとしっかりしているわ。たとえば、ブログ本文中
スクロール位置に合わせて読むのに後何分？が表示できるjQueryプラグイン「jquery-reading-time」:phpspot開発日誌
スクロール位置に合わせて読むのに後何分？が表示できるjQueryプラグイン「jquery-reading-time」 2013年06月24日- themeskult/jquery-reading-time GitHub スクロール位置に合わせて読むのに後何分？が表示できるjQueryプラグイン「jquery-reading-time」。 この記事を読むのに2分とか、そういう表示をしているブログをチラホラみかけますが、今回紹介するプラグインを使えば、スクロール位置とともに、あと何分で読めるか？というのが表示できてより分かりやすくなっています。 実装は超簡単で、必要ライブラリ読込後、<p class="post">記事本文.....</p> があったら $('.post').readingTime() ってやるだけです 長文が多いサイトなんかでは設置してあげると親切かも知れませんね。 今、何分
[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons
最後はオプションで上から、サイズ変更、inputやbuttonなどのフォーム要素、ラッパー付きのボタン Buttonsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル Buttons.zipをButtons- GitHubからダウンロードし、外部ファイルとして記述します。 <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/button.css"> Step 2: HTML あとは、HTMLにボタンのスタイルを使うだけで実装できます。 デモのHTMLは、こんな感じです。 <a href="#" class="button button-rounded button-flat-primary">press me</a> <a href="#" clas
ソーシャルコーディングが可能なオンラインIDE・「FriendCode」 - かちびと.net
FriendCodeはブラウザで他のユーザーと共有しながら使えるオンラインのIDEです。プライベートなリポジトリも持てるみたい。アカウントはFacebookやGithubでログイン出来ます。他にもいろいろ。結構高機能ですね。 FriendCode
Twitter 人気のつぶやき 6/15～6/21 2013
2013年6月21日 Twitter 人気のつぶやき WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 1. Macを選ぶべき理由、選ぶべきでない理由：MacとWin、どっちを買う？ この記事をRTする 2. Webサービス：色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！ この記事をRTする 3. ネタ：速すぎてフォローできないTwitterアカウント @Abarth500_DE この記事をRTする 4. Photoshop：Adobe Photoshop CCファーストインプレッション この記事をRTする
2013年6月21日 管理人のブックマーク:phpspot開発日誌
2013年6月21日の気になったページ集です Google、プログラミング言語「Dart」初めてのベータ版をリリース - 窓の杜 http://www.forest.impress.co.jp/docs/news/20130620_604504.html Googleリーダーの後継者はFlipboardになるか、それともFeedlyか - W&R : Jazzと読書の日々 http://d.hatena.ne.jp/wineroses/20130621/p1 「Designed by Apple in California」キャンペーンに漂う凋落感が半端ない - Market Hack http://markethack.net/archives/51880682.html 以前の Eye-Fi とはひと味ちがう。Eye-Fi mobi カードが切り捨てることで得たもの | Lifehac
CSS3を使った多彩なアニメーション用ライブラリ「magic」:phpspot開発日誌
magic css3 animations CSS3を使った多彩なアニメーション用ライブラリ「magic」 要素をフェードイン、アウトさせる等の多彩なアニメーションが詰まっています。 スマホやタブレットで要素にアニメーションエフェクトを付けたい際に使えるかもしれません 関連エントリ Flashみたいに美しいCSSテキストアニメーションデモ 美しいアニメーションを使ったフィルタ＆ソートが可能なjQueryプラグイン「MixItUp」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」 スプライトアニメーション作成用jQueryプラグイン「Phantascope」
あら簡単！写真やウェブページの画像にパースをつけてかっこよく魅せるPhotoshopのアクション -Perspective Actions
あら簡単！写真やウェブページの画像にパースをつけてかっこよく魅せるPhotoshopのアクション -Perspective Actions
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ダウンロードしておきたいフリーのデザインフォントのまとめ -2013年6月
新着記事
新着記事
SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」 - かちびと.net
シンプルさを重視したOSSのCMS・「Anchor」 - かちびと.net
有名なサイトのUIを再現し、PSDで配布する・「Popular UIs」 - かちびと.net
新着記事
フラットで小気味よく動くボタンスタイルのデモ＆サンプル:phpspot開発日誌