紙を折ã£ãŸã‚ˆã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’実装ã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ« | コリス画åƒã‚’使用ã›ãšã«ã€ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã§ç´™ã‚’折ã£ãŸã‚ˆã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’矩形ã®è§’ã«é©ç”¨ã™ã‚‹ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ«ã‚’紹介ã—ã¾ã™ã€‚ Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザã¯CSS3ã¨:beforeç–‘ä¼¼è¦ç´ を使用ã—ã¦ã„ã‚‹ãŸã‚ã€Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+ã§ã™ã€‚ デモページ 紙を折ã£ãŸã‚ˆã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã®å®Ÿè£… 紙を折ã£ãŸã‚ˆã†ãªã‚¨ãƒ•ã‚§ã‚¯ãƒˆã¯ã€å…¨éƒ¨ã§4種類ã‚ã‚Šã¾ã™ã€‚ HTML HTMLã¯divè¦ç´ を使用ã™ã‚‹ã ã‘ã§ã€classåを変更ã™ã‚‹ã ã‘ã§ã™ã€‚ <div class="note"> コンテンツ </div> é©ç”¨ã™ã‚‹classã¯ã€Œnoteã€ã§ã™ã€‚ å…¨ã¦ã®ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã§ã™ã€‚ .note { position:relative; width:480px; padding:1em 1
Photoshopã®ã‚·ã‚§ã‚¤ãƒ—ツールã§ã‚ªãƒ–ジェクトã®è¼ªéƒã‚’ãã£ãã‚Šã•ã›ã‚‹æ–¹æ³•
{{#tags}}- {{label}}
{{/tags}}