css3 התענוג של העולם החדש…

1- הבוררים:

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

.center {
text-align: center;
}

וההסבר – נקודה לפני המילה מאפיינת את הבורר קלס.
השם הנבחר center נבחר כי רציתי למרכז את התוכן . לכן בחרתי שם שיהיה קשור ויזכיר לי מה רציתי לעשות כשארצה לחזור שוב ושוב על הסטייל הממורכז.
חשוב !!! זכרו – הסטייל לא יוחל על האלמנט אם לא נסמן אותו וניקבע עבורו להיות כך.

בורר ה #ID
זהו בורר שיכול להיות פעיל פעם אחת בלבד בדף.

#wapper
{ position:relative;
width:960px;
height:1020px;
margin-left:auto;
margin-right:auto;
}

שימו לב- הסולמית מאפיינת את הבורר id, השם כמו קודם כדאי שיהיה קרוב , דומה או מתאר את מה נרצה לעשות.. שיהיה קל למצוא אותו אחכ..:), את המאפיין הזה יקבל אלמנט שמופיע רק פעם אחת בדף. כמו למשל פה- ה warper הוא העוטף את התוכן כולו וככזה הוא נימצא רק פעם אחת בדף. יתר הצגת האיפיון רגילה ומוכרת.
חשוב !!! – גם פה החלת הסטייל לא נעשית מעצמה אלא כשנבחר את האלמנט ונסמן אותו ככזה.

בורר הטג – זהו בורר המשתמש בתגים עצמם. כלאמר , נוכל לאמר לתג ה h להיות כזה או אחר..
לא נצטרך לסמן אותו ולהחילו אלא ההחלה תהיה אוטומטית על כל מקום בו יש אלמנו עטוף בתג ה h – או כל תג אחר.
התג נראה כך-

body
{
font-size:13px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#333;
background-image: url(images/bg_body.png);
}

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

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

a {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #C60;
}
a:visited {
color: #CC0;
}
a:hover {
color: #960;
}
a:active {
color: #960;
}

טוב.. זה כבר פשוט לנו.. אבל מה יקרה כשנרצה עוד סט קישורים בדף? או יותר מאחד?? שהרי בדף רגיל יש תמיד את הקישורים שנימצאים בתפריט, קישורים שנימצאים בתוכן וקישורים שנימצאים בפוטר.. אילו לפחות 3 מצבי קישורים שנימצאים בכל דף ממוצע..:) לפעמים יש גם יותר… אז מה עושים??
בורר לקישור מורכב אמנם מ a אחריו: ואחריו מילה המציינת את מצב הקישור – רגיל, כזה שכבר היינו בו , במעבר עכבר ובזמן הלחיצה, אבל בעצם הם הגדרה אחת, חישבו עליה כמילה אחת..:)
כעת כשנרצה עוד סוג של קישור נחבר את הבורר הקיים עם קלס שיגדיר איזה קישור יראה אחרת. למשל-

a.topmenu:link {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #930;
text-decoration: none;
}

שימו לב למבנה – a.topmenu:link בין ה a לבין :link (נקודותיים והמילה לינק) נכניס קלס- שזה נקודה ושם למאפיין – במקרה הזה התפריט העליון שקראתי לו topmenu במילה אחת. בתוספת הזו היא קלס לכל דבר והיא יושבת בתוך תג הקישור וקובעת מאפיינים אחרים לקישור .
!!! אז איך נגיד לקישור שהוא כזה?? הפעם כן צריך יהיה לסמן את הקישור ולאמר לו שהוא כזה..:
השם אליו ניתייחס הוא שם הקלס שהוספנו להגדרה וזה יראה כך-

<a href="#" class="topmenu">קישור מורכב מיוחד
</a>

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

#wrapper #main_sec #side_pic img {
}

וזה מצביע על- התמונה שיושבת בתוך#side_pic שיושב בתוך #main_sec שיושב בתוך #wrapper… ממש הגדרה מדויקת למי הכוונה.. רק לזה ולא לאף אחד אחר.. ואז בתוך הסוגריים המסולסלים את ההגדרה כיצד נירצה שיראה..:)
פשוט לא?? אז נמשיך..:)

וכעת קצת משימוש בסטייל החדש..:)
בואו נציג תיבה ניסתרת – נימצאת במצב של תצוגה=כלום, ברגע שנעבור על קופסא אחרת או כל טריגר שניבחר.
למשל..

<div class="relativ">
<p>טריגר רלטיבי</p>
<div class="red">דיב אבסולוטי בתוך רלטיבי
<br>
בתוכו אפשר לשים תפריט <br>

.relativ:hover .red {
display: block;
}
</div>
</div>

בתוך תיבה שקראתי לה relativ על שם הפוזישן שלה..:) שמתי תיבה נוספת בשם red שזה יהיה צבעה, מיקומה יהיה אבסולוטי ובה אפשר לשים את התפריט שנירצה שיפתח.

הטריק הוא שהקופסא הראשונה – עליה נעבור כדי לפתוח את השניה תוגדר במיקום רלטיבי position: relative;
ואילו הקופסא הניתסרת תוגדר במיקום אבסולוטי (בתוך הדיב הרלטיבי) ובתצוגת none. כלאמר – לא להיות מוצגת.
הנה הסטייל הבסיסי..

<style type="text/css">
.relativ {
position: relative;
background-color: #CCC;
width: 200px;
height: 60px;
}

.red {
background-color: #C30;
height: 100px;
width: 200px;
display: none;
position: absolute;
}
</style>

כעת כדי להציג את הקופסא השניה אוסיף פקודת hover ןרראשונה , רווח והקלס של השניה, ובתצוגה אורה block
הנה הקוד במלואו

<style type="text/css">
.relativ {
position: relative;
background-color: #CCC;
width: 200px;
height: 60px;
}
.relativ:hover .red {
display: block;
}

.red {
background-color: #C30;
height: 100px;
width: 200px;
display: none;
position: absolute;
}
</style>

בהתחלה ואחכ במעבר העכבר נצוץ השניה תחתיה..
כמובן שניתן לסדר ולעצב את הקופסאות עוד ועוד.. אך זהו העקרון הבסיסי ליצירת תפריט ניפתח על בסיס css בלבד. והכל יחד..

<style type="text/css">
.relativ {
position: relative;
background-color: #CCC;
width: 200px;
height: 60px;
}
.relativ:hover .red {
display: block;
}

.red {
background-color: #C30;
height: 100px;
width: 200px;
display: none;
position: absolute;
}
</style>
</head>

<body>
<div class="relativ">
<p>טריגר רלטיבי</p>
<div class="red">דיב אבסולוטי בתוך רלטיבי
<br>
בתוכו אפשר לשים תפריט <br>

.relativ:hover .red {
display: block;
}
</div>
</div>

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


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

text 1 | text 2 | text 3

טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1 טקסט 1

טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2 טקסט 2

טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3 טקסט 3

והקוד??
דקה שלפני בואו נסביר מה אתם רואים..

לכל קטע טקסט יש id, כל קישור מקושר ל #id.. ממש כרגיל.. אלא מה?
בסטייל אנחנו נותנים כמו למצב מעבר עכבר = :hover מצב טרגט = :target
ובמצב הזה אנחנו בוחרים כיצד יראה הקטע אליו כיוונו..
במקרה שלנו – כל קטע יקבל צבע אחר כשנקיש על הקישור !
שימו היטב לב להבדלים הבאים –

מצב טרגט מאפשר הכוונת סטייל למקום אחר

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

<style type="text/css">
#p1:target {
background-color: #FC0;
}
#p1:hover {
background-color: #C00; /* ~~ זה מצב ההובר בו הפעולה היא על הקטע עצמו ~~ */
}
#p2:target {
background-color: #9F0;
}
#p3:target {
background-color: #96F;
}
</style>

וכעת קצת טריקים… חוקיים וחדשים…

ראשית שמרו לכם את הקישורים הבאים- הם גנרטורים לסטייל..
http://css3generator.com/

http://www.css3maker.com/

קצת הסבר על האתר בסרטון קצרצר..:

ובעקבותיו.. הנה ההסבר המלא- את הקוד שקיבלתם באתר יש לשים בחלק הסטייל המוגדר לאותו אלמנט עליו אתם רוצים את האפקט.

למשל – רוצים קופסא עם קצוות מעוגלים? – בסיס הקופסא יראה כך:

<style type="text/css">
.round {
background-color: #CC0;
height: 200px;
width: 300px;
}
</style>
</head>

<body>
<div class="round">קופסא ירוקה עם קצוות מעוגלים</div>

נראה –

לקופסא שרק החלק העליון שלה מעוגל-

background-color: #CC0;
height: 200px;
width: 300px;
-webkit-border-radius: 25px 25px 0px 0px;
border-radius: 25px 25px 0px 0px;
margin: 11px;
text-align: center;
}

וכך הלאה..

פשוט למדי… כנסו לאתר ושחקו עם הנתונים..

טרנזישן
מה זה בעצם?

ובכן.. זהו מעבר מסטייל אחד לאחר בצורה חלקה ונעימה.. כמו בפלש.. זוכרים? רק בלי פלש.. פה עובד רק css3/ לא כל הדפדפנים עדיין תומכים את הצפיה בטרנזישן.. אבל בעתיד זה יהיה חלק מהתקן.. אז שווה להשקיע ולנסות..:)
קדימה.. מה עושים?
אז ככה.. על הסטייל של האלמנט אנחנו מגדירים מה גודלו, צבעו וכו.. כל מה שנרצה שיהיה בו בהתחלה לפני השינוי. בנוסף נוסיף את פקודת הטרנזישן המתאימה לכל הדפדפנים וניקבע כיצד יהיה השינוי (שיהיה במעבר עכבר), למשל כך- שימו לב להערה בה מצויין לאיזה דפדפן השורה מתאימה – זה לידיעה בלבד ולא חובה להכניס לקוד.

div
{
width: 300px;
height: 300px;
background: red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

אחכ.. נציין למצב hover כיצד נרצה שיראה האלמנט במעבר העכבר.. למשל-

div:hover
{
width: 600px;
}כמו שאתם רואים במעבר העכבר רק גדל האלמנט ולא יותר.. הנה הדוגמה החיה-

div {
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}div:hover
{
width:300px;
}

בואו נדבר קצת על מה ואיך עושים בcss3, וכמו תמיד תזכורת קטנה..

את הבסיס לסטייל-שיט אפשר כמובן למצוא באתר ההדרכה בדף הסטייל .

ובכל זאת קצת תזכורת להתחלה..

• הבוררים
• פופאפ – הבסיס לתפריט ניפתח
• Target פעולה על האחר
• קצוות מעוגלים
• טקאנזישן
• וקצת טריקים… חוקיים וחדש