ç”»åƒã‚’一切使ã‚ãšã«ã€CSS3ã ã‘ã§ã‚¹ã‚¿ã‚¤ãƒªãƒƒã‚·ãƒ¥ãªå¹ã出ã—ã‚’ã¤ãã‚ã†ï¼ | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作ã“ã‚“ã«ã¡ã¯ã€ã¯ã‚„ã¡ã§ã™ã€‚ 今回ã¯css3を使ã£ã¦ç°¡å˜ã«ä½œã‚Œã‚‹å¹ã出ã—を紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ HTML 土å°ã¯ã“ã‚“ãªæ„Ÿã˜ <div id="textarea"> <div class="textinner"> <p>css3</p> </div> <!--/textinner--> <div class="triangle"></div> </div> <!--/textarea--> textinnerãŒãƒœãƒƒã‚¯ã‚¹éƒ¨åˆ†ã§triangleãŒçŸ¢å°éƒ¨åˆ†ã«ãªã‚Šã¾ã™ã€‚ ボックスを作る グラデーションã®èª¿æ•´ã‚’css上ã§ã‚„ã‚‹ã®ã¯é¢å€’ãªã®ã§ã€ã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ã§ã¡ã‚‡ã¡ã‚‡ã„ã£ã¨ã¤ãã£ã¡ã‚ƒã„ã¾ã™ã€‚ 今回使用ã—ãŸã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ã¯ã“ã¡ã‚‰ â–¡Grad3 http://grad3.ecoloniq.jp/ ブラウザ上ã§ã‚°ãƒ©ãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã¨ã‚·ãƒ£ãƒ‰ãƒ¼ã‚’ç´°ã‹ã指定ã§ãã‚‹ã®ã§ã™ã”ã便利ã§ã™ï¼¾ï¼¾ 自動生æˆã•ã‚ŒãŸã‚½ãƒ¼ã‚¹ã‚’ã¯ã£ã¤ã‘ã¾ã™ã€‚
WEBé“-WEB技術ã®è¾žæ›¸ãƒ»è§£èª¬ãƒ»ä½¿ç”¨ä¾‹
CSS Arrow Please - By Simon Hoejberg - @shojberg
CSSã§ç°¡å˜ã«å¹ã出ã—ã‚’ã¤ãã£ã¦ãれるジェãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ãŒä¾¿åˆ©ã™ãŽã‚‹ | Cappee Design
{{#tags}}- {{label}}
{{/tags}}