GIGAZINE - ç”»åƒã‚’使ã‚ãšã€è§’ã«ã‚¢ãƒ³ãƒã‚¨ã‚¤ãƒªã‚¢ã‚¹ã‚’ã‹ã‘ã¦ä¸¸ãã™ã‚‹ã€ŒcurvyCornersã€
「curvyCornersã€ã¯ãƒ•ãƒªãƒ¼ã®JavaScriptã§ã€è§’ãŒä¸¸ã„コーナーをDIVè¦ç´ ã§ç°¡å˜ã«ä½œã‚‹ã“ã¨ãŒå¯èƒ½ã€‚特徴ã¯ç”»åƒã‚’使ã£ãŸã®ã¨åŒã˜ãらã„角ãŒãªã‚らã‹ã«ä¸¸ããªã‚‹ç‚¹ã¨ã€ã„ãŸã£ã¦åˆ©ç”¨ãŒç°¡å˜ãªç‚¹ã€‚ ã©ã‚Œãらã„丸ããªã‚‹ã®ã‹ã¨ã„ã†å®Ÿä¾‹ã¨ã‚³ãƒ¼ãƒ‰ã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã€è¨ç½®æ–¹æ³•ã¯ä»¥ä¸‹ã‚’å‚照。 例ãã®1ã€3ピクセルã®ç™½ã„ボーダーを使ã„ã€è§’ã¯åŠå¾„20ピクセルã§ä¸¸ããªã£ã¦ã¾ã™ 例ãã®2ã€å›ºå®šå¹…ã¨é«˜ã•ã§ç”»åƒã‚’固定ã—ã€è§’ã¯åŠå¾„20ピクセルã§ä¸¸ãã—ã¦ã„る例 ダウンãƒãƒ¼ãƒ‰ã¯ã“ã¡ã‚‰ã‹ã‚‰ 使ã„æ–¹ã¯ä»¥ä¸‹ã‚’å‚ç…§ http://www.curvycorners.net/ ã»ã¨ã‚“ã©ã®ãƒ¡ã‚¸ãƒ£ãƒ¼ãªãƒ–ラウザをサãƒãƒ¼ãƒˆã—ã¦ã„ã‚‹ã®ã§æ±Žç”¨æ€§ã‚‚高ãã€ä½¿ã„å‹æ‰‹ã‚‚ã„ã„æ„Ÿã˜ã§ã™ã€‚
GIGAZINE - CSSã§è§’ã‚’ã‚‚ã£ã¨ä¸¸ãã™ã‚‹æ–¹æ³•ã„ã‚ã„ã‚
「スライディングドアã€ã¨å‘¼ã¶æ–¹æ³•ã§å…¨ä½“をヘッダーã€ãƒœãƒ‡ã‚£ã€ãƒ•ãƒƒã‚¿ãƒ¼ã®3ã¤ã«åˆ†å‰²ã—ã¦ã€ã‚³ãƒ¼ãƒŠãƒ¼éƒ¨åˆ†ãªã©ã¯ã‚ªãƒ¼ãƒãƒ¼ãƒ¬ã‚¤ã¨ã‹ä½¿ã£ã¦ã¿ã¾ã—ょã†ã€ã¨ã„ã†æ–¹æ³•ã€‚ Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用ã—ã¦ã„るコードã¨ç”»åƒã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã¯ã“ã¡ã‚‰ã‹ã‚‰ http://www.schillmania.com/projects/dialog/dialog.zip ã¾ãŸã€ã“ã¡ã‚‰ã«é€éŽPNGを利用ã—ãŸãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚‚ã‚ã‚Šã¾ã™ã€‚ Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会ãŒå¤šã‹ã£ãŸã®ã§ã€ä»Šå¾Œã®ç‚ºã«è‰²ã€…æ•´ç†ã—ã¦ãŸã‚“ã§ã™ãŒã€å…¬é–‹ã—ã¦ãŠãã¾ã™ã€‚使ãˆãã†ã ã£ãŸã‚‰ã„ã˜ã£ã¦ä½¿ã£ã¦ãã ã•ã„。ä¸èº«ã®æ–‡æ›¸ã‚’書ãæ›ãˆã‚Œã°ä¸Šä¸‹å·¦å³ã¨å¯å¤‰ã™ã‚‹ã‚ˆã†ã«æŸ”軟ã«ãªã£ã¦ã„ã¾ã™ã€‚ã¾ãŸã€ä¸€éƒ¨PSDã‚‚åŒå°ã—ã¦ã¾ã™ã€‚ 0501curve.zip ä¸èº«ã¯ã“ã‚“ãªæ„Ÿã˜ã€‚ ベーシックãªã‚¿ã‚¤ãƒ— 01：å°ã•ç›®ãªè§’丸 02：大ãç›®ãªè§’丸 03：斜線ã®è§’丸（背景画åƒã‚’ループ） 04：ストライプã®è§’丸（背景画åƒã‚’ループ） 05：木模様ã®è§’丸（背景画åƒã‚’ループ） 06：リボンã®ã¤ã„ãŸè§’丸（背景画åƒã‚’固定） 4ã¤è§’ã‚’ã®å†…å´ã‚’é€éŽGIFã«ã—ã¦ã‚‹ã®ã§ã€å¤§æž ã®èƒŒæ™¯ã‚’変ãˆã‚Œã°ç™ºæƒ³æ¬¡ç¬¬ã§è‰²ã€…ã¨ä½¿ãˆã‚‹ã¨æ€ã„ã¾ã™ã€‚HTMLã¨CSSã¯å¤§ä½“ã“ã‚“ãªã‚“ã§ã™ã€‚divãŒå¤šã„ã®ãŒã¡ã‚‡ã£ã¨å«Œãªæ„Ÿã˜ã§ã™ãŒã€‚ã¯ã¦ãªå†…ã§ã¯spanã§ã‚„ã£ã¦ãŸã‚Šã‚‚ã—ã¾ã™ã€‚ HTML <div class="curve-01"> <div class="cu
Javascriptã§å‹•çš„ã«ã‚¢ãƒ³ãƒã‚¨ã‚¤ãƒªã‚¢ã‚¹ãªè§’丸をè¨å®šã™ã‚‹:phpspot開発日誌
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptã§æŒ‡å®šã®HTMLè¦ç´ ã‚’å‹•çš„ã«è§’丸デザインã«ã™ã‚‹æ–¹æ³•ã€ã§ç´¹ä»‹ã—ãŸNiftyCornersã§ã™ãŒã€ã“ã®ãƒšãƒ¼ã‚¸ã§ç´¹ä»‹ã•ã‚Œã¦ã„る方法を使ãˆã°ã€ã‚¢ãƒ³ãƒã‚¨ã‚¤ãƒªã‚¢ã‚¹ãªè§’丸をè¨å®šã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã‚‹ã‚ˆã†ã§ã™ã€‚ 使ã„æ–¹ã¯ã¡ã‚‡ã£ã¨å¤‰ã‚ã£ã¦ã€ Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); ã®ã‚ˆã†ã«ãªã£ã¦ã„ã¾ã™ã€‚ 第二引数ã¨ç¬¬äº”引数ãŒè¿½åŠ ã•ã‚Œã‚‹å½¢ã«ãªã£ã¦ã„ã¾ã™ã€‚
Spiffy Corners - Making anti-aliased rounded corners with CSS
Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff.
1
ãŠçŸ¥ã‚‰ã›
障害
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
caramel*vanilla » Blog Archive » 角丸ジェãƒãƒ¬ãƒ¼ã‚¿ãƒ¼ - Spiffy Box
{{#tags}}- {{label}}
{{/tags}}