@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
A Keyframes Mixin (Sass only)
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
ç”»åƒã‚’使ã‚ãšCSSã ã‘ã§ä»»æ„ã®é–“éš”ã®ç ´ç·šã‚’æã | 12px.com
cssã§ç ´ç·šã‚’使ãŠã†ã¨æ€ã£ãŸã‚‰dottedã¨dashedã®2種類ã—ã‹ç”¨æ„ã•ã‚Œã¦ã„ãªã„ã®ã§ã€ãれ以外ã®é–“éš”ã®ç ´ç·šã‚’使用ã—ãŸã„å ´åˆã«ã¯ã‚らã‹ã˜ã‚白黒ã®gifç”»åƒã‚’用æ„ã—ã¦ã€èƒŒæ™¯ã«ç¹°ã‚Šè¿”ã—ã¦ä½¿ç”¨ã™ã‚‹äº‹ãŒå¤šã„ã§ã™ã€‚ ã—ã‹ã—CSS3ã®linear-gradientを使用ã™ã‚Œã°ä»»æ„ã®é–“éš”ã®ç ´ç·šã‚’æç”»ã™ã‚‹äº‹ãŒå¯èƒ½ã§ã™ã€‚ CSS3を使用ã™ã‚‹ã®ã§å¯¾å¿œãƒ–ラウザãŒã¡ã‚‡ã£ã¨ç‹ããªã‚Šã¾ã™ãŒ 1 2 ã€ç”»åƒã‚’用æ„ã™ã‚‹ã®ã¨ãらã¹ã¦ç·šåˆ†ã‚„é–“éš”ã®èª¿æ•´ã‚‚容易ã«ãªã‚Šã¾ã™ã—ã€Retinaディスプレイã«ã‚‚対応ã™ã‚‹äº‹ã‚’考ãˆãŸã‚‰ï¼ˆå¥‡æ•°ã®ç ´ç·šã‚’使用ã™ã‚‹å ´åˆãªã©ï¼‰2種類ã®ç”»åƒã‚’用æ„ã™ã‚‹æ‰‹é–“ãŒçœã‘ã¾ã™ã®ã§CSSã§æç”»ã™ã‚‹æ–¹ãŒæ¥½ãƒãƒ³ã§ã™ã€‚ æ‰‹é †ã‚„ã‚Šæ–¹ã¯ä¸‹è¨˜ã®4ã¤ã®æŒ‡å®šã‚’ã™ã‚Œã°è‰¯ã„ã ã‘ã§ã™ã€‚ ç ´ç·šã®éƒ¨åˆ†ã¯background-imageを使用ã—ã¦èƒŒæ™¯ç”»åƒã¨ã—ã¦æç”»ã—ã¾ã™ç¸žæ¨¡æ§˜ã¯linear-gradientを使用ã—ã¦ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã®æ¿ƒæ·¡ã§è¡¨ç¾ã—
[CSS]シャドウã¨ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’å·§ã¿ã«ä½¿ã£ãŸã‹ã‚ã„らã—ã„テã‚ストエフェクト -Milky Effect
テã‚ストã«text-shadowã€èƒŒæ™¯ã«ç¾Žã—ã„linear-gradientを効果的ã«ä½¿ã„ã€ã‹ã‚ã„らã—ã„エフェクトã«ä»•ä¸Šã’ãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’紹介ã—ã¾ã™ã€‚ Milky Font Effect 実装ã¯ç°¡å˜ã§ã€ã‚³ãƒ”ペã§åˆ©ç”¨ã§ãã¾ã™ã€‚ HTML pè¦ç´ ãªã©ã«ã€classã‚’æ·»ãˆã¦ãŠãã¾ã™ã€‚ <p class="milky">美ã—ã„日本語</p> CSS エフェクトã®å¤§åˆ‡ãªãƒã‚¤ãƒ³ãƒˆã¯ã€Œtext-shadowã€ã¨ã€Œbackgroundã€ã€ã‚«ãƒ©ãƒ¼ã‚’変更ã—ã¦ã‚‚é¢ç™½ãã†ã§ã™ã。 .milky { font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;; text-transform: uppercase; display: block; font-size: 72px; color: #f1ebe5; text
[CSS]楽ã—ã„å‹•ããŒæº€è¼‰ï¼ãƒœã‚¿ãƒ³ã‚„ç”»åƒç”¨ã®40種類以上ã®ãƒ›ãƒãƒ¼ã‚¨ãƒ•ã‚§ã‚¯ãƒˆãŒã¾ã¨ã‚られãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ -Hover.css
ボタンやãƒã‚´ã‚„ç”»åƒã«classã‚’åŠ ãˆã‚‹ã ã‘ã§ç°¡å˜ã«åˆ©ç”¨ã§ãるホãƒãƒ¼ã‚¨ãƒ•ã‚§ã‚¯ãƒˆãŒã¾ã¨ã‚られãŸã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆï¼ˆSASSも有り）を紹介ã—ã¾ã™ã€‚ 40種類以上ã®CSS3アニメーションã¯ã€è¦‹ã¦ã‚‹ã ã‘ã§ã‚‚楽ã—ã„ã§ã™ã€‚ Hover.css Hover.css -GitHub Hover.cssã®ä½¿ã„æ–¹ Hover.cssã®ãƒ‡ãƒ¢ Hover.cssã®ä½¿ã„æ–¹ 使ã„æ–¹ã¯éžå¸¸ã«ç°¡å˜ã§ã™ã€‚ Step 1: 外部ファイル 当スタイルシートを外部ファイルã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã ã‘を使用ã—ãŸã„å ´åˆã¯ã€ãã®ã‚¹ã‚¿ã‚¤ãƒ«ã ã‘コピペã™ã‚Œã°OK! Step 2: HTML ã‚ã¨ã¯ã€ãƒœã‚¿ãƒ³ã‚„ãƒã‚´ã‚„ç”»åƒã«classを指定ã™ã‚‹ã ã‘ã§ã€ã•ã¾ã–ã¾ãªãƒ›ãƒãƒ¼ã‚¨ãƒ•ã‚§ã‚¯ãƒˆãŒåˆ©ç”¨ã§ãã¾ã™ã€‚ <a class="
Google Fontsã§æ‰‹è»½ã«ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’ä»˜åŠ ã™ã‚‹æ–¹æ³• - NxWorld
以å‰ã‹ã‚‰ã‚ã£ãŸã¿ãŸã„ã§ã™ãŒã€çŸ¥ã‚‰ãªã‹ã£ãŸã®ã§å‚™å¿˜éŒ²å…¼ãã¦ç´¹ä»‹ã—ã¾ã™ã€‚ webフォントを手軽ã«å®Ÿè£…ã§ãる「Google Fontsã€ã§ã™ãŒã€font-family以外ã«ã‚‚CSS3を使用ã—ãŸæ•°ç¨®é¡žã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚‚用æ„ã•ã‚Œã¦ãŠã‚Šã€å°‘ã—ã®è¨˜è¿°ã§3D・アウトライン・シャドウã¨ã„ã£ãŸæ§˜ã€…ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’ä»˜åŠ ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
hail2u.net - Weblog - floatã§ä¸¦ã¹ãŸãƒªã‚¹ãƒˆã®ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚°
ページング・ナビゲーションãªã©ã§ãƒªã‚¹ãƒˆé …目をfloat: left;ã§æ¨ªã«ä¸¦ã¹ã‚‹ã¨ã„ã†ã®ã¯å‰²ã‚Šã¨è‰¯ã使ã‚れるã¨æ€ã†ã€‚並ã¹ã‚‹ã“ã¨è‡ªä½“ã¯ç‰¹ã«é›£ã—ã„ã‚ã‘ã§ã¯ãªã„ãŒã€ãã®ä¸¦ã¹ãŸãƒªã‚¹ãƒˆå…¨ä½“をセンタリングã—よã†ã¨ã™ã‚‹ã¨ã¡ã‚‡ã£ã¨ã‚„ã‚„ã“ã—ã„。display: inline-block;を使ã†æ‰‹æ³•ã‚„display: table;を使ã†æ‰‹æ³•ã¨ã„ã†é»’é”法的(ç§è¦‹)ãªæ‰‹æ³•ã§å®Ÿç¾å¯èƒ½ã ãŒã€position: relative;ã§ã‚‚ã„ã‘る。 ã‚„ã‚„ã“ã—ã„ç†ç”±ã¯ç°¡å˜ã§ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚°ã§ã‚ˆã使ã‚れるtext-align: center;ã‚„margin: 0 auto;ã¨ã„ã£ãŸæ‰‹æ³•ãŒé€šç”¨ã—ãªã„ã‹ã‚‰ã€‚検索ã™ã‚‹ã¨ã™ã出ã¦ãる比較的メジャーãªdisplayã§é ‘張る方法もã‚ã‹ã‚Šã‚„ã™ã„ã—悪ãã¯ãªã„ã®ã ã‘ã©ã€åŒä¸€ã‚»ãƒ¬ã‚¯ã‚¿å†…ã§è¤‡æ•°ã®displayを駆使ã™ã‚‹å¿…è¦ãŒã‚ã‚‹ã“ã¨ã‚„zoomマジックãªã©ã‚’併用ã™ã‚‹å¿…è¦ãŒã‚ã‚‹ã“ã¨ã‹ã‚‰ã‚³ãƒ¼ãƒ‰ãŒã‚„ã‚„ã“ã—ããªã‚‹
SpinKit - 凄ã„テクニック。CSS3を使ã£ãŸå„種スピナー MOONGIFT
CSS3ã ã‘ã§ä½œã‚Œã¡ã‚ƒã†ã®ãŒå‡„ã„ã§ã™ãï¼ å‡¦ç†ä¸ã«ãƒ¦ãƒ¼ã‚¶ãŒã‚¹ãƒˆãƒ¬ã‚¹ã‚’æ„Ÿã˜ãªã„よã†ã«è¡¨ç¤ºã•ã‚Œã‚‹ã‚¹ãƒ”ナー。最も簡å˜ãªã®ã¯ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³GIFを表示ã™ã‚‹ã“ã¨ã‹ãªã¨æ€ã„ã¾ã™ãŒã€èƒŒæ™¯è‰²ã‚’微妙ã«é•ã£ãŸã‚Šã€å¤§ãã•ã‚’é©åˆ‡ã«è€ƒãˆãªã„ã¨ã„ã‘ãªã„ãªã©ç”»åƒã ã‘ã«æ‰±ã„ãŒã¡ã‚‡ã£ã¨é¢å€’ã«æ„Ÿã˜ã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ ãã“ã§ä½¿ã£ã¦ã¿ãŸã„ã®ãŒSpinKitã§ã™ã€‚ãªã‚“ã¨CSS3ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’使ã£ã¦ã‚¹ãƒ”ナーを実ç¾ã—ã¦ã„ã¾ã™ã€‚ 一例。四角ã„パãƒãƒ«ãŒå›žè»¢ã—ã¾ã™ã€‚ 円ãŒæ¬¡ã€…ã«å¤§ãã•ã‚’変ãˆã¦ã„ãパターン。 棒ã®é•·ã•ãŒå¤‰ã‚ã£ã¦ã„ãパターン。 スクリーンショットã§ã¯åˆ†ã‹ã‚Šã¥ã‚‰ã„ã®ã§å‹•ç”»ã‚’撮影ã—ã¾ã—ãŸã€‚ 例ãˆã°æ£’ã®é•·ã•ãŒå¤‰ã‚るウェーブã®å ´åˆã€æ¬¡ã®ã‚ˆã†ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆè¨å®šã«ãªã‚Šã¾ã™ã€‚ .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon
IDEA * IDEA
ドットインストール代表ã®ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚¯ãƒ–ãƒã‚°
[CSS]スクリプト無ã—ã§ã“ã‚“ãªã«ã‹ã£ã“ã„ã„スライダーãŒå®Ÿè£…ã§ãã‚‹ã¨ã¯ï¼ -radio click through
ç”»åƒãŒå³ã‹ã‚‰ã‚¹ãƒ©ã‚¤ãƒ‰ã—ã€ãã‚Œã«ç¶šãコンテンツをé…ç½®ã—ãŸåŠé€æ˜Žã®ãƒ‘ãƒãƒ«ãŒè¿½ã„ã‹ã‘るよã†ã«ã‚¹ãƒ©ã‚¤ãƒ‰ã™ã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„スライダーを紹介ã—ã¾ã™ã€‚ 実装ã¯HTML/CSSã§ã€ã‚¹ã‚¯ãƒªãƒ—トã¯ç„¡ã—ã§ã™ã€‚ radio click through スライダーã®å‹•ä½œã®ä»•çµ„ã¿ã¯ãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã§ã€ãƒã‚§ãƒƒã‚¯ãŒå…¥ã£ãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„を表示ã—ã¾ã™ã€‚ 実装ã¯ã“ã‚“ãªæ„Ÿã˜ã€‚ HTML å„パãƒãƒ«ã¯ãƒªã‚¹ãƒˆè¦ç´ ã§ã€ãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã¨ãƒ©ãƒ™ãƒ«ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒã‚»ãƒƒãƒˆã«ãªã£ã¦ã„ã¾ã™ã€‚ <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出ã—</h
背景固定ã§ç¾Žã—ã„ブラーãŒã‹ã‹ã£ãŸåŠé€æ˜Žã®ãƒ‘ãƒãƒ«ã ã‘ãŒã‚¹ã‚¯ãƒãƒ¼ãƒ«ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ | コリス
レスãƒãƒ³ã‚·ãƒ–対応ã§èƒŒæ™¯ç”»åƒã¯å›ºå®šè¡¨ç¤ºã€ç¾Žã—ã„ブラーãŒã‹ã‹ã£ãŸåŠé€æ˜Žã®ãƒ‘ãƒãƒ«ã ã‘ãŒã‚¹ã‚¯ãƒãƒ¼ãƒ«ã™ã‚‹ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を実装ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’紹介ã—ã¾ã™ã€‚ 最低é™ã®è¦ç´ ã«ã—ãŸãƒ‡ãƒ¢ 実装ã¯ã€ã“ã‚“ãªæ„Ÿã˜ã«ãªã‚Šã¾ã™ã€‚ HTML パãƒãƒ«ã¯articleè¦ç´ ã§å®Ÿè£…ã—ã¾ã™ã€‚ä¸èº«ã¯ãƒ†ã‚ストã§ã‚‚ç”»åƒã§ã‚‚フォームã§ã‚‚何ã§ã‚‚OK。 <body> <article> <h1>åŠé€æ˜Žã®ç¾Žã—ã„パãƒãƒ«</h1> <p>æ´‹é…’ã¨ã„ãˆã°ã€èª°ã§ã‚‚最åˆã«æ€ã„æµ®ã‹ã¹ã‚‹ã®ãŒã‚¦ã‚¤ã‚¹ã‚ー。ã„ã‚ã°æ´‹é…’ã®ã‚·ãƒ³ãƒœãƒ«çš„ãªå˜åœ¨ãªã®ã ãŒã€è‹±èªžè¡¨è¨˜ãŒï¼»ä¸€èˆ¬ã«ã€”米〕ã§ã¯ Whiskey,〔英〕ã§ã¯ Whisky.ï¼½ã§ã‚ã‚‹ã“ã¨ã¯ã‚ã¾ã‚ŠçŸ¥ã‚‰ã‚Œã¦ã„ãªã„。米英両国ã§ã¯ã€ã“ã®ã‚¹ãƒšãƒ«ã®å·®ã§è‡ªå›½ç”£ã¨è¼¸å…¥å“を区別ã—ã¦ã„ã‚‹ã¨ã„ã†ã€‚ã‚ãŒå’Œè£½ã‚¦ã‚¤ã‚¹ã‚ーã®â€œWhiskyâ€ã¨ã„ã†è‹±å›½å¼è¡¨ç¤ºã¯ã€æ‰‹æœ¬ã«ã—ãŸã‚¹ã‚³ãƒƒãƒã®ãƒ•ã‚©ãƒ«ãƒ ã«å€£ã£ãŸã‚‚ã®ã§ã‚ã‚Šã€ãれ以上ã®æ„味ã¯ãªã„よã†ã 。カナ表記ã«ã—ã¦ã‚‚ã€ã”
[CSS]æ–‡å—ã«ã¡ã‚‡ã£ã¨ã‹ã‚ã„ã„ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’åŠ ãˆã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ -Opening Type
ç”»åƒã¯ä¸€åˆ‡ä½¿ç”¨ã›ãšã€ãã®æ–‡å—をホãƒãƒ¼ã™ã‚‹ã¨ãƒ‘ã‚¿ã£ã¨é–‹ãエフェクトを実装ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’紹介ã—ã¾ã™ã€‚ å˜ã«é–‹ãã ã‘ã§ãªãã€ã‚·ãƒ£ãƒ‰ã‚¦ã‚‚é–‹ãã«å¿œã˜ã¦å¤‰åŒ–ã—ã¦ã‚‹ã®ãŒã‚¹ã‚´ã‚¤ï¼ 日本語ã€ã—ã‹ã‚‚æ¼¢å—ã§ã‚‚OK 実装ã¯ã“ã‚“ãªæ„Ÿã˜ã«ãªã‚Šã¾ã™ã€‚ HTML æ–‡å—ã¯spanè¦ç´ ã§é…ç½®ã—ã€ä¸Šã«è¡¨ç¤ºã•ã‚Œã‚‹ãƒ›ãƒ¯ã‚¤ãƒˆã®æ–‡å—ã¯data-letterã«è¨˜è¿°ã—ã¾ã™ã€‚ <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語ã¯ã€ã“ã‚“ãªæ„Ÿã˜ã§ã™ã€‚ <div class="foo"> <span class="letter" data-lett
CSSã ã‘ã§ä½œã‚‹ã€Œå¤šéšŽå±¤ã€ãªãƒ‰ãƒãƒƒãƒ—ダウンメニュー
以å‰æ›¸ã„ãŸã€ŒCSSã ã‘ã§ä½œã‚‹å‹•ãã®ã‚るドãƒãƒƒãƒ—ダウンメニュー｜Webparkã€ã¨ã„ã†è¨˜äº‹ãŒæ¤œç´¢ã‚¨ãƒ³ã‚¸ãƒ³çµŒç”±ã§ãã“ãã“アクセスãŒã‚ã‚Šã€ã‚ˆã質å•ã‚’ã„ãŸã ãã¾ã™ã€‚ãã®ãªã‹ã§å¤šéšŽå±¤ã«ã§ããªã„ã®ã‹ã¨ã„ã†è³ªå•ãŒã‚ã£ãŸã®ã§ä½œã£ã¦ã¿ã¾ã—ãŸã€‚ IE7ã®å ´åˆæ“¬ä¼¼è¦ç´ ãŒä½¿ãˆã¾ã›ã‚“ã®ã§ã€æ¬¡ã®éšŽå±¤ãŒã‚ã‚‹ã“ã¨ã‚’示ã™çŸ¢å°ãŒè¡¨ç¤ºã•ã‚Œã¾ã›ã‚“。ドãƒãƒƒãƒ—ダウンã®æ©Ÿèƒ½ã¯IE7ã§ã‚‚å•é¡Œã‚ã‚Šã¾ã›ã‚“ã®ã§ã€IE7ã«å¯¾å¿œã•ã›ã‚‹å ´åˆã¯çŸ¢å°ã‚’ç”»åƒã«ã™ã‚‹ãªã©ã™ã‚Œã°ã‚ˆã„ã¨æ€ã„ã¾ã™ã€‚ ãã‚Œã§ã¯HTMLã‹ã‚‰ã„ãã¾ã™ã€‚ HTML ã‹ãªã‚Šé•·ããªã‚‹ã®ã§ãƒ¡ãƒ‹ãƒ¥ãƒ¼1ã®éƒ¨åˆ†ã ã‘載ã›ã¦ã„ã¾ã™ã€‚ <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">åメニュー</a> <ul> <li><a href="#">å«ãƒ¡ãƒ‹ãƒ¥ãƒ¼</a></li> <li><a href="#">å«ãƒ¡ãƒ‹ãƒ¥ãƒ¼</a>
[CSS]日本語ã«ã‚‚マッãƒã™ã‚‹ã€è¦‹å‡ºã—ã®æ–‡å—ã‚’ã‹ã£ã“よãã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ã¾ã¨ã‚ | コリス
This is a Headline ブラウザã¯Chrome, Safariã®Webkitç³»ã§ã”覧ãã ã•ã„。 å„スタイルã¨ã¨ã‚‚ã«ã€ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’紹介ã—ã¾ã™ã€‚ ã¨ãã®å‰ã«ã€HTMLã¯ã”ãシンプルã§ã™ã€‚ <h1 class="vintage">美ã—ã„日本語</h1> ヴィンテージ風ã«ã‚¹ã‚¿ã‚¤ãƒ«ã—ã¾ã™ã€‚ .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit
CSS3アニメーションãŒã„ã„æ„Ÿã˜ã®ãƒ¢ãƒ¼ãƒ€ãƒ«ãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…jQueryプラグイン「Customboxã€:phpspot開発日誌
jQuery Custombox :: dixso.net CSS3アニメーションãŒã„ã„æ„Ÿã˜ã®ãƒ¢ãƒ¼ãƒ€ãƒ«ãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…jQueryプラグイン「Custombox〠モーダルダイアãƒã‚°è‡ªä½“ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã¯è‡³ã£ã¦æ™®é€šãªã‚“ã§ã™ãŒã€å‡ºã¦ãã‚‹éš›ã®ã‚¨ãƒ•ã‚§ã‚¯ãƒˆãŒè±Šå¯Œã§ä¸€è¦‹ã®ä¾¡å€¤ã‚ã‚Šã§ã™ エフェクト以外ã«ã‚‚ã€ã‚¤ãƒ™ãƒ³ãƒˆãƒãƒ³ãƒ‰ãƒ©ã®è¨å®šã‚„ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºé …ç›®ãŒè±Šå¯Œã§ä½¿ã„ã‚„ã™ãã†ã§ã™ 関連エントリ シンプル＆軽é‡ãªãƒ¢ãƒ¼ãƒ€ãƒ«ãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…jQueryプラグイン「portBox〠フラットã§ç¾Žã—ã„デザインã®ãƒ¢ãƒ¼ãƒ€ãƒ«ãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…ライブラリ「vex〠フラットã ã‘ã©ç«‹ä½“çš„ãªCSS3アニメーション付モーダルダイアãƒã‚°å®Ÿè£…デモ 何ã§ã‚‚埋ã‚è¾¼ã‚ã¦ã‚«ãƒƒã‚³ã„ã„モーダルダイアãƒã‚°å®Ÿè£…用jQueryプラグイン「Pop Easy〠フラットã§ã‚«ãƒƒã‚³ã„ã„モーダルダイアãƒã‚°å®Ÿè£…デモ
フラットã§ç¾Žã—ã„デザインã®ãƒ¢ãƒ¼ãƒ€ãƒ«ãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…ライブラリ「vexã€:phpspot開発日誌
vex フラットã§ç¾Žã—ã„デザインã®ãƒ¢ãƒ¼ãƒ€ãƒ«ãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…ライブラリ「vex〠次ã®ã‚ˆã†ãªãƒ•ãƒ©ãƒƒãƒˆãªãƒ€ã‚¤ã‚¢ãƒã‚°å®Ÿè£…ã«ä½¿ãˆã‚‹ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚フラットデザインらã—ã„色ã®ãƒ€ã‚¤ã‚¢ãƒã‚° 今ã»ã©ãƒ•ãƒ©ãƒƒãƒˆãƒ‡ã‚¶ã‚¤ãƒ³ãŒã¯ã‚„ã‚Šãªæ™‚期もãªã„ã¨æ€ã„ã¾ã™ãŒã€ï¼•å¹´å¾Œã¨ã‹ã¯ã©ã†ãªã£ã¦ã‚‹ã‚“ã§ã—ょã†ã。 関連エントリ Bootstrapベースã®ãƒ•ãƒ©ãƒƒãƒˆUI実装フレームワーク「Furatto〠ãƒã‚¤ã‚¯ã‚ªãƒªãƒ†ã‚£ãªã‚½ãƒ¼ã‚·ãƒ£ãƒ«å‘ã‘ã®ãƒ•ãƒ©ãƒƒãƒˆã‚¢ã‚¤ã‚³ãƒ³ã‚»ãƒƒãƒˆ 美ã—ã„フラットãªã‚¢ã‚¤ã‚³ãƒ³ãƒ•ã‚©ãƒ³ãƒˆã€ŒDripicons〠SEOã«é–¢é€£ã™ã‚‹ãƒ•ãƒ©ãƒƒãƒˆãªã‚¢ã‚¤ã‚³ãƒ³60個セット フラットã ã‘ã©å½±ã§ç«‹ä½“çš„ã«è¦‹ãˆã‚‹ãƒ•ãƒªãƒ¼ãªæ±Žç”¨ã‚¢ã‚¤ã‚³ãƒ³ã‚»ãƒƒãƒˆ フラットã ã‘ã©ç«‹ä½“çš„ãªCSS3アニメーション付モーダルダイアãƒã‚°å®Ÿè£…デモ
[JS]最近ã®ã‚¦ã‚§ãƒ–サイトã§è¦‹ã‹ã‘ã‚‹é¢ç™½ã„仕掛ã‘を実装ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—トã®ã¾ã¨ã‚
fullPage.js ãƒãƒ¼ãƒˆãƒ•ã‚©ãƒªã‚ªã‚„ä¼æ¥ã®ãƒ—ãƒãƒ¢ãƒ¼ã‚·ãƒ§ãƒ³ã§ã‚‚よã見ã‹ã‘ã‚‹1ページã§æ§‹æˆã•ã‚ŒãŸã‚µã‚¤ãƒˆã§ã€ãƒ•ãƒ«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã®åž‚直スクãƒãƒ¼ãƒ«ã€ãã—ã¦æ°´å¹³ã®ã‚¹ãƒ©ã‚¤ãƒ‰ã«ã‚‚対応ã—ãŸã‚¦ã‚§ãƒ–サイトを作るãŸã‚ã®ã‚¹ã‚¯ãƒªãƒ—ト。 ã“ã†ã„ã†ä½œã‚Šã¯ç‰¹ã«ã‚¿ãƒ–レットã§æ“作ãŒã—ã‚„ã™ã„ã§ã™ã。 FancyScroll.js スマフォやタブレットã®ã‚ˆã†ã«ãƒšãƒ¼ã‚¸ã®çµ‚ã‚ã‚Šã¾ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ãŸéš›ã«ãƒã‚¦ãƒ³ãƒ‰ã™ã‚‹ã®ã‚’ã¯ã˜ã‚ã€ã¡ã‚‡ã£ã¨é¢ç™½ã„ã•ã¾ã–ã¾ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’スクãƒãƒ¼ãƒ«ã«ä¸Žãˆã‚‹ã‚¹ã‚¯ãƒªãƒ—ト。
[CSS]コピペã§OKï¼ç”»åƒã®ãƒ›ãƒãƒ¼æ™‚用ã®ã‹ã£ã“ã„ã„æ–°ã—ã„エフェクトã®ã¾ã¨ã‚
HTML å„デモã®ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹HTMLã§ã™ã€‚ divè¦ç´ ã®classを変更ã—ã¦åˆ©ç”¨ã—ã¾ã™ã€‚ <div class="pic"> <img src="image.jpg"> </div> å„デモã§å…±é€šã§ä½¿ç”¨ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã§ã™ã€‚ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
[JS]Appleã®ãƒ—ãƒãƒ€ã‚¯ãƒˆãƒšãƒ¼ã‚¸ã®ã‚ˆã†ãª1ページã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を作æˆã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト -One Page Scroll
デモページ：3番目ã®ãƒ‘ãƒãƒ«ã‚’表示 å„パãƒãƒ«ã¸ã®ç›´ãƒªãƒ³ã‚¯ã‚„URL表示ã«ã‚‚対応ã—ã¦ã„ã¾ã™ã€‚ One Page Scrollã®ä½¿ã„æ–¹ Step 1: 外部ファイル head内ã«jquery.jsã¨å½“スクリプト・スタイルシートを外部ファイルã¨ã—ã¦è¨˜è¿°ã—ã¾ã™ã€‚ <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainã¯ã‚³ãƒ³ãƒ†ãƒŠã§ã€å„パãƒãƒ«ã¯se
ã¤ã„ã¤ã„押ã—ãŸããªã‚‹ã€CSS3を使ã£ãŸãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã®ãƒ‡ã‚¶ã‚¤ãƒ³
フォームã£ã¦ã‚ã¾ã‚Šä½¿ã†ã“ã¨ã‚‚ãªã„ã®ã§ã™ãŒã€CSS3を使ã£ã¦ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹ã¨ãªã‹ãªã‹é¢ç™½ã‹ã£ãŸã®ã§ã€ä»Šå›žã¯ãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã‚’使ã£ãŸã‚µãƒ³ãƒ—ルを紹介ã—ã¾ã™ã€‚ ã§ã¯ã‚µãƒ³ãƒ—ル１ã‹ã‚‰ã‚³ãƒ¼ãƒ‰ã‚’紹介ã—ã¦ã„ãã¾ã™ã€‚ サンプル１ 二択ã®ãƒ©ã‚¸ã‚ªãƒœãƒƒã‚¯ã‚¹ã§ã™ã€‚「ã¯ã„ã€ã‚’押ã—ãŸã¨ãã¨ã€ã€Œã„ã„ãˆã€ã‚’押ã—ãŸã¨ãã®è‰²ã‚’変ãˆã¦ã„ã¾ã™ã€‚ HTML ã§ã¯ã€HTMLã‹ã‚‰ã€‚ <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">ã¯ã„</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">ã„ã„ãˆ</label> </div> 特ã«å•é¡Œ
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
アイデアã®å®åº«ï¼CSS3を使ã£ãŸUI表ç¾ãƒ»ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯é›†
{{#tags}}- {{label}}
{{/tags}}