Webデザインの勉強にいい！レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめレイアウトの基本構成・展開例、UIエレメントのバリエーション、カラーの使い方など、Webページのデザインの定義がまとめられたスタイルガイドを紹介します。 各リンク先では、スタイルガイドの大きいものやアニメーションなどを見ることができます。
Motion UI | Playground from ZURB
Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along wi
64 jQuery CSS3 Menu Plugins and Tutorials - Designbeep
HTML5,CSS3 and jQuery have all revolutionized web design and we all see more powerful and functional websites using these two languages. HTML5 and CSS3 have many advantages like faster loading times,greater functionalities and more flexibility.You can apply to any website very easily. In today’s post we have gathered a huge list of CSS3 HTML5 and jQuery menu plugins,tutorials with demos.Enjoy.. Si
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css
デモ：ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
iOS 6 switch style checkboxes with pure CSS • Lea Verou
I recently found myself looking at the Tools switch in Espresso: Not because I was going to use it (I rarely do), but because I started wondering what would be the best way to replicate this effect in CSS. I set on to create something that adhered to the following rules: It should be keyboard accessible It should work in as many browsers as possible and degrade gracefully to a plain checkbox in th
Code a Fantastic Animated Circular Thumbnail Gallery With CSS
Sneak Peek If you’re the kind of person who likes to skip to the end so you can see where you’re going, check out the live demo of the finished product below. I included three different versions of the animation to give you some ideas for how to vary the effect. Demo: Click here to launch. Before we get into building the thumbnail gallery, let’s talk a little bit about what we’re trying to achieve
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cssbuttons
http://2ndidea.com/frontend/animation-with-css-transition/
Buttons Builder