כיצד הנפשת גבול מקווקו עם

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

היום נסתכל לתוך גרזן פשוט יותר עבור גבולות מקווקווים: אנימציה הגבול מקווקו. הגבול המקווקו המונפש ייווצר רק באמצעות מתווה ו צל קופסא, לא משאיר מהומה על fallbacks, מאז מתווה נתמך IE8 ואילך. בדרך זו המשתמש עדיין יוכל לראות את הגבולות בניגוד ל- SVG או Gradient. עם זה אתה יכול גם ליצור מקפים bicolored. בואו נסתכל.

יצירת גבולות

תחילה ניצור את הגבולות. בשביל זה, נשתמש בקווי מתאר מקווקווים ובצללית.

 .כרזות outline: 6px dashed yellow; box-shadow: 0 0 0 6px # EA3556; ... 

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

לאחר מכן תוכל להתאים את רוחב התיבה או את גובהה לגבול הרצוי בפינות.

אנימציה גבולות

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

@keyframes animateBorder ל outline-color: # EA3556; box-shadow: 0 0 0 6px yellow; 

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

ברגע שההנפשה מוכנה, הוסף אותה לתיבה.

.כרזות outline: 6px dashed yellow; box-shadow: 0 0 0 6px # EA3556; אנימציה: 1s animateBorder אינסופי; ...

מעברים בגבולות

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

.תמונות outline: 20px dashed # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; מעבר: כל 1s; .... תמונות: רחף outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

כעת, העבר את העכבר מעל לתמונות אלה כדי לראות את גבולות ה- CSS שלך מקווקווים בכל התהילה המונפשת.

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