Menu-Photo

close

קטגוריות

מעברי צבע מתקדמים עם אלמנטור ו-CSS

קישור לאתר color space

קישור לאתר gradient hunt

הקוד לצבע מעבר בתוך טקסט

				
					selector .elementor-heading-title{background-image: linear-gradient(to right top, #17195F, #00FFFF);
-webkit-background-clip: text;}
				
			

הקוד למעבר צבע עם הובר בכפתורים

				
					selector .elementor-button {background-image: linear-gradient(to right, #EDE574 0%, #E1F5C4 51%, #EDE574 100%)}
selector .elementor-button {
transition: 0.5s;
background-size: 200% auto;
}
selector .elementor-button:hover {
background-position: right center;
}
				
			

הקוד לטשטוש הרקע

				
					selector{
filter: blur(100px);
}

				
			

הקוד לרקע עם אנימציית מעבר צבע

				
					selector {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
				
			

2 תגובות

  1. טיפים שווים מאוד! תודה רבה!
    אני רוצה להפעיל את האפקט של אנימצית מעבר צבע על וידג'ט (לדוגמא איקון.)
    ולא על רקע כללי, אשמח לדעת איך אפשרי?

כתיבת תגובה

האימייל לא יוצג באתר.

מאמרים נוספים

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

מתאים לך?