ברוכים הבאים לדף קודים:
קודים פסיכים
לאתרים פסיכים.
כותרת בשילוב צבעים
/*כותרת בשילוב צבעים*/
/*להוריד את השקיפות של צבע הכותרת ל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); }
}
גלילת רקע קבועה במובייל
/*גלילת רקע קבועה במובייל*/
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;
}
}
טשטוש רקע לאלמנט או קונטיינר
/*כותרת בשילוב צבעים*/
/*להוריד את השקיפות של צבע הכותרת ל0*/
selector .elementor-heading-title {
background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
-webkit-background-clip: text;
}
מונע גלישה צידית
html, body{
overflow-x: hidden;
}
חלק מהכותרת מודגשת
<span style="background-color: #FFE338; padding: 0 5px; border-radius: 3px;">והוא עונה לי בלי להסס
"אתה מכיר את המשל של הצרצר והנמלה?"</span>
מסגרת מגניבה לקונטיינר
:root{
--grad1: #FF0000;
--grad2: #B81D24;
--grad3: #FF0000;
}
selector{
position: relative;
z-index: 999;
}
/*SKEWED EFFECT*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
z-index: -9;
}
/*BLUR EFFECT*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
/*HOVER EFFECT*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}
מעבר כפתור פסיכי
selector{
--btn-width: 180px;
--btn-height: 50px;
--btn-background: #FF0000;
--left-gradient: #DEB354;
--right-gradient: #DEB354;
}
selector a {
position: relative;
width: var(--btn-width);
height: var(--btn-height);
}
selector a:before,
selector a:after {
content: '';
position: absolute;
inset: 0;
transition: 0.5s;
}
selector a:nth-child(1):before,
selector a:nth-child(1):after {
background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
selector a:hover:before {
inset: -3px;
}
selector a:hover:after {
inset: -3px;
filter: blur(10px);
}
selector a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--btn-background);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/*Glass Shine Effect*/
selector a span::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.075);
transform: skew(160deg);
}
קוד לאלמנט טיימר
/* CSS עבור ספירה לאחור באלמנטור */
selector .elementor-countdown-digits {
background-image: linear-gradient(45deg, #FF0000, #B81D24); /* גרדיאנט בצבעים המבוקשים */
-webkit-background-clip: text; /* הגדרת קליפינג לטקסט */
background-clip: text; /* הגדרת קליפינג לטקסט */
color: transparent; /* הצגת הצבע בצורה שקופה */
font-weight: bold; /* להפוך את הטקסט לבולט */
}
selector .elementor-countdown-label {
color: #FF0000; /* צבע טקסט אדום */
font-weight: bold; /* להפוך את הטקסט לבולט */
}
selector .elementor-countdown-wrapper {
display: flex; /* הגדרת תצוגה גמישה */
justify-content: center; /* מיקום במרכז האופקי */
align-items: center; /* מיקום במרכז האנכי */
}
/* CSS עבור ספירה לאחור באלמנטור עם גבול גרדיאנט לכל מספר */
selector .elementor-countdown-item {
border: 2.5px solid transparent;
border-radius: 15px;
background:
linear-gradient(to right, black, black),
linear-gradient(226deg, #FF1822 , #A41C22);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
margin: 10px;
padding: 10px; /* הוספת ריווח פנימי כדי להבטיח שהגבול יהיה נראה לעין */
}
/* צבע טקסט למספרים ולתוויות */
selector .elementor-countdown-digits,
selector .elementor-countdown-label {
color: white; /* צבע טקסט לבן */
font-weight: bold; /* להפוך את הטקסט לבולט */
}
/* גרדיאנט לטקסט המספרים */
selector .elementor-countdown-digits {
background-image: linear-gradient(45deg, #FF0000, #B81D24); /* גרדיאנט בצבעים המבוקשים */
-webkit-background-clip: text; /* הגדרת קליפינג לטקסט */
background-clip: text; /* הגדרת קליפינג לטקסט */
color: transparent; /* הצגת הצבע בצורה שקופה */
}
/* שאילתת מדיה להקטנת הרוחב במובייל */
@media (max-width: 767px) {
selector .elementor-countdown-item {
width: 90px; /* רוחב מעט גדול יותר במובייל */
margin: 7px; /* הפחתת המרווח במובייל */
padding: 7px; /* הפחתת הריווח הפנימי במובייל */
}
}
קוד סיבוב אלמנט קצב קבוע
selector{
-webkit-animation:spin 15s linear infinite;
-moz-animation:spin 15s linear infinite;
animation:spin 15s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg); }
}
@keyframes spin { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); }
}
מסגרת בשילוב צבעים לעמוד
selector {
border: 2.5px solid transparent;
border-radius: 15px;
background:
linear-gradient(to right, black, black),
linear-gradient(226deg, #FF1822 , #A41C22);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
margin-right:15px;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
כיתוב הולך חוזר ללא מסגרת
:root {
--myText: 'מיומנות הזהב';
--textStroke: 3px;
--strokeColor: rgba(255, 255, 255, 0); /* צבע המסגרת - שקופה לחלוטין */
--anDuration: 4s; /* האטת האנימציה ל-5 שניות */
--goldColor1: #E4B627; /* צבע זהב 1 */
--goldColor2: #C8A03A; /* צבע זהב 2 */
}
selector {
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
text-align: center;
margin: 0 auto;
position: relative; /* הוספת מיקום יחסי */
}
selector .elementor-heading-title {
position: relative; /* הוספת מיקום יחסי */
display: inline-block; /* להבטיח שהכותרת תהיה בגודל הטקסט */
color: transparent; /* הצגת הצבע בצורה שקופה */
-webkit-text-stroke: var(--textStroke) var(--strokeColor); /* הוספת מסגרת סביב הטקסט בצבע שקופה */
}
selector .elementor-heading-title::before {
content: var(--myText);
background-image: linear-gradient(226deg, var(--goldColor1), var(--goldColor2)); /* הגדרת הגרדיאנט בצבע זהב */
-webkit-background-clip: text; /* הגדרת קליפינג לטקסט */
background-clip: text; /* הגדרת קליפינג לטקסט */
color: transparent; /* הצגת הצבע בצורה שקופה */
position: absolute;
top: 0;
left: 0; /* מיקום ההתחלה לשמאל */
width: 100%;
height: 100%;
text-align: center; /* שינוי המילוי למרכז */
overflow: hidden;
white-space: nowrap;
-webkit-animation: animateX var(--anDuration) linear infinite;
animation: animateX var(--anDuration) linear infinite;
z-index: -1; /* עדכון: הוספת מיקום רקע כדי שהטקסט יהיה מודגש מעל הרקע */
}
@-webkit-keyframes animateX {
0%, 10%, 100% {
clip-path: inset(0 0 0 100%);
}
70%, 90% {
clip-path: inset(0 0 0 0);
}
}
@keyframes animateX {
0%, 10%, 100% {
clip-path: inset(0 0 0 100%);
}
70%, 90% {
clip-path: inset(0 0 0 0);
}
}
קרוסלה בקצב קבוע
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
ביטול השקיפות בטקסט פנימי בטופס
input::placeholder {
opacity:1 !important;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
opacity:1;
}
input::-moz-placeholder { /* Firefox 19+ */
opacity:1;
}
input:-ms-input-placeholder { /* IE 10+ */
opacity:1;
}
input::-moz-placeholder { /* Firefox 18- */
opacity:1;
}
אותיות חלולות בכפתור
selector{
-webkit-text-stroke: 1px #fff;
}
שינוי צבע הדר בגלילה סטיקי
selector{
transition: all 1s ease ;
background-color: #9996;
}
selector.area.elementor-sticky--effects{
background-color: #fe637c !important;
}
selector.area.elementor-sticky--effects .img{
border: solid 3px #0000 !important;
}
ירידת שורה לטקסט רק במובייל
@media only screen and (min-width: 767px) {
selector{
white-space: nowrap;
}
}
העברת שדה הסכמה בטופס
selector .elementor-field-type-acceptance {
order:4;
}
הפיכת תיבת אייקון ללחיצה
selector .elementor-icon-box-title a::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
מסגרת קבועה לעמוד
body{ position: relative; }
body::after {
outline:4px solid #D5C576;
outline-offset: -12px;
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 9999;
user-select: none;
pointer-events: none;
}
השילוב צבעים נדיר בכותרת
selector .elementor-heading-title{
background-image: linear-gradient(180deg , #FFFFFF, #7D7D7D);
background-clip: text;
-webkit-background-clip: text;
}
השתקפות לאלמנטים
selector
{max-width: 100%}
selector{-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);}
selector{
-webkit-box-reflect: below 5px linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.1) 100%);
}
קוד לטיימלין
.timeline-item__point-content { background: -webkit-linear-gradient(45deg, #65CAD2, #EC2E53);
}
.timeline-item__card-content { background: -webkit-linear-gradient(45deg, #EC2E53, #65CAD2);
}
.jet-timeline__line-progress
{ background: -webkit-linear-gradient(90deg,#448da5, #65CAD2, #EC2E53);}
.timeline-item__card-desc {direction: rtl;}
צביעת החלל ליד מפרידון צורה
selector path.elementor-shape-fill {
fill: pink !important;
}
אנימציית כניסה עדינה לאלמנטים
.toAnimate {
opacity: 0;
transition-property: opacity, transform;
transform: translate3d(-100px, 0, 0); /* לכניסה מצד שמאל */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-duration: 1.5s;
}
.toAnimate.show {
opacity: 1;
transform: none;
}
מסגרת גרדיאנט לכפתור
selector{
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(60deg, #00f, #00e8ff) border-box;
border: 3px solid transparent;
border-radius: 80px!important;
}
אנימציית 'נשימה' לאלמנט
selector {
animation: breathing 4s ease-in-out infinite;
}
@keyframes breathing {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
שינוי צבע התוסף נגישות אנייבל
body.trigger-color-blue #enable-toolbar #enable-toolbar-trigger .keyboard-shorcut, body.trigger-color-blue #enable-toolbar-trigger svg .enable-trigger-check, body.trigger-color-blue #enable-toolbar-trigger svg .enable-trigger-circle{
fill: #ae9870!important;
}
.keyboard-shorcut{
color: #ae9870!important;
}
קו הנפשה מודגש כותרת
selector a:hover{
color: #fff !important;
}
selector .elementor-widget-container {
position: relative;
text-decoration: none;
font-size: 21px;
font-weight: 500;
width: auto;
height: auto;
}
selector .elementor-widget-container::after {
background-color: #05FD75;
position: absolute;
content: "";
width: 0;
height: 50%;
bottom: 0;
right: 0;
transition: .5s;
z-index: 0;
opacity: 0.8;
}
selector .elementor-widget-container:hover::after {
width: 100%;
color: #fff !important;
}
selector .elementor-widget-container{
position: relative;
text-decoration: none;
color: #fff !important;
font-size: 21px;
font-style: normal;
font-weight: 500;
line-height: 35px;
letter-spacing: 0em;
text-align: right;
}
@media only screen and (max-width: 600px) {
selector .elementor-widget-container{
position: relative;
text-decoration: none;
color: #fff !important;
font-size: 21px !important;
font-style: normal;
font-weight: 500;
line-height: 30px;
letter-spacing: 0em;
text-align: right;
}
selector .elementor-widget-container {
position: relative;
text-decoration: none;
font-size: 20px;
width: auto;
height: auto;
}
}
גלילה לאורך טקסט
/**תיבת הטקסט**/
/**נקבע גובה שנרצה**/
selector {
height: 150px;
overflow-y: auto;
}
selector p {
padding-left: 30px;
}
/**נעצב את בר הגלילה**/
/* width */
selector ::-webkit-scrollbar {
width: 7px;
}
/* Track */
selector::-webkit-scrollbar-track {
background: #cccccc;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
/* Handle */
selector::-webkit-scrollbar-thumb {
background-color: #fe637c;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #ffb6a3;
}
שינוי צבע התוסף נגישות אנייבל
selector{
width: 300px;
overflow-x: auto;
}
@media only screen and (max-width: 767px) {
selector{
width: 300px;
overflow-x: auto;
}
}
התאמה אישית לגלילה
/* width */
::-webkit-scrollbar {
width: 9px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #05FD75;
border-radius: 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0B1126;
}
אותיות חלולות טקסט
selector {
color: #ffff;
text-shadow: 2px 2px #333, rgb(51, 51, 51) 2px 0px 0px, rgb(51, 51, 51) 1.75517px 0.958851px 0px, rgb(51, 51, 51) 1.0806px 1.68294px 0px, rgb(51, 51, 51) 0.141474px 1.99499px 0px, rgb(51, 51, 51) -0.832294px 1.81859px 0px, rgb(51, 51, 51) -1.60229px 1.19694px 0px, rgb(51, 51, 51) -1.97998px 0.28224px 0px, rgb(51, 51, 51) -1.87291px -0.701566px 0px, rgb(51, 51, 51) -1.30729px -1.5136px 0px, rgb(51, 51, 51) -0.421592px -1.95506px 0px, rgb(51, 51, 51) 0.567324px -1.91785px 0px, rgb(51, 51, 51) 1.41734px -1.41108px 0px, rgb(51, 51, 51) 1.92034px -0.558831px 0px !important;
}
צבע מותאם לסימון טקסט
::selection {
color: #0B1126;
background-color: #05FD75;
}
אפקט ״פוקוס״ לקרוסלה
selector .swiper-slide {
transition: 1s all;
opacity: 0.5;
}
selector .swiper-slide.swiper-slide-next {
box-shadow: -10px 20px 30px 0px rgb(0 0 0 / 8%);
opacity: 1;
}
selector .elementor-main-swiper {
width: calc(95% + 40px);
padding: 20px 20px 40px 20px;
}Copied!
עיצוב שאלון שלבים באלמנטור
selector [type="checkbox"]:checked,
selector [type="checkbox"]:not(:checked),
selector [type="radio"]:checked,
selector [type="radio"]:not(:checked){
position: absolute;
visibility: hidden;
}
selector .elementor-field-option label {
border: 1px solid #fff;
border-radius: 100px;
background-color: #fff;
display: block;
padding: 18px 60px;
margin: 7px 0;
font-size: 18px;
transition: 0.2s all;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
}
selector .elementor-field-option label:after {
width: 32px;
height: 32px;
content: "";
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
}
selector input:checked ~ label {
color: #fff !important;
background-color: #3CB54A;
}
selector input:checked ~ label:after {
background-color: #2d9e3a;
border-color: #fff;
}
Copied!
אנימציית חץ בכפתור
selector .elementor-button:hover .elementor-button-text:after {
opacity: 1;
margin-left: 15px;
animation: lmn-leftarrow 0.4s ease infinite alternate;
}
selector .elementor-button .elementor-button-text:after {
content: " >>";
font-weight: 500;
position: relative;
opacity: 0;
transition: 0.2s all;
}
@keyframes lmn-leftarrow {
0% {
left:3px;
}
100% {
left:0px;
}
}
Copied!
הנפשה לכפתור וואטספ
selector .swiper-slide {
transition: 1s all;
opacity: 0.5;
}
selector .swiper-slide.swiper-slide-next {
box-shadow: -10px 20px 30px 0px rgb(0 0 0 / 8%);
opacity: 1;
}
selector .elementor-main-swiper {
width: calc(95% + 40px);
padding: 20px 20px 40px 20px;
}Copied!
עיצוב שאלון שלבים באלמנטור
selector [type="checkbox"]:checked,
selector [type="checkbox"]:not(:checked),
selector [type="radio"]:checked,
selector [type="radio"]:not(:checked){
position: absolute;
visibility: hidden;
}
selector .elementor-field-option label {
border: 1px solid #fff;
border-radius: 100px;
background-color: #fff;
display: block;
padding: 18px 60px;
margin: 7px 0;
font-size: 18px;
transition: 0.2s all;
color: #3C454C;
cursor: pointer;
position: relative;
z-index: 2;
}
selector .elementor-field-option label:after {
width: 32px;
height: 32px;
content: "";
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 2px 3px;
border-radius: 50%;
z-index: 2;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
}
selector input:checked ~ label {
color: #fff !important;
background-color: #3CB54A;
}
selector input:checked ~ label:after {
background-color: #2d9e3a;
border-color: #fff;
}
Copied!
אנימציית חץ בכפתור
selector .elementor-button:hover .elementor-button-text:after {
opacity: 1;
margin-left: 15px;
animation: lmn-leftarrow 0.4s ease infinite alternate;
}
selector .elementor-button .elementor-button-text:after {
content: " >>";
font-weight: 500;
position: relative;
opacity: 0;
transition: 0.2s all;
}
@keyframes lmn-leftarrow {
0% {
left:3px;
}
100% {
left:0px;
}
}
Copied!
גוגל 