CSS3系

CSS3での動画サンプル
2014-04-19

 CSS3のCSS3 TransformおよびTransition属性をうまく使って、なんと綺麗な動画の作成できます。

ここでは35個のCSS3動画サンプルを見せますが、Webデザイン、開発者にとってまた一つの選択肢が増えたと思います。

1. Pure CSS Coke Can

 

 

2. Colorful Clock

 

 

3. jQuery DJ Hero

 

 

4. Animated Pricing Column

 

 

5. Slick jQuery Menu

 

 

6. Frame-by-Frame Animation (Hover to Play)

 

 

7. AT-AT Walker

 

 

8. Contextual Slideout Tips With jQuery & CSS3

 

 

9. CSS3 & jQuery Slide Out Button

 

 

10. A Fresh Bottom Slide Out Menu with jQuery

 

 

11. Drop-In Modals

 

 

12. CSS3 Lightbox Gallery With jQuery

 

 

13. Easily Turn Your Images Into Polaroids with CSS3

 

 

14. Beautiful Looking Custom Dialog Box With jQuery and CSS3

 

 

15. Cross-Browser Rounded Buttons with CSS3 and jQuery

 

 

16. CSS3 DropDown Menu

 

 

17. CSS3 Search Form

 

 

18. CSS3 Dynamic Shadow

 

 

19. CSS3 Music Player Menu

 

 

20. Elastic Thumbnail Menu

 

 

21. Create Depth And Nice 3D Ribbons Only Using CSS3

 

 

22. CSS3 Chunky Menu

 

 

23. CSS3-only horizontal drop line tab menu

 

 

24. javascript-effect alternatives using CSS3 for webkit browsers

 

 

25. CSS3 Flying Menu

 

 

26. Twitter-like Input Using CSS3

 

 

27. Animated wicked CSS3 3d bar chart

 

 

28. Wicked CSS3 3d bar chart

 

 

29. Pure CSS3 bokeh effect

 

 

30. Query & CSS3 Gallery With Animated Shine Effects

 

 

31. Interactive Image Vamp up with jQuery, CSS3 and PHP

 

 

32. How to Create a “Stay-On-Top” Menu with CSS3 and jQuery

 

 

33. Halftone Navigation Menu With jQuery & CSS3

 

 

34. 3D Meninas

 

 

35. Sliding Vinyl

 

CSS3でのドロップダウンメニュー作成サンプル10個
2014-04-19

ドロップダウンメニューはWeb作成時よく使用していますが、今日はhtml5、css3でドロップダウンメニュー作成サンプルを紹介いたします。

 

1. jQuery および CSS3でSLIDE DOWN BOX MENU作成

デザインが苦手の方でもこんなに綺麗なメニューできますよ。

デモ       ダウンロード

 

2. CSS3でナビゲーションメニュー作成

これはCSS3で動画(アニメーション)ナビゲーションメニュー、ちょっと古いブラウザでも使えます。

デモ       ダウンロード

 

3. CSS3動画ドロップダウンメニュー

CSS3 animated dropdown menu

デモ       ダウンロード

 

4. 単純なCSS3での2段メニュー

Dark Menu: Pure CSS3 Two Level Menu

 

5. HTML5/CSS3 シンプルなナビゲーションメニュー

HTML5/CSS3 Gray Navigation Menu

デモ       ダウンロード

 

6. エレガントなCSS3メニュー

Elegant Dark CSS3 Menu Template

デモ       ダウンロード

 

7. クリエイティブなCSS3アニメーションメニュー

Css3 Animation Menus

デモ       ダウンロード

 

8. 大理石風CSS3メニュー

Marble Style CSS3 Navigation Menu

デモ       ダウンロード

 

9. 振れ回り動きの CSS3 ドロップダウンメニュー

Whirling CSS3 dropdown menu

デモ       ダウンロード

 

10. CSS3 ドロップダウンメニュー

デモ       ダウンロード

 

Metro UI スタイル紹介
2013-04-13

Metro UI は、マイクロソフトが作り出したユーザインタフェース (UI) である。

Windows 8 のUIのメインスタイルである。iOS、Android UIとの最大の区別は:
Metroは綺麗なユーザーインタフェースよりコンテンツ情報を強調することで、
シンプルでしつこくない感じがあります。
 
あなたの次のサイト、作業にもWindows 8 Metroスタイルを試してみたらどうでしょうか。
いま流行っている10個のサンプルをご紹介いたします。
 

1. BootMetro

Twitter Bootstrapのようなシンプル風の HTML、CSSおよび Javascriptのフレームワーク,Win8 スタイル,いかがでしょうか。

   ダウンロード     デモ

 

2. Bootswatch – Cosmo

Twitter Bootstrapフレームワークで開発したMetro UI スタイル、フリーご利用できます。

   ダウンロード     デモ

 

3. Metro Flexible Navigation

シンプルかつ柔軟なWindows 8のメトロスタイルのグリッドレイアウト、水平、縦のレイアウトおよびドラッグスクロールサポートする。

   ダウンロード     デモ

 

4. Metro UI CSS

Metro UI CSSはcssパッケージ

   ダウンロード     デモ

 

5. metro-bootstrap

これもTwitter Bootstrap Metroの開発用フレームワーク,GitHub系のオープンソース。

   ダウンロード     デモ

 

6. MelonHTML5 – Metro UI

HTML5、CSS3およびJavaScriptの Metro UI フレームワーク,パラメータ設定でいろいろカスタマイズできます。

   ダウンロード     デモ

 

7. Metro Mania

6種類の色選択できます。

   ダウンロード     デモ

 

8. Scaffold – Metro Style Template

サイトのテンプレート、Twitter Bootstrapスタイルのホームページの作成に役たちます。

   ダウンロード     デモ

 

9. MADMIN – Admin Theme

MetroスタイルのCMSですが、お金かかります。ちょっと残念。

   ダウンロード     デモ

 

10. Metro Help Desk Support Tickets

ヘルプ作成に役たつと思います。

   ダウンロード     デモ

各ブラウザのCSS3およびHTML5対応状況
2014-03-07

CSS3 Properties
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
RGBA × × × 91%
HSLA × × × 91%
Box Sizing × × 35%
Background Size × × × 90%
Multiple Backgrounds × × × 90%
Border Image × × × × × 85%
Border Radius × × × 91%
Box Shadow × × × 91%
Text Shadow × × × × 76%
Opacity × × × 91%
CSS Animations × × × × 66%
CSS Columns × × × × 85%
CSS Gradients × × × × 84%
CSS Reflections × × × × × × × × × 46%
CSS Transforms × × × 90%
CSS Transforms 3D × × × × × × × 41%
CSS Transitions × × × × 72%
CSS FontFace 98%
FlexBox × × × × × × 72%
Generated Content × × 35%
DataURI × × 35%
Pointer Events × × × × × × × 29%
Display: table × × 35%
Overflow Scrolling × × × × × × × × × × × × × × 3%
Media Queries × × × 34%
CSS3 Selectors
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Begins with × 99%
Ends with × 99%
Matches × 99%
Root × × × 91%
nth-child × × × 91%
nth-last-child × × × 91%
nth-of-type × × × 91%
nth-last-of-type × × × 91%
last-child × × × 91%
first-of-type × × × 91%
last-of-type × × × 91%
only-child × × × 91%
only-of-type × × × 91%
empty × × × 91%
target × × × 89%
enabled × × × 91%
disabled × × × 91%
checked × × × 91%
not × × × 91%
General Sibling × 99%
HTML5 Web Applications
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Local Storage × × 95%
Session Storage × × 96%
Post Message × × 97%
Offline Applications × × × × 85%
Workers × × × × 82%
Query Selector × × 95%
WebSQL Database × × × × × × × 49%
Indexed Database × × × × × × × × 25%
Drag and Drop 96%
Hash Change (Event) × × 94%
History Management × × × × 70%
WebSockets × × × × × 56%
GeoLocation × × × × 89%
Touch × × × × × × × × × × × × × × 6%
File API × × × × 29%
Meter element × × × × × × 22%
Progress element × × × × 28%
HTML5 Graphics & Embedded Content
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Canvas × × × 91%
Canvas Text × × × 90%
SVG × × × 90%
SVG Clipping Paths × × × 90%
SVG Inline × × × 64%
SMIL × × × 75%
WebGL × × × 70%
Audio × × × 90%
Video × × × 90%
HTML5 Audio Codecs
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Audio: ogg/vorbis × × × × × × × 72%
Audio: mp3 × × × × × × × × 50%
Audio: wav × × × × × 77%
Audio: AAC × × × × × × × × 50%
HTML5 Video Codecs
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Video: ogg/theora × × × × × × × 71%
Video: H.264 × × × × × × × × 50%
Video: WebM × × × × × × × 58%
HTML5 Forms Inputs
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Form: Search × × × × 71%
Form: Phone × × × × 71%
Form: URL × × × × 69%
Form: Email × × × × 69%
Form: DateTime × × × × × × × × × × × × 5%
Form: Date × × × × × × × × × 17%
Form: Month × × × × × × × × × 10%
Form: Week × × × × × × × × × 10%
Form: Time × × × × × × × × × 13%
Form: LocalTime × × × × × × × × × 10%
Form: Number × × × × × × 40%
Form: Range × × × × × × 47%
Form: Colour × × × × × × × × × 13%
HTML5 Forms Attributes
Platform MAC WIN % Support
Browser CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA IE  
Version 25 20 12 15 5.1 6 25 15 12 6 7 8 9 10  
Form: Autocomplete × × × × 48%
Form: Autofocus × × × × 72%
Form: List × × × × × × 43%
Form: Placeholder × × × × 71%
Form: Min × × × × × 55%
Form: Max × × × × × 55%
Form: Multiple × × × × 84%
Form: Pattern × × × × 71%
Form: Required × × × × 71%
Form: Step × × × × × 55%

CSSハックまとめ
2014-04-13

Webブラウザの違いにより起こるレイアウトの表示ずれという問題よくありますが、これを解決するためCSSハックを使います。CSSハック(CSS Hack)は、各ブラウザCSSの実装状況の違いやバグなどを吸収し、同じ表示するためのテクニックである。そのまとめとして下記をご参考ください。

IE selectorハック

1
2
3
/* IE 6 and below */
* html .selector  {}
.suckyie6.selector {} /* .suckyie6 can be any unused class */
1
2
/* IE 7 and below */
.selector, {}
1
2
3
4
/* IE 7 */
*:first-child+html .selector {}
.selector, x:-IE7 {}
*+html .selector {}
/* Everything but IE 6 */
html > body .selector {}
1
2
3
/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}
1
2
3
4
5
/* Everything but IE 6/7/8 */
:root *> .selector {}
body:last-child .selector {}
body:nth-of-type(1) .selector {}
body:first-of-type .selector {}

IE 属性/値ハック

1
2
3
/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }
1
2
3
/* IE 6/7 - acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */
1
2
3
4
5
6
7
/* IE 6/7 - any combination of these characters:
 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* ... */
1
2
3
/* IE 8/9 */
.selector { color: blue\0/; }
/* must go at the END of all rules */
1
2
/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }
1
2
3
/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; }
1
2
/* Everything but IE 6 */
.selector { color/**/: blue; }

IE Media Queryハック

1
2
/* IE 6/7 */
@media screen\9 {}
1
2
/* IE 8 */
@media \0screen {}
1
2
/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {}
1
2
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
1
2
/* IE 6/7/8 */
@media \0screen\,screen\9 {}
1
2
/* IE 8/9/10 & Opera */
@media screen\0 {}
1
2
/* IE 9/10 */
@media screen and (min-width:0\0) {}
1
2
/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {}

IE JavaScriptハック

1
2
3
/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
1
2
3
4
/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1
1
2
/* IE <= 8 */
var isIE = '\v'=='v';
1
2
3
/* IE 8 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
1
2
3
/* IE 9 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
1
2
/* IE 10 */
var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;
1
2
/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

Firefox

  selectorハック

1
2
/* Firefox 1.5 */
body:empty .selector {}
1
2
/* Firefox 2+ */
.selector, x:-moz-any-link {}
1
2
/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {}
1
2
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {}

 

  Media Queryハック

1
2
/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {}
1
2
/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {}
1
2
/* Firefox 4+ */
@media screen and (min--moz-device-pixel-ratio:0) {}

 

  JavaScriptハック

1
2
/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);
1
2
/* Firefox 2 - 13 */
var isFF = Boolean(window.globalStorage);
1
2
/* Firefox 2/3 */
var isFF = /a/[-1]=='a';
1
2
/* Firefox 3 */
var isFF = (function x(){})[-5]=='x';

Chrome

  selectorハック

1
2
/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {}

  

  Media Queryハック

1
2
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

  

  JavaScriptハック

1
2
/* Chrome */
var isChrome = Boolean(window.chrome);

  

Safari

  selectorハック

1
2
3
/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {}
html[xmlns*=""]:root .selector  {}
1
2
/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {}
1
2
/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {}

  

  Media Queryハック

1
2
/* Safari 3+, Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

  

  JavaScriptハック

1
2
/* Safari */
var isSafari = /a/.__proto__=='//';

  

Opera

  selectorハック

1
2
/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=""] .selector {}
1
2
/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {}
1
2
/* Opera 9.5+ */
noindex:-o-prefocus, .selector {}

  

  Media Queryハック

1
2
/* Opera 7 */
@media all and (min-width: 0px){}
1
2
/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}
1
2
/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {}
1
2
/* Opera, IE 8/9/10 */
@media screen {}

  

  JavaScriptハック

1
2
/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort);
1
2
/* Opera 12- */
var isOpera = Boolean(window.opera);

Magic CSS3 AnimationsはCSS3で動画(アニメーション)作成
2014-04-19

Magic CSS3 AnimationsはCSS3でいろんな動きのバリエーションを実現できる動画(アニメーション)です、 使いかたも簡単で、ぜひ使ってみてください。

 

 

使用方法: 

  ①、CSSファイルをinclude:

?
1
<link rel= "stylesheet" href= "yourpath/magic.css" >

  ②、対象項目に対し、クラス名(magictime)および動画のタイプ名を記入 例:

?
1
2
3
$( ’.yourdiv’ ).hover( function () {
   $( this ).addClass( ’magictime puffIn’ );
});

  ③、動画の実行間隔を指定:

?
1
2
3
setTimeout( function (){
     $( ’.yourdiv’ ).addClass( ’magictime puffIn’ );
}, 5000);

  ④、動画繰り返し実行の指定:

?
1
2
3
setInterval( function (){
     $( ’.yourdiv’ ).toggleClass( ’magictime puffIn’ );
}, 3000 );

  ⑤、動画の実行時間等のパラメータの指定:

?
1
2
3
4
5
6
.magictime {
     -webkit-animation-duration: 1 s;
     -moz-animation-duration: 1 s;
     -o-animation-duration: 1 s;
     animation-duration: 1 s;
}

  ⑥、動画の特定効果などの指定:

?
1
2
3
4
5
6
.magictime.magic {
     -webkit-animation-duration: 10 s;
     -moz-animation-duration: 10 s;
     -o-animation-duration: 10 s;
     animation-duration: 10 s;
}

23個完全にCSS3で作成したロゴ画像
2014-07-01

いままでのロゴはほとんど画像でできましたが、実はCSS3でも同じものが作られる。JavaScriptとの組み合わせで、さらに複雑な動画効果ができます。まさに革命ですが、これからcss3を期待しましょう。

Apple

Apple

Adidas

Adidas

Adobe

Adobe

BP

BP

Android Robot

Android Robot

Windows

Windows

Volkswagen

Volkswagen

Amro

Amro

Atari

Atari

CBS

CBS

Colorvivo

Colorvivo

Dribbble

Dribbble

Google Chrome

Google Chrome

HTML5

HTML5

Internet Explorer

Internet Explorer

Magento

Magento

McDonalds

McDonalds

Nike

Nike

Opera

Opera

Pepsi

Pepsi

Reddit

Reddit

Cloud9

Cloud9