[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS
aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); } blue .bg-blue-gradient { background: rgba(0,116,217,1); background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); background: linea
![[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebba618dc6b777a167e6a6ec61d8756e3209bf80/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015093001.png)
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
「ng-mtg#3 AngularJS 勉強会」に参加してきました - akiyoko blog
今日は、六本木ヒルズ森ビル14FのGREEでのAngularJS勉強会でした。 「ng-mtg#3 AngularJS 勉強会」 (2013.7.3) AngularJS は JavaScriptのMVCフレームワークで、トレンドも急上昇中だとか。 #angularjsjp AngularJS for Beginners Eiji Kitamura @agektmr Slide: http://slid.es/agektmr/angularjs 最初にあまり知識が要らない。 特徴は4つ。 1. Declarative APIs（宣言的API） 反対は、命令的API（プログラムで手続き的に書いていくもの） HTMLに宣言的に書く。先頭に と書いて、AngularJSのアプリケーションであることを宣言 JavaScriptのコードが少なくて済む 2. 2 way binding(MDV) モデ
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
「120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」にて発表したCordovaに関する紹介です。 http://atnd.org/events/51539
Webブラウザ上でテキストスタイルをダイナミックに編集·Code Cola MOONGIFT
Code ColaはGoogle Chrome機能拡張として動作するスタイルシート設定ツールです。 Webインスペクタを使うとWebページを表示したままスタイルシートの編集ができます。ただ、数字やテキストを入力する形なので、思った通りの編集が難しいかも知れません。そこで試したいのがCode Cola、Google Chrome用のビジュアルスタイルシート変更ツールです。 立ち上げました。右上にあるウィンドウがCode Colaです。 任意のDOMを選択すると設定項目が表示されます。 スライダーを使ってフォントサイズをダイナミックに変更できます。 テキストのストロークを変更。 HTMLソースの表示。 設定項目を全てオープンしています。 テキストシャドーの設定。 Code Colaの利点は何と言ってもビジュアル的に分かりやすく、ダイナミックにスタイル設定ができることです。表示、非表示などの設定
テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」:phpspot開発日誌
Sieve jQuery Plugin テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」。 テーブル行数が多いと探すのが大変だったりしますが、このプラグインでインクリメンタル検索で表示要素を絞り込むことができるようになります。 地味に便利で簡単に実装できるので覚えておくとよさそう 関連エントリ HTMLのあらゆるエレメントに注釈を入れられるjQueryプラグイン「Chardin.js」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter
Flexible BoxでGrowlみたいな通知UIを実装する - slowjet
↑の画像のみたいなGrowlぽい通知UIを作るときに、一筋縄ではいかなそうなところと言えば右上から下へ順に流れていってウィンドウに収まりきらなくなったら、列が変わって左へ流れていくようなレイアウトを作るところでしょうか。言葉が下手すぎたので図を見てください・・・ こういうやつ。 CSS力がめっきり減ってきてるので、確かこういうやつCSSで出来たと思うんやけどなーぐらいの感じだったんですけど、これこそFlexible Boxですね。 Flexibile Boxの詳細はわざわざ説明するのもアレなので以下の仕様書とかサイトを見て把握すればいいと思います。 CSS Flexible Box Layout Module CSS Flexbox Please! Using CSS flexible boxes HTML <div class="mod-notifications"> <div clas
Bootstrap 3 で何が変わるのかをまとめてみた
Twitter Bootstrap 3 の変更点概要 Bootstrap 自体の仕様だけでなく体制なども変更されるようです。 モバイルファースト twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog（プライベートレポート）を twbs organization アカウントへ移行 サイトの URL を http://getbootstrap.com に変更 CSS はレスポンシブ用スタイルも含めて1ファイルにする IE7, Firefox3系 のサポート廃止 Glyphicon のフォント版を採用 Apache ライセンスから MIT ライセンスへ移行 *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更 過去バージョンのダウンロードにタグを使う コミュニティの
軽量でシンプルなレスポンシブWebデザイン向けのボイラプレート・Responsive Boilerplate
軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。 軽量なレスポンシブWebデザイン用のボイラープレート(文例集)です。圧縮版で2KBほど。また、IE7等でも表示が崩れません。 いわゆるCSSフレームワークですね。軽量でシンプル。IEにも対応と、欲しい特徴だけ絞られた感じでよかったです。 IE TabのIE7のスクショです。 また、Sublime textのパッケージも用意されていますのでSublime textユーザーの方で興味がありましたらお試しになってみては如何でしょう。ライセンスはMITです。 Responsive Boilerplate
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
半歩先いくかっこいいエフェクトだけでなく実装にもこだわったCSSのフレームワーク -Maxmertkit
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ：スタティック Maxmertkitのデモ：CSS3アニメーション Maxmertkitのデモ：ソーシャルメディア てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果 他のフレームワークとかぶらないネームスペース デザイン（カラー・サイズ）変更はテーマで簡単 Creed Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
Ink - Interface Kit
Download 3.1.10 This file contains CSS, JavaScript and their minified versions, images, fonts and the cookbook. Download with source This file contains SASS and JavaScript source code, distribution versions and the build tools config files. Github If you prefer, head on to our github repository, fork the project and help us create an even better Ink. Responsive from the ground up Our grid system i
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
CSSで長いURLや文章を改行させる場合のメモ - 牌語備忘録 -pygo
下記サイトから引用 Wrapping Long URLs and Text Content with CSS | Perishable Press pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ }
WebページのCSSプロパティ・値をワンクリックで表示してくれるブックマークレット「XRAY」が神便利！！！
こんな便利なんあったん… Webページ制作でよく利用されるのが「Firebug」などのデベロッパーツールですが、もっと超絶簡単にCSSプロパティを確認できるブックマークレットがありました。っていうかその存在を知りました。 そんなわけでXRAYと言うブックマークレットのご紹介。 使い方は簡単、サイトに訪れたら中央部分にあるボタン状のブックマークレットをブックマークバーへD&Dします。 これにて準備は完了。 CSSを覗きたいサイトを訪れたら先ほど登録したブックマークレットを起動。 XRAYが立ち上がります。あとはページ上の要素をクリック！ すると、その要素のプロパティ・値がご覧のように表示されるのです！なにこれお手軽！便利！ 要素のwidth・heightも確認できます。 そんなわけで簡単ではございますが、CSSを表示してくれるブックマークレット「XRAY」のご紹介でした。ちょっとしたCSSデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Button Generator
Twitter Bootstrapのテーマをオンラインで作成出来るツール・Bootstrap magic
