زیبایی در قالب وب سایت ، مهمترین دلیل جذب کاربران جدید است .
قصد داریم آموزش css سورس کدی را خدمتتان معرفی کنیم که میتواند تغییری هر چند ناچیز اما مهم در لینک های سایت شما ایجاد کند .
با استفاده از این سورس کد css میتوانید براحتی یک ماوس هاور mouse hover یا همان قرار گیری ماوس بر روی لینک های سایت ایجاد کنید .
البته در این مثال ما بر روی تگ H1 کار خواهیم کرد که فقط کافیست جای تگ h1 را با a عوض کنید و یا هر المان دیگری که بخواهید جایگزی آن نمائید .
نتیجه نهایی :
کد های HTML :
<h1>Hover Me</h1>
کد های CSS :
h1::before {
transform: scaleX(0);
transform-origin: bottom right;
}
h1:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
h1::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: #F83C3B;
z-index: -1;
transition: transform .3s ease;
}
h1 {
position: relative;
font-size: 5rem;
color: #ffffff;
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
background: #374D64;
}
@media (orientation: landscape) {
body {
grid-auto-flow: column;
}
}
دانلود سورس کد
سورس کد را هم میتوانید از لینک پیوست شده در ابتدای صفحه دانلود نمائید .
سوال بود در تالارگفتمان مطرح نمائید .
موفق باشید