CSS | פתרון למקודדים למסגרת מעוגלת

[Skfir]

שלום לכולם, לאחרונה נתקלתי בעיצובים שנדרשו מסגרת מעוגלת לקוביית DIV ולכן הרצתי כמה בדיקות באינטרנט ומצאתי אפשרות ממש פשוטה שמתאימה את הקוביה לכל הדפדפנים.
ולא רק שזה div מעוגל אם שמים לדיב הזה רקע אז התמונה מתאימה את עצמה לפינות המעוגלת ואז נהיה לנו תמונה עם פינות מעוגלות.

שימו לב לדוגמא:

div.roundedCornersDivBgImage {
	width: 228px;
	height: 178px;
	background-repeat: no-repeat;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	border: 2px solid #59aee5;
	behavior: url('border-radius.htc');
}

כאן מה שנוצר לנו זה דיב בגודל 228X178 שאין לו רקע , הרקע שלו לבן. ונוצר לו מסגרת מעוגלת ברדיוס של 14px והמסגרת בצבע #59aee5 פשוט נכון?
מה הקץ, יש לעלות את הקובץ border-radius.htc לשרת שלכם.
זה בעצם קובץ script js שעושה שה webkit ו moz יותאמו גם לדפדפנים שלא תומכים בו כמו IE.

העלאתי לכם את הקובץ לכאן:
http://www.f2h.co.il/elfknokz4bc
תוכלו להוריד אל תדאגו לא וירוס.
זה תוכנו של הקובץ:

--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
	var curleft = curtop = 0;

	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}

	return({
		'x': curleft,
		'y': curtop
	});
}

function oncontentready(classID) {
  if (this.className.match(classID)) { return(false); }

	if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

	this.className = this.className.concat(' ', classID);
	var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
	                                this.currentStyle['-webkit-border-radius'] ||
	                                this.currentStyle['border-radius'] ||
	                                this.currentStyle['-khtml-border-radius']) /
	                       Math.min(this.offsetWidth, this.offsetHeight), 1);
	var fillColor = this.currentStyle.backgroundColor;
	var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
	var strokeColor = this.currentStyle.borderColor;
	var strokeWeight = parseInt(this.currentStyle.borderWidth);
	var stroked = 'true';
	if (isNaN(strokeWeight)) {
		strokeWeight = 0;
		strokeColor = fillColor;
		stroked = 'false';
	}

	this.style.background = 'transparent';
	this.style.borderColor = 'transparent';

	// Find which element provides position:relative for the target element (default to BODY)
	var el = this;
	var limit = 100, i = 0;
	while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
		el = el.parentElement;
		i++;
		if (i >= limit) { return(false); }
	}
	var el_zindex = parseInt(el.currentStyle.zIndex);
	if (isNaN(el_zindex)) { el_zindex = 0; }
	//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

	var rect_size = {
		'width': this.offsetWidth - strokeWeight,
		'height': this.offsetHeight - strokeWeight
	};
	var el_pos = findPos(el);
	var this_pos = findPos(this);
	this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
	this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

	var rect = document.createElement('v:roundrect');
	rect.arcsize = arcSize +'px';
	rect.strokecolor = strokeColor;
	rect.strokeWeight = strokeWeight +'px';
	rect.stroked = stroked;
	rect.style.display = 'block';
	rect.style.position = 'absolute';
	rect.style.top = this_pos.y +'px';
	rect.style.left = this_pos.x +'px';
	rect.style.width = rect_size.width +'px';
	rect.style.height = rect_size.height +'px';
	rect.style.antialias = true;
	rect.style.zIndex = el_zindex - 1;

	var fill = document.createElement('v:fill');
	fill.color = fillColor;
	fill.src = fillSrc;
	fill.type = 'tile';

	rect.appendChild(fill);
	el.appendChild(rect);

	var css = el.document.createStyleSheet();
	css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
	css.addRule("v\\:fill", "behavior: url(#default#VML)");

	isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
	// IE6 doesn't support transparent borders, use padding to offset original element
	if (isIE6 && (strokeWeight > 0)) {
		this.style.borderStyle = 'none';
		this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
		this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
	}

	if (typeof(window.rounded_elements) == 'undefined') {
		window.rounded_elements = new Array();

		if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
		window.onresize = window_resize;
	}
	this.element.vml = rect;
	window.rounded_elements.push(this.element);
}

function window_resize() {
	if (typeof(window.rounded_elements) == 'undefined') { return(false); }

	for (var i in window.rounded_elements) {
		var el = window.rounded_elements[i];

		var strokeWeight = parseInt(el.currentStyle.borderWidth);
		if (isNaN(strokeWeight)) { strokeWeight = 0; }

		var parent_pos = findPos(el.vml.parentNode);
		var pos = findPos(el);
		pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
		pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

		el.vml.style.top = pos.y +'px';
		el.vml.style.left = pos.x +'px';
	}

	if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>

נכון פשוט? קובץ אחד סידר לנו את האתר כולו.
תמונה של התוצר הסופי:


http://img577.imageshack.us/img577/4756/64220707.png

אפשר להוסיף במקום לדיב שלנו דבר כזה

background-image: url('קישור תמונה');

וזה ישים לנו תמונת תרקע לדיב שהפינות של התמונה יהיו המסגרת המעוגלת.

יש לציין שנוסה על IE8,IE9, כרום, פיירפוקס תגידו לי עם חוץ מזה זה עובד ואני יוסיף.

[Shlomi062]

כל הכבוד על היוזמה אך לדעתי העניין מסובך יתר על המדיה.

אפשר לחלק את הbox ל3.
1 - חלק עליון עם רקע של תמונה - עגול.
2 - חלק הפנימי של הטקסט עם רקע של תמונה - רגיל.
2 - חלק תחתון עם רקע של תמונה - עגול.

פשוט, איכותי. נקי.

[Skfir]

נכתב במקור על ידי Shlomi062

כל הכבוד על היוזמה אך לדעתי העניין מסובך יתר על המדיה.

אפשר לחלק את הbox ל3.
1 - חלק עליון עם רקע של תמונה - עגול.
2 - חלק הפנימי של הטקסט עם רקע של תמונה - רגיל.
2 - חלק תחתון עם רקע של תמונה - עגול.

פשוט, איכותי. נקי.

מה הסיבוך? לעלות את הקובץ לשרת?
מה יותר פשוט מדיב אחד שאתה קובע הכל עליו.

מה שתה בעצם אומר, שעדיף 3 תמונות + 3 דיבים על דיב 1 וקובץ 1 שלא מזיק לאיש.
ושלא נדבר על זה, שזה יכול להיות גם מסגרת לתמונה.

[syn]

נכתב במקור על ידי Shlomi062

כל הכבוד על היוזמה אך לדעתי העניין מסובך יתר על המדיה.

אפשר לחלק את הbox ל3.
1 - חלק עליון עם רקע של תמונה - עגול.
2 - חלק הפנימי של הטקסט עם רקע של תמונה - רגיל.
2 - חלק תחתון עם רקע של תמונה - עגול.

פשוט, איכותי. נקי.

מסכים איתך... אני גם הייתי עובד ככה.

[~The_Sultan~]

הפוך, עדיף השיטה שהוא נתן פה מאשר 3 DIVים ו-3 תמונות.
יש גם את הסקריפט JQUERY CORNER, אבל אולי שלך יותר שימושי לפעמים... אני אבדוק אותו מתישהו, תודה!

[Erez | TrustMedia.co.il]

יש גם את PIE שהוא כמו מה שהראת רק עם עוד אפשרויות (צל, גראדינט וכו')
וזה עדיף על 3 דיבים כי קודם כל זה קוד יותר קריא (לא 3 דיבים אחד בתוך השני), וזה גם יותר קל לכתוב, זמן טעינה יותר נמוך (לא צריך 3 תמונות)

[Skfir]

נכתב במקור על ידי Erez.info

יש גם את PIE שהוא כמו מה שהראת רק עם עוד אפשרויות (צל, גראדינט וכו')
וזה עדיף על 3 דיבים כי קודם כל זה קוד יותר קריא (לא 3 דיבים אחד בתוך השני), וזה גם יותר קל לכתוב, זמן טעינה יותר נמוך (לא צריך 3 תמונות)

יש אפשרות גם לערוך את הקופסא עצמה בקלות וביעילות מבלי ידע בפוטושופ

[satan]

עדיף את הקוד שלו מאשר להתעסק עם תמונות רגילות ועגולות..

תודה לפותח הדיון

[IgalSt]

נכתב במקור על ידי Erez.info

יש גם את PIE שהוא כמו מה שהראת רק עם עוד אפשרויות (צל, גראדינט וכו')
וזה עדיף על 3 דיבים כי קודם כל זה קוד יותר קריא (לא 3 דיבים אחד בתוך השני), וזה גם יותר קל לכתוב, זמן טעינה יותר נמוך (לא צריך 3 תמונות)

נכתב במקור על ידי Skfir

יש אפשרות גם לערוך את הקופסא עצמה בקלות וביעילות מבלי ידע בפוטושופ

נכתב במקור על ידי satan

עדיף את הקוד שלו מאשר להתעסק עם תמונות רגילות ועגולות..

תודה לפותח הדיון

צודקים בהחלט.
בחצי השנה האחרונה אני משתמש הרבה ב-css3 לכל הדברים האלה. העיצובים יוצאים מרהיבים, הפיתוח קל יותר ותחזוקת הקוד לאורך זמן דורשת פחות זמן.
מה גם שהמגמה בדפדפנים היא לתמוך ב-css3, כך שאין טעם "להתקע" איתו בגלל דפדפנים מיושנים כמו IE7/8.
דוגמאות לשני עיצובים שהכנתי לאחרונה תוך שימוש ב-PIE.HTC:
yyaeish.exa.co.il
http://zaaron.co.il/

הממלצה החמה שלי לכל מי שעוסק בכתיבת HTML/CSS היא לאמץ בחום את CSS3.

[Deagly]

נכתב במקור על ידי IgalSt

צודקים בהחלט.
בחצי השנה האחרונה אני משתמש הרבה ב-css3 לכל הדברים האלה. העיצובים יוצאים מרהיבים, הפיתוח קל יותר ותחזוקת הקוד לאורך זמן דורשת פחות זמן.
מה גם שהמגמה בדפדפנים היא לתמוך ב-css3, כך שאין טעם "להתקע" איתו בגלל דפדפנים מיושנים כמו IE7/8.
דוגמאות לשני עיצובים שהכנתי לאחרונה תוך שימוש ב-PIE.HTC:
yyaeish.exa.co.il
http://zaaron.co.il/

הממלצה החמה שלי לכל מי שעוסק בכתיבת HTML/CSS היא לאמץ בחום את CSS3.

מחזק.. הכלי Pie ממש מעולה ומאז שיצא לי להכיר אותו אני התחלתי להשתמש בו במקום ליצור תמונות לפינות מעוגלות, ואפילו במקרה שיש גרדיאנטים פשוטים... עובד מצויין עד כה!