titles – אופק אסטרין

מבנה בסיסי SPAN

				
					 כתוב את 
<span class="css-class">
הכותרת
</span>
 כאן

כתוב את הכותרת כאן

				
					.fancy-underline {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.fancy-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 100%;
  height: 30%; /* ← 10% מגובה הטקסט */
  background-color: #66C8CB;
  z-index: -1;
}

כתוב את הכותרת כאן

				
					.sticker-title {
  display: inline-block;
  padding: 0.1em 0.4em; /* רווח פנימי קטן סביב המילה */
  color: #fff; /* צבע הטקסט */
  background: linear-gradient(135deg, #009245, #FCEE21); /* הגראדיאנט של המדבקה */
  border-radius: 6px; /* פינות מעוגלות */
  box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* עומק קל */
  transform: rotate(-1deg); /* זווית קטנה לתת מראה מדבקה */
  transition: transform 0.3s ease;
}

/* אפקט hover – המדבקה “קופצת” קלות */
.sticker-title:hover {
  transform: rotate(0deg) scale(1.05);
}

כתוב את הכותרת כאן

				
					.marker-heading {
  position: relative;
  display: inline-block;
  color: #000; /* צבע הטקסט */
  font-weight: bold;
}

.marker-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.9em; /* עובי המרקר */
  background: #FCEE21; /* צהוב */
  opacity: 0.5; /* אפקט חצי שקוף */
  transform: translateY(-50%) rotate(-1deg); /* זווית קטנה למראה טבעי */
  z-index: -1; /* נשאר מאחורי הטקסט */
  border-radius: 2px;
  transition: transform 0.3s ease;
}

/* hover קטן – המרקר “קופץ” קלות */
.marker-heading:hover::before {
  transform: translateY(-50%) rotate(0deg) scaleX(1.05);
}

כתוב את הכותרת כאן

				
					/* כותרת עם צבע גראדיאנט */
.gradient-title {
  background: linear-gradient(90deg, #009245, #FCEE21); /* הגראדיאנט */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* תמיכה בדפדפנים נוספים */
  text-transform: uppercase; /* אופציונלי */
}

כתוב את הכותרת כאן

				
					/* כותרת קו מתאר בלבד */
.outline-title {
  color: transparent;           /* מוסיף שקיפות לטקסט עצמו */
  -webkit-text-stroke: 0.5px #009245; /* עובי וצבע הקו */
  text-transform: uppercase;    /* אופציונלי */
}

כתוב את הכותרת כאן

				
					/* כותרת בכתב יד בעברית */
.handwriting-title {
  font-family: "Amatic SC", "David Libre", "Alef", cursive; /* פונט כתב יד + fallback */
  font-weight: normal;  /* מתאים לפונטים של כתב יד */
}

אפקט גליצ'

				
					.glitch-text {
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: glitch-skew 1s infinite linear alternate-reverse;
  text-shadow: 
    2px 0 #ff00ff,
    -2px 0 #00ffff,
    0 0 10px rgba(255,255,255,0.5);
}

.glitch-text:hover {
  animation: glitch-intense 0.3s infinite;
  text-shadow: 
    4px 0 #ff00ff,
    -4px 0 #00ffff,
    0 0 20px rgba(255,255,255,0.8);
}

@keyframes glitch-skew {
  0% { transform: skewX(0deg); text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
  10% { transform: skewX(-1deg); }
  20% { transform: skewX(0deg); text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff; }
  30% { transform: skewX(1deg); }
  40% { transform: skewX(0deg); text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
  50% { transform: skewX(-0.5deg); }
  60% { transform: skewX(0deg); text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }
  70% { transform: skewX(0.5deg); }
  80% { transform: skewX(0deg); }
  90% { transform: skewX(-1deg); text-shadow: 3px 0 #ff00ff, -3px 0 #00ffff; }
  100% { transform: skewX(0deg); }
}

@keyframes glitch-intense {
  0% { transform: translate(0); text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
  20% { transform: translate(-3px, 2px); text-shadow: -4px 0 #ff00ff, 4px 0 #00ffff; }
  40% { transform: translate(3px, -2px); text-shadow: 4px 0 #ff00ff, -4px 0 #00ffff; }
  60% { transform: translate(-2px, 1px); text-shadow: -3px 0 #ff00ff, 3px 0 #00ffff; }
  80% { transform: translate(2px, -1px); text-shadow: 3px 0 #ff00ff, -3px 0 #00ffff; }
  100% { transform: translate(0); text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
}

אפקט כותרת נכתבת

				
					.typewriter {
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  overflow: hidden;
  border-left: 3px solid #00d4ff;
  white-space: nowrap;
  margin: 0 auto;
  width: fit-content;
  animation: 
    typing 3s steps(20, end) forwards,
    blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: #00d4ff; }
}

אפקט קו מתאר זוהר במעבר עכבר

				
					.stroke-text {
  font-size: 5rem;
  font-weight: 900;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px #00d4ff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.stroke-text:hover {
  -webkit-text-stroke: 2px #39ff14;
  text-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
}

טקסט מפוצל צבעים

				
					.split-color {
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(
    180deg,
    #00d4ff 0%,
    #00d4ff 50%,
    #ff6b6b 50%,
    #ff6b6b 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* גרסה אנימטיבית */
.split-color-animated {
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(
    180deg,
    #00d4ff 0%,
    #00d4ff 50%,
    #ff6b6b 50%,
    #ff6b6b 100%
  );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: splitMove 2s ease-in-out infinite;
}

@keyframes splitMove {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 0 100%; }
}

קו תחתון מונפש במעבר עכבר

				
					.animated-underline {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #00d4ff, #39ff14);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animated-underline:hover::after {
  width: 100%;
}

/* RTL Support */
[dir="rtl"] .animated-underline::after {
  left: auto;
  right: 0;
}

טקסט כרום מתכתי

				
					.chrome-text {
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #c0c0c0 20%,
    #ffffff 40%,
    #707070 60%,
    #c0c0c0 80%,
    #ffffff 100%
  );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: chromeShine 3s ease-in-out infinite;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

@keyframes chromeShine {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

טקסט בולט שקוע

				
					/* טקסט בולט */
.emboss-text {
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
  color: #333;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.3),
    1px 1px 0 rgba(0,0,0,0.5);
}

/* טקסט שקוע */
.deboss-text {
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
  color: #555;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.3),
    1px 1px 0 rgba(255,255,255,0.2);
}

אפקט חשיפה מטשטוש

				
					.blur-reveal {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  animation: blurReveal 1.5s ease forwards;
}

@keyframes blurReveal {
  0% {
    filter: blur(20px);
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }
}

אפקט קו מתרחב מהאמצע

				
					.underline-expand {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.underline-expand::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #8b5cf6);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.underline-expand:hover::after {
  width: calc(100% - 20px);
}

.underline-expand:hover {
  color: #00d4ff;
}

כתוב את הכותרת כאן

				
					code

אוסף קדם כותרות

במיוחד עבור [קהל היעד] ולזמן מוגבל!

קו מצד ימין לקדם כותרת

				
					.side-line-pre-title {
    border-right: 5px solid #E33122;
    padding-right: 8px;
}

במיוחד עבור [קהל היעד] ולזמן מוגבל!

אפקט מדבקה לקדם כותרת

				
					.sticker-effect-pre-title {
    border-radius: 10px;
    background: linear-gradient(135deg, #E33122, #ff5a4d, #b81f14);
}

במיוחד עבור [קהל היעד] ולזמן מוגבל!

תיבה בשקיפות

				
					.basic-pre-title {
    border: 2px solid #E33122;
    padding: 6px;
    border-radius: 12px;
    background: rgba(227, 49, 34, 0.3);
}

במיוחד עבור [קהל היעד] ולזמן מוגבל!

חלק עליון של הדף

				
					.top-pre-title {
    background-color:  #1B1B1B;
    border-radius: 0px 0px 12px 12px;
}

במיוחד עבור [קהל היעד] ולזמן מוגבל!

בורדר עם פייד בתחתית

				
					.bottom-fade-border-pre-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px; /* עובי הבורדר */
  background: linear-gradient(
    to right, 
    rgba(227, 49, 34, 0),  /* שקוף בצד שמאל */
    rgba(227, 49, 34, 1) 50%, /* צבע מלא במרכז */
    rgba(227, 49, 34, 0)   /* שקוף בצד ימין */
  );
  pointer-events: none; /* לא מפריע ללחיצות */
}

במיוחד עבור [קהל היעד] ולזמן מוגבל!

פייד על הרקע

				
					.pre-title-full-fade {
  background: linear-gradient(
    to left,               /* הכיוון: אדום בצד ימין, שקוף בצד שמאל */
    rgba(227, 49, 34, 0.8),  /* אדום מלא */
    rgba(227, 49, 34, 0)   /* שקוף */
  );
}