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

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

הקודים שבסרטון,

על מנת להסתיר את הטקסט שגולש החוצה,

				
					selector{
    overflow: hidden;
    }
				
			

בשביל טקסט אנכי,

				
					selector{
    overflow: hidden;
    writing-mode: vertical-lr;
}
				
			

הקוד למעבר עכבר

 
				
					.my-text1, .my-text2{
        transition: 0.5s;
    }

.my-wrap:hover .my-text1{
    transform: translate(10px) skew(-10deg);

    }
.my-wrap:hover .my-text2 {
    transform: translate(-10px) skew(-10deg);

    }
				
			

2 תגובות

כתיבת תגובה

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

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