הרשם | שאלות ותשובות | רשימת חברים | לוח שנה | הודעות מהיום | חיפוש |
|
|
כלים לאשכול | תצורת הצגה |
23-10-11, 01:54 | # 1 |
חסום
|
CSS | פתרון למקודדים למסגרת מעוגלת
שלום לכולם, לאחרונה נתקלתי בעיצובים שנדרשו מסגרת מעוגלת לקוביית 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'); } מה הקץ, יש לעלות את הקובץ 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, כרום, פיירפוקס תגידו לי עם חוץ מזה זה עובד ואני יוסיף. |
23-10-11, 01:59 | # 2 |
חבר על
|
כל הכבוד על היוזמה אך לדעתי העניין מסובך יתר על המדיה.
אפשר לחלק את הbox ל3. 1 - חלק עליון עם רקע של תמונה - עגול. 2 - חלק הפנימי של הטקסט עם רקע של תמונה - רגיל. 2 - חלק תחתון עם רקע של תמונה - עגול. פשוט, איכותי. נקי.
__________________
SDesigner.co.il - עיצוב ובניית אתרים ופורומים מבוססי phpBB, מוזמנים להיכנס לאתר החדש VerySimple.co.il - בניית מערכות CMS בהתאמה אישית. מחפשים אחסון אתרים אמין וזול? |
23-10-11, 02:06 | # 3 | |
חסום
|
ציטוט:
מה יותר פשוט מדיב אחד שאתה קובע הכל עליו. מה שתה בעצם אומר, שעדיף 3 תמונות + 3 דיבים על דיב 1 וקובץ 1 שלא מזיק לאיש. ושלא נדבר על זה, שזה יכול להיות גם מסגרת לתמונה. Last edited by Skfir; 23-10-11 at 02:23.. |
|
23-10-11, 04:40 | # 4 |
הוסטסניון
|
|
23-10-11, 08:46 | # 5 |
חבר על
|
הפוך, עדיף השיטה שהוא נתן פה מאשר 3 DIVים ו-3 תמונות.
יש גם את הסקריפט JQUERY CORNER, אבל אולי שלך יותר שימושי לפעמים... אני אבדוק אותו מתישהו, תודה! |
23-10-11, 11:28 | # 7 |
חסום
|
יש אפשרות גם לערוך את הקופסא עצמה בקלות וביעילות מבלי ידע בפוטושופ
|
23-10-11, 15:22 | # 8 |
חבר וותיק
|
עדיף את הקוד שלו מאשר להתעסק עם תמונות רגילות ועגולות..
תודה לפותח הדיון
__________________
פנוי לעבודה כמתכנת WEB - למידע נוסף: ליאור אמסלם. בניית אתרים באינטרנט - בלוג על בניית אתרים באינטרנט עם טיפים, מאמרים, מדריכי תכנות ועוד. משחקים אתר משחקים |
23-10-11, 20:44 | # 9 | ||
מנהל פורום, עסק רשום
|
ציטוט:
ציטוט:
בחצי השנה האחרונה אני משתמש הרבה ב-css3 לכל הדברים האלה. העיצובים יוצאים מרהיבים, הפיתוח קל יותר ותחזוקת הקוד לאורך זמן דורשת פחות זמן. מה גם שהמגמה בדפדפנים היא לתמוך ב-css3, כך שאין טעם "להתקע" איתו בגלל דפדפנים מיושנים כמו IE7/8. דוגמאות לשני עיצובים שהכנתי לאחרונה תוך שימוש ב-PIE.HTC: yyaeish.exa.co.il http://zaaron.co.il/ הממלצה החמה שלי לכל מי שעוסק בכתיבת HTML/CSS היא לאמץ בחום את CSS3. |
||
23-10-11, 23:09 | # 10 | |
עסק רשום [?]
|
ציטוט:
|
|
חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים) | |
|
|