6 מגניב תמונה כיתובים עם CSS3

CSS3 הוא חזק מאוד. זה היה אמור להיות שאנחנו צריכים תמונות או חבורה של קודאליס JavaScript לעשות אפקט המעבר פשוטה. כיום אנו יכולים לעשות את אותו הדבר עם CSS3 בלבד.

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

• הדגמה
• הורד מקור

תמיכה בדפדפן

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

הדפדפנים הבאים כבר תומכים בהמרה ובמעבר:

• Internet Explorer 10+ (עדיין לא פורסם)
• אתר 6+
• Chrome 13+
• ספארי 3.2+
• אופרה 11+

עכשיו, נתחיל את המדריך.

מבנה HTML

יש לנו 6 תמונות; כל תמונה עם סגנון כיתוב שונה.

 
 
   
כיתוב פשוט
  
  
   
הכיתוב המלא
 
לורם ipsum dolor לשבת amet, consectetuer aditiscing elit, sed diam niamh nibh euismod tincidunt toreidunt loreore dolore מגנה aliquam erat volutpat.
  
  
   
דהייה הכיתוב
 
לורם ipsum dolor לשבת amet, consectetuer aditiscing elit, sed diam niamh nibh euismod tincidunt toreidunt loreore dolore מגנה aliquam erat volutpat.
  
  
   
שקופית הכיתוב
 
לורם ipsum dolor לשבת amet, consectetuer aditiscing elit, sed diam niamh nibh euismod tincidunt toreidunt loreore dolore מגנה aliquam erat volutpat.
  
  
 
   
זה לסובב כיתוב
 
לורם ipsum dolor לשבת amet, consectetuer aditiscing elit, sed diam niamh nibh euismod tincidunt toreidunt loreore dolore מגנה aliquam erat volutpat.
  
 
  
   
סגנון חופשי הכיתוב
 
לורם ipsum dolor לשבת amet, consectetuer aditiscing elit, sed diam niamh nibh euismod tincidunt toreidunt loreore dolore מגנה aliquam erat volutpat.
  
 
 

CSS בסיסי

לפני עיצוב כל רכיב, זה תמיד התחלה טובה כדי לאפס את כל המאפיינים באמצעות זה לאפס CSS ולתת להם את ערכי ברירת המחדל שלהם בסגנון, כך שכל הדפדפנים יעבד את אותה תוצאה (למעט אולי, IE6).

סגנונות יופרד file.css הקובץ, כך קובץ ה- HTML שלנו ייראה מסודר. עם זאת, אל תשכחו להוסיף סגנון קישור בתוך תג הכותרת כדי להחיל את כללי הסגנון בקובץ.

אישור, בואו להתחיל את הסגנון אלמנט, החל את התג html ואת העטיפה הראשית מזהה:

 html background-color: #eaeaea;  #mainwrapper font: 10pt normal Arial, sans-serif; גובה: אוטומטי; שוליים: 80px אוטומטי 0 אוטומטי; text-align: center; רוחב: 660px; 

סגנון תיבת תמונה

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

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

 #mainwrapper .box border: 5px solid #fff; הסמן: מצביע; גובה: 182px; צף: משמאל; שוליים: 5px; מקומות קרובים overflow: hidden; רוחב: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -Moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: מוחלט; משמאל: 0; -webkit- מעבר: כל 300ms הקלות; -מעבר המעבר: כל הקלות 300ms; -המעבר: כל 300ms הקלות; -MS המעבר: כל הקלות 300ms; מעבר: כל 300ms הקלות; 

הכיתוב סגנון משותף

הכיתוב יהיה כמה סגנונות משותפים וגם מעבר רכוש. במקום להשתמש במאפיין אטימות, אנו משתמשים במצב צבע RGBA עם 0.8 עבור ערוץ אלפא כדי להפוך את הכיתוב נראה שקוף מעט מבלי להשפיע על הטקסט בפנים.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0.8); תפקיד מוחלט צבע: #fff; z-index: 100; -webkit- מעבר: כל 300ms הקלות; -מעבר המעבר: כל הקלות 300ms; -המעבר: כל 300ms הקלות; -MS המעבר: כל הקלות 300ms; מעבר: כל 300ms הקלות; משמאל: 0; 

כיתוב 1

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

 #mainwrapper .box.simple caption height: 30px; רוחב: 200px; בלוק תצוגה; bottom: -30px; line-height: 25pt; text-align: center; 

כיתוב 2

הסוג השני יש את מלוא רוחב וגובה של מימד התמונה / תיבת (200x200px) ואת המעבר יהיה כמו אפקט דלת הזזה רק כי זה יהיה להחליק מלמעלה למטה.

 #mainwrapper .box .full-caption width: 170px; גובה: 170px; top: -200px; יישור טקסט: משמאל; ריפוד: 15px; 

הכיתוב 3

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

 #mainwrapper .box .fade-caption, #mainwrapper .box.scale-caption opacity: 0; רוחב: 170px; גובה: 170px; יישור טקסט: משמאל; ריפוד: 15px; 

כיתוב 4

הכיתוב הרביעי יגלוש משמאל לימין, ולכן תיקנו 200px משמאל (משמאל: 200px) כמיקומו ההתחלתי.

 ** הכיתוב 4: שקף ** / #mainwrapper .box .slide-caption width: 170px; גובה: 170px; יישור טקסט: משמאל; ריפוד: 15px; משמאל: 200px; 

כיתוב 5

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

לכן, אנו מוסיפים תכונה המרה עם סיבוב -180 מעלות, אלא אם אתה מעדיף לסובב את המסך כדי לקרוא את הכיתוב.

 #mainwrapper # box-5.box .rotate-caption width: 170px; גובה: 170px; יישור טקסט: משמאל; ריפוד: 15px; top: 200px; -Moz-transform: סובב (-180 מעלות); -O-transform: לסובב (-180deg); -webkit-transform: לסובב (-180deg); להפוך: לסובב (-180deg);  #mainwrapper .box .rotate width: 200px; גובה: 400px; -webkit- מעבר: כל 300ms הקלות; -מעבר המעבר: כל הקלות 300ms; -המעבר: כל 300ms הקלות; -MS המעבר: כל הקלות 300ms; מעבר: כל 300ms הקלות; 

כיתוב 6

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

הטקסט יופיע לאחר המעבר המעבר. לכן, אנו מוסיפים עיכוב מעבר על הטקסט, במקרה זה תג ה- h3 ו- p.

 #mainwrapper .box.scale-caption h3, #mainwrapper .box. scale-ca p (מיקום: יחסית; משמאל: -200px; רוחב: 170px; -webkit- מעבר: כל 300ms הקלות; -מעבר המעבר: כל הקלות 300ms; -המעבר: כל 300ms הקלות; -MS המעבר: כל הקלות 300ms; מעבר: כל 300ms הקלות;  #mainwrapper .box.scale-hption h3 -webkit-transfer-delay: 300ms; -Moz-transfer-delay: 300ms; -O-transfer-delay: 300ms; -ms-transfer-delay: 300ms; עיכוב מעבר: 300ms;  #mainwrapper .box.scale כיתוב p -webkit-transfer-delay: 500ms; -Moz-transfer-delay: 500ms; -O-transfer-delay: 500ms; -ms-transfer-delay: 500ms; עיכוב מעבר: 500ms; 

בואו נעביר אותם

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

הכיתוב התנהגות 1: הצג.

עבור הכיתוב הראשון, אנחנו רוצים שזה יופיע (מלמטה) כאשר אנו מרחפים מעל הקופסה. כדי לענות על מהלך זה אנו משתמשים במאפיין transform, וקוד ה- CSS להלן מספר את הכיתוב כדי להזיז 100% ממשקלו לראש הדף.

 #mainwrapper .box: רחף .simple-caption -moz-transform: translateY (-100%); -O-transform: translateY (-100%); -webkit-transform: translateY (-100%); שנה: translateY (-100%); 

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

התנהגות הכיתוב 2: להזיז אותו.

לעומת זאת, הכיתוב השני ינוע מלמעלה. אז, יהיה לנו ערך חיובי עבור לתרגם.

 #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -O-transform: translateY (100%); -webkit-transform: translateY (100%); שנה: מתרגם (100%);  

התנהגות הכיתוב 3: דהייה.

הכיתוב השלישי הוא למעשה הקל ביותר. כאשר התיבה נמצאת על הסמן, אטימות הכיתוב תהפוך ל -1, מה שהופך אותה לעין, ומאחר שהוספנו מאפיין מעבר בכיתוב הכיתוב, המעבר צריך לפעול בצורה חלקה.

 #mainwrapper .box: רחף .fade-caption opacity: 1; 

התנהגות הכיתוב 4: החלק אותו שמאלה.

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

קוד CSS להלן מציין שכאשר אנו מרחפים מעל התיבה, הכיתוב יחליק 100% מהרוחב שלו שמאלה. שימו לב שאנו משתמשים כעת ב- translateX, מכיוון שאנו רוצים שהשקופית תזוז אופקית מימין לשמאל.

 #mainwrapper .box: רחף .slide-caption background-color: rgba (0,0,0,1)! חשוב; -Moz-transform: translateX (-100%); -O-transform: translateX (-100%); -webkit-transform: translateX (-100%); אטימות: 1; transform: translateX (-100%); 

כאשר אנו מרחפים מעל התיבה, התמונה תחליק שמאלה.

 #mainwrapper .box: רחף img # image-4 -moz-transform: translateX (-100%); -O-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);  

התנהגות הכיתוב 5: סובב אותו.

הכיתוב הזה שונה מהשאר, כיוון שהוא לא ינוע מימין או משמאל, אלא יסתובב. כאשר התיבה נמצאת על הסמן, ה- div המכיל את התמונה ואת הכיתוב יסתובב -180 נגד כיוון השעון מסתיר את התמונה ויציג את הכיתוב.

 / ** סובב הכיתוב: התנהגות בריחוף ** / #mainwrapper .box: רחף .rotate background-color: rgba (0,0,0,1)! חשוב; -Moz-transform: סובב (-180 מעלות); -O-transform: לסובב (-180deg); -webkit-transform: לסובב (-180deg); להפוך: לסובב (-180deg);  

התנהגות כיתוב 6: קנה מידה זה.

הכיתוב הזה ישלב מספר אפקטים של שינוי. כאשר התיבה נמצאת על הסמן, התמונה תתרחב עד 140% (1.4) מהמאפיין הראשוני שלה.

 #mainwrapper .box: hover # image-6 -moz-transform: קנה מידה (1.4); -המרה: סולם (1.4); -webkit-transform: סולם (1.4); צורה: סולם (1.4); 

ואם ראית את ה- CSS מעל כיתוב 6 הכותרת, יש לנו מוסתר את הטקסט שמאלה על ידי 200px. קוד CSS זה אומר לטקסט לעבור למצב ההתחלתי שלהם. לכן, הטקסט יחליק פנימה מצד שמאל לימין בו זמנית.

 #mainwrapper .box: רחף. scale-caption h3, #mainwrapper .box: רחף. scale-ca p -moz-transform: translateX (200px); -O-transform: translateX (200px); -webkit-transform: translateX (200px); להפוך: translateX (200px);  

• הדגמה
• הורד מקור

סיכום

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

נקודות זכות

תמונות ממוזערות של התמונה במדריך נלקחות מהאתרים הבאים (צילום מסך):

• ספר בנפרד
• ארכידוכס
• בלוג
• הונגקיאט
• חוות ברכה
• מארק אקו