5 אפקטים מגניבים של CSS3 שתראו יותר מהם

פרסומת

CSS3 (בשילוב עם הכוח של HTML5) נתמך במהירות על ידי כל הדפדפנים העיקריים (לקרוא - כל דבר פרט ל- Internet Explorer), כך שאני חשבתי שעכשיו זה זמן טוב לראות כמה מהאפקטים של CSS המגניבים שאנו יכולים להשיג בעזרת הכוח של הדפדפן שלך וקצת קוד CSS. אתה אמור להיות מסוגל לראות את כל האפקטים שמודגמים במאמר זה אם אתה משתמש בדפדפן Chrome, Safari או Firefox האחרון.

ראשית - מה זה CSS?

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

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

פינות מעוגלות

הקוד לפינות מעוגלות ממש קל:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -Webkit-border-radius: 20px; / * Saf3-4, iOS 1+, אנדרואיד 1.5+ * / רדיוס גבול: 20px; / * אופרה 10.5, IE9, Saf5, Chrome, FF4 * /}

צל טקסט

הנה הקוד לכמה צלליות טקסט:

.box_textshadow {text-צל: 1 פיקסלים 1 פיקסלים 3 פיקסלים # 888; / * FF3.5 +, אופרה 9+, Saf1 +, Chrome * / }

שיפועים

הנה הקוד עבור מעבר צבעי CSS:

.box_gradient {רקע צבע: # 3f9fe3; תמונת רקע: -moz-linear-gradient (למעלה, # 3f9fe3, # white); / * FF3.6 * / רקע: -moz-linear-gradient (למעלה, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / רקע-תמונה: -ms-linear-gradient (למעלה, # 3f9fe3, # white); / * IE10 * / רקע-תמונה: -ליניארי-שיפוע (למעלה, # 3f9fe3, # לבן); / * אופרה 11.10+ * / רקע-תמונה: -webkit-gradient (ליניארי, שמאל למעלה, שמאל תחתון, מ- (# 3f9fe3), ל- (# לבן)); / * Saf4 +, Chrome * / רקע תמונה: -ווב-ערכת-לינארית-שיפוע (למעלה, # 3f9fe3, # לבן); / * Chrome 10+, Saf5.1 + * / רקע רקע: מעבר ליניארי (למעלה, # 3f9fe3, # לבן); פילטר: פרוג'יד: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# לבן'); / * IE6 – IE9 * / }

סיבוב

הנה הקוד לסיבוב משהו:

.box_rotate {-moz-transform: לסובב (7.5 מעלות); / * FF3.5 + * / -o-transform: לסובב (7.5 מעלות); / * אופרה 10.5 * / -webkit-transform: לסובב (7.5 מעלות); / * Saf3.1 +, Chrome * / -ms-transform: לסובב (7.5 מעלות); / * IE9 * / להפוך: להסתובב (7.5 מעלות); פילטר: פרוג'יד: DXImageTransform. מיקרוסופט. מטריקס (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'auto expand'); זום: 1; }

אנימציה

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

.box_transition {-moz-מעבר: כל 0.5s להקל; / * FF4 + * / -o-מעבר: כל 0.5s להקל; / * אופרה 10.5+ * / -webkit-מעבר: כל ה- 0.5s להקל; / * Saf3.2 +, Chrome * / -ms-מעבר: כל 0.5 שניות להקל; / * IE10? * / מעבר: כל 0.5s להקל; } 

אי התאמה בין דפדפנים

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

סיכום

האינטרנט הולך להיות הרבה יותר מרגש עם הרחבות CSS3 ו- HTML5 החדשות. אם כן, אנו הולכים לראות עוד התפשטות של טקסט מהבהב ויחס גבוה של whiz-bang לתוכן אמיתי (בדיוק כמו שעשינו כאשר GIF מונפשים "התגלו" תחילה) אך בטווח הרחוק נלמד כיצד להשתמש בכלים של CSS3 כדי להפוך את האינטרנט למעניין יותר ממשקים. והיי, אתה תמיד יכול לכבות את הכל!

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