מדריך CSS לשימוש בשכבות (layers)

עיצוב בשכבות בעזרת התכונה z-index

התכונה z-index מאפשרת לנו לגרום לאלמנטים בדף ה - HTML שלנו להיראות מעל או מתחת לאלמנטים אחרים הנמצאים במיקום חופף. דוגמה לעבודה בשכבות ניתן לראות באיור הבא:

Design with Layers with the help of CSS

כדי ליצור את האפקט המתואר באיור שלמעלה כל שעלינו לעשות הוא להעניק בעזרת התכונה z-index לשכבה שאנו רוצים שתהיה השכבה העליונה ערך  גבוה יותר מן הערך שנעניק לתכונה זו עבור השכבה התחתונה. להלן דוגמת הקוד שבעזרתה נוצר האיור שלמעלה:

<p style="position:relative; font-size:100px; z-index:2;">שכבה 1</p>
<p style="position:relative; top:-190; left:5; color:red; font-size:100px; z-index:1">שכבה 2</p>
תכונה ערכים הסבר
z-index auto הערך המתקבל נוצר באופן אוטומטי על ידי הדפדפן.
inherit
האלמנט יורש את ערכו מהאלמנט שבתוכו הוא מקנן.
number הערך המספרי של השכבה. שכבה בעלת ערך גבוה יותר תהיה מעל שכבה
 בעלת ערך נמוך יותר. ניתן להשתמש במספרים שליליים.

להלן דוגמת קוד להמחשת אופן השימוש בתכונה z-index:

<div style="position:relative; font-size:80px; z-index: 2;">


יצירת אפקט של טקסט תלת ממדי בעזרת שכבות

3D text with CSS

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


<p style="position:relative; font-size:100px; z-index:2;">3D Text</p>
<p style="position:relative; top:-215; left:5; color:gray; font-size:100px; z-index:1">3D Text</p>

   


הרעיון מאחורי הקוד שלמעלה הוא להצמיד זה לזה שתי פסקאות ובהן טקסט זהה בעל צבעים שונים באופן כזה שאחת הפסקאות תמוקם מעט מתחת לפסקה השנייה. את אפקסט השכבות אנו משיגים, כאמור, בעזרת התכונה z-index ואילו את השוני בצבעים בעזרת התכונה color. כמו כן, בדוגמה שלמעלה בחרנו להשתמש בתכונה position: relative אולם יכולנו גם להשתמש ב - absolute position.


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש