בניית אתרים

css tricks

css tricks

Responsive Iframe

Create an iframe that will keep the aspect ratio (4:3, 16:9, etc.) when resized:

What is aspect ratio?

The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and for YouTube videos).

Example 16:9 Aspect Ratio

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Example 4:3 Aspect Ratio

.container {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

Example 3:2 Aspect Ratio

.container {
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

Example 8:5 Aspect Ratio

.container {
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

Example 1:1 Aspect Ratio (Height and Width is Always Equal)

.container {
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

איך לקבוע מקום מדוייק לפיצול טקסט ארוך לשתי עמודות

אם יש לך טקסט ארוך ואת רוצה לשלוט במדויק על המקום שבו תתחיל העמודה השנייה, צריך להוסיף בטקסט אחרי המקום שיסיים את העמודה הראשונה:
<div class="column-break"></div>

וב-css להוסיף:

/* הגדרת מעבר לעמודה הבאה */

.column-break { break-after: column; width: 100%; }

איך לעשות לינק של הקונטיינר באלמנטור

בקומבו של html לבחור a  ובקישור להוסיף כתובת

 

איך לשבור שורת טקסט רק בנייד ובנייח ישאר בשורה אחת

<div class="text-container">
הטקסט הזה צריך להישבר לשורה חדשה רק
<span class="mobile-break"><br></span>
בנייד.
</div>

/* הסתרת ה-br בשולחן עבודה */
.mobile-break {
display: none;
}

@media screen and (max-width: 768px) {
/* הצגת ה-br בניידים */
.mobile-break {
display: inline;
}
}

איך לגרום לתמונת קונטיינר לגדול במעבר עכבר ובו זמנית התמונה מתבהרת או הופכת לקהה יותר

הקוד להכהת התמונה:

selector {
position: relative;
overflow: hidden;
}

selector::before {
content: "";
background-image: url('https://trio-d.rinawebdesign.com/wp-content/uploads/2024/05/TRIO-kitchen-100.jpg');
background-size: cover;
background-position: center;
transition: transform 0.3s ease, filter 0.3s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

selector:hover::before {
transform: scale(1.1);
filter: brightness(0.3);
}

הקוד להתבהרות של התמונה:

selector {
position: relative;
overflow: hidden;
}

selector::before {
content: "";
background-image: url('https://trio-d.rinawebdesign.com/wp-content/uploads/2024/05/modena.png');
background-size: cover;
background-position: center;
transition: transform 0.3s ease, filter 0.3s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
filter: brightness(0.85); /* כהות ראשונית */
}

selector:hover::before {
transform: scale(1.1);
filter: brightness(1.5);
}

שתפו מאמר:

שתפו מאמר:

חיפוש

נהיה בקשר

כתבות נוספות:

אבטחת אתרי וורדפרס

אבטחת אתרי וורדפרס

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

טעינת האתר

איך לזרז טעינת האתר

כולנו שמענו על שימוש  במטמון דפים. מה זה מטמון דפים ואיך זה יכול לזרז טעינת האתר? מטמון הוא בעצם אזור אחסון זמני שמאפשר לאחזר מהר

פופאפ לאלמנטור

איך ליצור פופאפ באלמנטור

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

טופס צור קשר באלמנטור

קישור בין טופס יצירת קשר לואטסאפ

כדי לקבל מבנה של לינק לואטסאפ הרצוי, נבנה קודם לינק עם הודעה קבועה מראש.
אחר כך מתאים אותה להודעה המותאמת לצרכים שלנו. נתחיל עם בניית לינק

פלטת צבעים לאתר

פלטת צבעים לאתר

אתם מודעים על ההשפעה המדהימה של צבע. צבע מעורר רגש. יש לו השפעה על התפיסה שלנו. על התגובות, השפעה על תת-מודע, על המוח האנושי. ובשל אופיו המשפיע והתקשורתי,

איך למצוא מילות מפתח

איך למצוא מילות מפתח יעילות

בחירת מילות מפתח יעילות היא חיונית להצלחת הקידום האורגני של האתר שלכם. מילות מפתח יעילות יסייעו לכם למשוך תנועה איכותית לאתר שלכם, ולהגדיל את הסיכויים שלכם להשיג את

עיצוב אתרים לעסקים קטנים

עיצוב אתרים לעסקים קטנים

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

אפיון האתר

אפיון האתר: הבנת משמעותו ויישום

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

בואו נבחר יחד אתר שהכי מתאים לכם

דילוג לתוכן