کاربر گرامی ، تمام فایلهای سایتپ رایگان میباشند اما جهت دانلود نیاز به عضویت دارید . عضویت  |  راهنما

آموزش افکت زیبای سورس کد ماوس هاور Css argyleink

این مورد را ارزیابی کنید
(0 رای‌ها)
منتشرشده در آموزش css

زیبایی در قالب وب سایت ، مهمترین دلیل جذب کاربران جدید است . 

قصد داریم آموزش 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;
    }
}

دانلود سورس کد 

سورس کد را هم میتوانید از لینک پیوست شده در ابتدای صفحه دانلود نمائید . 

 

سوال بود در تالارگفتمان مطرح نمائید .

موفق باشید

 

خواندن 48 دفعه
محسن محمد

با نگاهی گذرا به وب سایت های مشابه سایتپ , پی به تفاوت محصولات منتشر شده در سایتپ و این سایت ها خواهید برد .

ما در سایت ایران تمام سعیمان بر این است که محصولاتی را در اختیار شما عزیزان قرار دهیم که صحت کارکرد آنها بررسی شده و قابل استفاده باشند . در اکثر وب سایت های مشابه سایت ایران این دو مورد نادیده گرفته شده و کاربر پس از دانلود محصول مورد نظرش امکان استفاده از آنرا ندارد. به عبارت ساده تر وب سایت های مذکور فقط منتشر کننده هستند و از درستی آنها اطمینان حاصل نمیکنند .

ما این اطمینان خاطر را به شما میدهیم که محصولاتی را از سایت ایران دانلود خواهید کرد که قبل از انتشار , بطور کامل بررسی شده اند و قابل استفاده میباشند.

www.mohssen.ir | این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

مقالات آموزشی سایتپ

  • امکان جدید کامپوننت کاتو k2در مدیریت تگ ها یا برچسب ها
    امکان جدید کامپوننت کاتو k2در مدیریت تگ ها یا برچسب ها سلام جوملا دوست عزیز ، بسیار خوشحالیم که شما هم از این سیستم قدرتمند برای کسب و کار خود استفاده میکنید . یکی از مشکلات اساسی کار کردن با کامپوننت جوملا k2 برچسب گذاری برای مطالب سایت بوده است که خوشبختانه این مورد در جدیدترین نسخه k2 یعنی V2.10.3 به…
    آموزش جوملا خواندن 28 بار
  • آموزش افکت زیبای سورس کد ماوس هاور Css argyleink
    آموزش افکت زیبای سورس کد ماوس هاور Css argyleink زیبایی در قالب وب سایت ، مهمترین دلیل جذب کاربران جدید است . قصد داریم آموزش css سورس کدی را خدمتتان معرفی کنیم که میتواند تغییری هر چند ناچیز اما مهم در لینک های سایت شما ایجاد کند . با استفاده از این سورس کد css میتوانید براحتی یک ماوس…
    آموزش css خواندن 49 بار
  • مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr
    مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr سلام به جوملا دوستان عزیز، در حال پیاده سازی یک وب سایت چند زبانه بودیم که با یک مشکل عجیب مواجه شدیم. ما زمانی که سیستم جوملا را چند زبانه کردیم ، برای ایجاد خصوصیت های LTR و RTL که بتوانیم به هر کدام از زبان ها یک STYLE مختلف…
    آموزش جوملا خواندن 135 بار
  • آموزش اجرا و نمایش متن در بوم نقاشی html5
    آموزش اجرا و نمایش متن در بوم نقاشی html5 پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش طراحی تصویر در بوم نقاشی html5 شروع آموزش : کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext. <div> <canvas id="c6" width="600" height="200" style="border:solid 1px…
    آموزش html خواندن 56 بار
نمایش تمام مقالات سایتپ - کلیک نمائید