דוגמא

מזער

ללא תמונות
קל לשימוש
מראה מקצועי

שוליים עגולים לאובייקט HTML

מזער

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

  1. העתיקו את מקטע הקוד שנמצא תחת הכותרת "קוד-מקור", והוסיפו אותו לעמוד HTML כרצונכם בתוך תגית <style>. 
  2. החליפו את שם התגית עליה מתבצע השינוי (בדוגמא הנוכחית השתמשנו ב-pre). ניתן ליישם על class ו-ID.
  3. הוסיפו את התגית המבוקשת לתוכן העמוד, והוסיפו מלל בתוך האובייקט.

 

קוד מקור

מזער
pre { width: 30%;margin: 10px auto; background: #222; padding: 30px; font-size: 22px; color: silver; text-shadow: 0px 2px 3px #171717; -webkit-box-shadow: 0px 2px 3px #555; -moz-box-shadow: 0px 2px 3px #555; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }