Our large team of engineers use this front end development guide
By Yangshun Tay Front end development has never been so complex and exciting as it is today. New tools, libraries, frameworks, and plugins emerge every other day. There is so much to learn. Fortunately our web team at Grab has been keeping up with the latest best practices, and has incorporated the modern JavaScript ecosystem in our web apps. The result of this is that our new hires or back end en
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc
Length units representing a percentage of the current viewport dimensions: width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
QuirksMode
QuirksMode.org is the prime source for browser compatibility information on the Internet. It is maintained by Peter-Paul Koch, mobile platform strategist in Amsterdam, the Netherlands. QuirksMode.org is the home of the Browser Compatibility Tables, where you’ll find hype-free assessments of the major browsers’ CSS and JavaScript capabilities, as well as their adherence to the W3C standards. It is
jQuery Mobile
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
フォームのラジオボタンやチェックボックスとテキストのずれを揃える方法 - CSSテクニック - acky.info
HTMLコード <div> <label><input type="radio" />ラジオボタン</label><br> <label><input type="checkbox" />チェックボックス</label><br> <select name="select"></select>セレクト </div> <div class="vertical-align"> <label><input type="radio" />ラジオボタン</label><br> <label><input type="checkbox" />チェックボックス</label><br> <select name="select"></select>セレクト </div> <div class="vertical-align-em"> <label><input type="radio" />ラジオボタン</
チェックボックスのラベル範囲を視覚的に分かりやすくするCSS - スタイルシートTipsふぁくとりー
《2016年2月29日 10:00 公開/更新》 チェックボックスのラベル範囲を視覚的に分かりやすくするCSS [フォーム,色] HTMLのinput要素を使ってチェックボックスやラジオボタンを作ると、クリック可能な範囲がとても狭くて若干使いにくいですよね。クリック可能な範囲は「チェックボックスやラジオボタンそのもの」だけで、その横に書いた文字列はクリック対象外になってしまいます。 ところが、input要素と併せてlabel要素を使えば、ラベル部分(チェックボックスやラジオボタンに対応する文字列の部分)もクリック可能になります。そうしておく方が、一般的なソフトウェア上のチェックボックスやラジオボタンと操作の感じが同じになるので、ユーザビリティ上も望ましそうです。 以下の2つのチェックボックスは、1つ目は「チェックボックスそのもの」しかクリックできないデフォルトの状態です。文字列部分をクリッ
ウェブ制作・プログラマー・デザイナーのためのチートシート集 | コリス
Scott Klarrのエントリー「Cheat Sheet Index」から、ウェブ制作・プログラマー・デザイナーのためのチートシート集です。
MOONGIFT: >> RoR用。CSSでグラフを描く「CSS Graphs Helper for Ruby on Rails」:オープンソースを毎日紹介
最近はWebアプリケーションを構築しようと思うとRuby on Railsを使うようになっている。慣れれば慣れる程開発の効率が良くなり、さらに便利なものになっていく。 そんなRailsの魅力をさらに増してくれるのが数多いプラグインの存在だ。その中から一つ、グラフ作成のプラグインを紹介しよう。 今回紹介するオープンソース・ソフトウェアはCSS Graphs Helper for Ruby on Rails、CSSを使ってグラフを作成するRailsプラグインだ。 CSS Graphs Helper for Ruby on RailsはインストールはRailsのプラグインコマンドからでき、さらに設定らしい設定もせずに利用できるのが魅力だ。 描けるグラフは三種類だ。縦型の棒グラフ、横型の棒グラフ、そして複合型だ。どれも手軽に利用でき、Webアプリケーションをさらに魅力的なものにしてくれるだろう。
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Brackets - Web デザインを認識する最新のオープンソースコードエディター
csscomb.com
GitHub - kwappa/ruby-clean_css
IBM Developer
雑記帳
Text + Image + CSS3 = Crazy Delicious
CSSMENUMAKER.COM