Coding Kung-fu 35 גרפיקה מובנית טהורה עם CSS3

תסתכל על גרפיקה מתחת, מדהים Photoshop עובד נכון? לא, הם נוצרו על ידי CSS3. כן הם כן לחלוטין “ציור” על ידי CSS3! כאשר ראינו מספיק CSS3 אנימציות חשבנו את כל אלה CSS3 יכול לעשות כמו פוטנציאל פלאש רוצח, אבל אנחנו טועים. מפתחים אולי לא לספק עם הכיף של האנימציה, כך שוב, הם דוחפים את הגבולות של CSS3 לאתגר את התחום של עורך גרפי.

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

מומלץ מאוד להציג הדגמות אלה באמצעות הגרסה העדכנית ביותר של גרסת Safari או מפתח של Google Chrome. רוב הדגמות תומכות בגירסה העדכנית ביותר של Firefox ו- Google Chrome.

RSS Feed סמל

RSS Feed נבנה עם CSS3, באופן בלעדי מ Hongkiat! יחד עם הקישור מגיע הדרכה אשר למעשה אתה יכול ללמוד “לצייר” סמל הזנות RSS מבלי להשתמש אפילו בתמונה אחת. צור את נס CSS3 בידיים שלך!

Apple iMac

כן העיניים שלי גם לא יכול להאמין, אבל זה iMac “התאספו” רק עם CSS3.

מקלדת אפל

זה מקלדת אפל נבנה עם CSS3! לעזאזל, לחצני המקלדת ניתן אפילו ללחוץ.

איי פון אפל

אה, עוד דבר אחד: iPhoneCSS3.

פריחת הדובדבן

את awesomeness האמיתי של CSS3 היא כי ניתן להשתמש בו כדי לבנות משהו כולל צמחים ובעלי חיים!

כוס קפה

יום מעייף? בואו נשתה קפה CSS3, הטוב ביותר עם Safari / Google Chrome.

דורימון

זה דורימון מפורסם בדיקות תאימות CSS3. נסה את זה ב- Internet Explorer 8 או למטה ויש לי יום נחמד.

מיאו!

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

פטריות, Triforce, כדור Poké, קירבי

“להיות nerd, עשיתי כמה יצירות nerdy - פטריות מריו, Triforce, Pokéball, ואת קירבי. עבור אלה המשתמשים בדפדפנים דינוזאור, יש צילום מסך של מה זה אמור להיראות.”

חתול ניאן

“הוא מכיל 81 רכיבי DOM, 688 שורות של CSS טהור ופונקציית JavaScript אחת עבור אודיו לולאה. CSS שלי נכשל מבחן CSSLint ואני באמת גאה בזה.”

דפוסי

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

BonBon

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

סמלים של iOS

מדהים? כן. סמלים אלה בנויים על ידי פינות מעוגלות, צללים, גרדיאנטים, rgba, אלמנטים פסאודו, ו ממיר, בעזרת כלים מסוימים כגון כלים של westciv ו רדיוס הגבול.

מדיה חברתית סמלים

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

מדיה חברתית סמלים

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

מוזר

“מוזר הוא חבילת סמל חינם עשה רק ב- CSS. הוא נוצר עבור אתרים ויישומי אינטרנט התלויים בבקשות HTTP מועטות ככל האפשר, או שאין צורך להשתמש בהם כלל.”

GUI סמלים

84 סמלים פשוטים GUI באמצעות CSS בלבד ו- HTML סמנטי. זה עדיין נחשב “לא ייצור מוכן” סמלים, אבל הם נראים מאוד מבטיח.

סטיב ג'ובס

סטיב ג 'ובס הוא לא רק את הסמל של העידן הדיגיטלי, אלא גם את המנהיג אשר מאוד מקדם HTML5.

טוויטר Fail Whale

טוויטר לוויתן להיכשל לא להיכשל לך, למעט ב- Internet Explorer 8 או למטה.

umbrUI

ממשק משתמש אלמנטים אפשריים עם CSS3, וזה נראה ממש מלוטש!

לוגו של Adobe Photoshop

מחווה פוטושופ ללא Photoshop.

לוגו של Android

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

לוגו Apple

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

לוגו עטרי

לפני שנים, מי היה חושב לוגו Atari יהיה מחדש שנוצר באמצעות CSS3.

לוגו BP

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

Dribbble לוגו

אתר מפורסם המופעל על ידי המשתמש באתר הראווה של Dribbble מוצג באמצעות CSS3.

לוגו מג'נטו

הלוגו של מגנטו הוא לא קשה מדי לצייר אבל התוצאה נראית מקצועית.

לוגו של מקדונלדס

אני lovin 'CSS3!

צפצוף ציפור

פרופורציה מושלמת, קצה עצה ליוצר.

לוגו של Windows

לוגו של Windows! נראה מדהים באמת, וזה קל ליצור!

לוגו של

יצירת נהדר באמת! זה עובד בדפדפנים העיקריים למעט Internet Explorer 8 או למטה.

לוגו של Google Chrome

אני לא בטוח שאתה אוהב את הלוגו החדש של Google Chrome או לא, אבל לוגו CSS3 של Google Chrome נראה מדהים!

לוגו האופרה

עכשיו תרגול בשבילך: מה ההבדלים בין זה חתיכת CSS3 את העסקה האמיתית?

לוגו HTML5

HTML5 אינו יכול לזרוח ללא CSS3!

לוגו פולקסווגן

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

השתקפות

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

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

מה אתה חושב? האם תשתמש בגרפיקה שנעשתה עם CSS3 באתר שלך? האם יש לך פתרון כלשהו לחסרונות הנוכחיים? תן לנו לדעת את המחשבה שלך, ולשתף אותנו אם אתה פשוט אפוי CSS3 גרפיקה!

יותר

מוכן לעשות משהו עם CSS3? הגעת למקום הנכון! להלן מדריכים ומדריכים שנכתבו כדי לסייע לך מאוד על הכביש שלך כדי לשלוט CSS3.

• CSS3: יצירת תפריט ניווט
• CSS3: יצירת עדכון RSS
• CSS3: יצירת תיבת חיפוש
• CSS3: מדריך למתחילים
• CSS3 / HTML5: יצירת דפי אינטרנט
• CSS3 / HTML5: יצירת טופס יצירת קשר המבוסס על AJAX