טריקים ברקעים  background

 

linear-gradient

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

to top


to right

to top right

 

 background: linear-gradient(to right, red, blue 15%,black 15%, yellow 85%, #fffdc2 85%);

הגרדיאנט הולך משמאל לימין

בהתחלה יש לנו ערבוב של אדום וכחול למשך 15% מהרקע

אחר כך יש לנו ערבוב של שחור וצהוב מ 15% עד 85% של הרקע

ולבסוף יש לנו צבע (סוג של חום כזה) לשאר הרקע

See the Pen vyWgZW by josef arazi (@shiran) on CodePen.

 

אמרנו שניתן להתחיל את הגרדיאנט מצד כלשהו, ניתן להתחיל גם את הגרדיאנט מזווית כלשהי ע"י כך שרושמים את הזווית למשל 45deg

background-image: 
  repeating-linear-gradient(
    45deg,
    red,
    red 20px,
    yellow 20px,
    yellow 40px
  );

הרקע לעיל יצור לנו קווים אלכסונים של אדום וצהוב.

דוגמא יפה ליצור ע"י משחקים של רקע חץ לדרופ דאון של select position

See the Pen SELECT right-arrow with CSS by Veiko (@vkjgr) on CodePen.

 

radial-gradient

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

See the Pen blcqw by Chris Coyier  (@chriscoyier) on CodePen.

 

ניתן גם לעשות בצורה מעגלית

.grad {
  background-image:
    radial-gradient(
      circle,
      red,
      yellow
    );
}

אפשר להוסיף גם את הערכים האלה שנותנים לנו עוד אפקטים

• closest-corner,
• closest-side,
• farthest-corner,
• farthest-side

See the Pen EFyvp by Chris Coyier  (@chriscoyier) on CodePen.

הברירת מחדל זה מהמרכז אבל אפשר גם להתחיל מכל צד

למשל מצד ימין למעלה

circle at top right,

See the Pen iuaDL by Chris Coyier  (@chriscoyier) on CodePen.