קודים מטווווורפים
שפשוט יעשו פלאים
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
כותרת עם שילוב צבעים
/*כותרת בשילוב צבעים*/
/*להוריד את השקיפות של צבע הכותרת ל0*/
selector .elementor-heading-title {
background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
-webkit-background-clip: text;
}
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
טשטוש רקע לאלמנט או קונטיינר
/*טשטוש רקע אלמנט/קונטיינר/אזור פנימי*/
selector
{max-width: 100%}
selector{-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);}
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
כפתור של טופס בשילוב צבעים
/*כפתור של טופס בשילוב צבעים*/
selector .elementor-button {
background-image: linear-gradient(160deg, #BD4A8A,#4857A6);
border: 1px solid #a55d07;
}
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
אפקט ריחוף על כל אלמנט בדף
/*אפקט ריחוף של אלמנט/קונטיינר*/
selector{
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
from { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
עיגול פינות ב״שאלות תשובות״
/*עיגול פינות בווידג׳ט ״אקורדיון״*/
/*Css Classes: steroids*/
.steroids .elementor-tab-title {
border-radius: 15px;
}
.elementor-tab-content.elementor-clearfix {
margin-top: 8px;
border-radius: 15px;
}
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
גלילת רקע קבועה במובייל
/*גלילת רקע קבועה במובייל*/
selector {
-webkit-clip-path: polygon(0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
selector::before{
position: fixed;
height:100vh;
top:0;
left:0;
}
}
מאת איתי טל
מומחה לבנייה ועיצוב דפי נחיתה
אפקט ״גלים״ בכותרת
/*אפקט ה״גלים״ תכל׳ס*/
selector{
-webkit-animation: water 4s ease-in-out infinite;
animation: water 4s ease-in-out infinite;
}
@-webkit-keyframes water{
0%, 100%{
-webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
}
50%{
-webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
}
}
@keyframes water{
0%, 100%{
-webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
}
50%{
-webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
}
}