آیا تا کنون هنگام بازدید از یک وبسایت، از افکتهای زیبای هاور آن حیرتزده شدهاید؟ یا انیمیشنهای ظریف رابط کاربری (UI) سایت شما را تحت تاثیر قرار داده است؟ ممکن است این گونه به نظر برسد که افکت زیبای هاور، از جمله جزییات کوچک یک سایت باشد؛ اما این افکت و انیمیشنهای شناور آن میتوانند تأثیر بیشتری نسبت به آنچه انتظار دارید بر روی مخاطب داشته باشند. به همین دلیل تصمیم گرفتیم در مقالهی آموزش hover در CSS به آموزش ساخت چند افکت هاور زیبا بپردازیم. یکی از ویژگیهای طراحی یک رابط کاربری خوب، روشن و قابل مشاهده بودن عناصر تعاملی است. افکتهای شناور میتوانند به شما کمک کنند تا سایت شما زیباتر به نظر برسد و کاربران به سادگی بتوانند با طرح آن تعامل برقرار کنند. همچنین به یاد داشته باشید هنگامی که کاربران موس خود را بر روی لینکها و دکمههای سایت شما حرکت میدهند، میبایست متوجه تغییراتی شوند که به آنها تفاوت را نشان دهد و شما میتوانید این تغییرات را در قالب افکت هاور به آنها نشان دهید. شما میتوانید با استفاده از CSS و HTML افکتها و انیمیشنهای چشمگیری را ایجاد کنید. اگرچه برای ایجاد انیمیشنهای پیچیده ممکن است به جاوا اسکریپت هم نیاز داشته باشید. در ادامهی مقالهی آموزش hover در CSS ، شما را با انواع مختلف افکتهای زیبای هاور آشنا میکنیم. شما میتوانید از این افکتها در طراحی سایت خود استفاده کنید یا از آنها الهام بگیرید.
افکت زیبای هاور انیمیشن دکمهها
کد این افکت زیبا و مدرن بسیار تمیز و قابل سفارشیسازی میباشد. کد HTML:
<div class="data-container">
<span class="btn">Hover Me </span>
</div>
شما میتوانید بنا بر نیاز و سلیقهی خود از این افکتها در طراحی رابط کاربری سایت به صورت جداگانه یا جمعی استفاده کنید. این افکتها واکنشگرا هستند و در دستگاههای تلفن همراه به خوبی نمایش داده میشوند. کد HTML:
سادگی این افکت شناور تصویر، چیزی است که باعث محبوبیت آن در بین کاربران شده است. بدین ترتیب کاربران تشویق میشوند تا با وبسایت ارتباط بیشتری برقرار کنند. کد HTML:
شما میتوانید از این افکت زیبا در طراحی رابط کاربری صفحهی اصلی وبسایت خود استفاده کنید. کد HTML:
<div class="scene">
<h1>Simple magic!</h1>
<div class="magic"></div>
<p class="check-out">Check out my other <a href="https://codepen.io/suez/public/" target="_blank">pens</a></p>
</div>
در طراحی وب مدرن، از جلوههای انیمیشن هوشمندانه استفاده میشود تا تجربهای همه جانبه به کاربران ارائه دهد. گرچه مفهوم اصلی انیمیشن شناور پیچیده به نظر میرسد، اما در این افکت از اسکریپتهای HTML5 و CSS3 به طرز هوشمندانهای استفاده شده است تا یک انیمیشن هاور واکنشگرا و سبک وزن را به شما ارائه دهد. این افکت برای صفحات فرود محصول و وب سایتهای بازی مناسب خواهد بود. از آنجا که این انیمیشن مبتنی بر SVG است، نتیجهی دقیقی خواهید گرفت. با درک این مفهوم به عنوان پایه، میتوانید از SVGهای دیگری در طراحی خود استفاده کنید. برای توسعهی انیمیشنهای پیچیده در وب میتوانید از کتابخانهی three.js استفاده کنید. کد HTML:
این افکت زمانی که بر روی المنت مورد نظر هاور میکنید، اجرا خواهد شد. این افکت برای متونی که به صورت inline هستند، قابل استفاده میباشد. هنگام هاورشدن متنی که افکت هاور Highlight بر روی آن اعمال شده است، رنگ پس زمینهی آن متن از ابتدا تا انتها و به صورت انیمیشنی تغییر خواهد کرد. برای این کار یک فایل به نام index.html ایجاد کرده و کدهای زیر را در آن قرار میدهیم:<!DOCTYPE html>
<html>
<head>
<title>List</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Bangers">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type="text/css">
</style>
</head>
<body>
</body>
</html>سپس دو فایل CSS را به صورت بالا به آن لینک میدهیم. فایل اول مربوط به یک فونت از سایت Google font و فایل دوم CSS Reset میباشد که باعث باز نشدن کدهای اولیه و ریست شدن کد استایل میشود. در مرحلهی بعد کدهای HTML زیر را اضافه میکنیم:<!DOCTYPE html>
<html>
<head>
<title>List</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Bangers">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type="text/css">
</style>
</head>
<body>
<div class="post"><a class="fun-hover" href="#">Check out React For Beginners</a></div>
<div class="post"><a class="fun-hover" href="#">Are you a Sublime Text Power User?</a></div><br/>
<div class="post"><a class="fun-hover" href="#">I love to learn!</a></div>
<div class="post"><a class="fun-hover" href="#">I <br>sure<br>do<br>love<br>Flexbox! </a></div>
</body>
</html>همانطور که مشاهده میکنید، 4 تگ div با کلاس post اضافه شده و درون هر یک از آنها یک لینک با کلاس fun-hover قرار دادهایم. همچنین، درون بعضی از لینکها از تگ br استفاده شده تا متن مربوط شکسته شده و به خط بعد برود. حالا کدهای CSS زیر را به صورت زیر اضافه میکنیم:<!DOCTYPE html>
<html>
<head>
<title>List</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Bangers">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type="text/css">
html {
font-size: 10px;
font-family: 'Bangers';
}
.post {
max-width: 30rem;
margin: 2rem;
float: left;
}
a {
font-size: 4rem;
text-decoration: none;
color: #1e1f23;
text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
</style>
</head>
<body>
<div class="post"><a class="fun-hover" href="#">Check out React For Beginners</a></div>
<div class="post"><a class="fun-hover" href="#">Are you a Sublime Text Power User?</a></div><br/>
<div class="post"><a class="fun-hover" href="#">I love to learn!</a></div>
<div class="post"><a class="fun-hover" href="#">I <br>sure<br>do<br>love<br>Flexbox! </a></div>
</body>
</html> تا اینجا اگر خروجی را در مرورگر مشاهده کنید به صورت زیر خواهد بود:
همانطور که گفته شد، تمامی لینکها دارای کلاس fun-hover هستند. برای قرار دادن یک پس زمینه با استفاده از ویژگیهای background-image و linear-gradient به صورت زیر عمل میکنیم:.fun-hover {
background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%);
background-image: linear-gradient(to right, transparent 50%, #fee603 50%);
}بدین ترتیب از 0 تا 50% اول transparent و 50% دوم زرد رنگ خواهد شد:
برای اینکه هر رنگ به صورت کامل متن مورد نظر را پوشش دهد، ویژگی [tag]background-size: 200%[/tag] را به صورت زیر اعمال میکنیم:.fun-hover {
background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%);
background-image: linear-gradient(to right, transparent 50%, #fee603 50%);
background-position: 0;
background-size: 200%;
}با این کار رنگ transparent کل متن را پوشش میدهد. حال، حالت هاور را برای این کلاس تعریف میکنیم:.fun-hover {
background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%);
background-image: linear-gradient(to right, transparent 50%, #fee603 50%);
background-position: 0;
background-size: 200%;
}
.fun-hover:hover {
background-position: -100%;
}با این کار زمانی که بر روی لینکها هاور میکنیم، پس زمینه به اندازهی 100% جابهجا شده و رنگ آن از transparent به زرد تبدیل میشود. برای اینکه این تغییر به صورت یک انیمیشن اعمال شود، به صورت زیر عمل میکنیم:.fun-hover {
background-image: -webkit-linear-gradient(left, transparent 50%, #fee603 50%);
background-image: linear-gradient(to right, transparent 50%, #fee603 50%);
background-position: 0;
background-size: 200%;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.fun-hover:hover {
background-position: -100%;
}مدت این تغییر را برابر با 0.4 ثانیه قرار میدهیم؛ بنابراین تغییر پسزمینه در این زمان اتفاق خواهد افتاد. خروجی به صورت زیر خواهد بود:
افکت عکس در html
برای استایلدهی به تصاویر خود همیشه لازم نیست که از نرم افزار فتوشاپ استفاده کنید. برخی جلوههای جالب را میتوان با کمک Html، Css و jQuery به دست آورد. در ادامه با نحوهی ایجاد انواع افکت تصاویر در html با ما همراه باشید. نکته: برخی ویژگیهای CSS که در ادامه به شما کمک میکنند تا افکتهایی زیبا ایجاد کنید، عبارتند از:
extraImgs: با استفاده از این ویژگی میتوانید تعداد کپیهایی که از تصویر گرفته میشود را تعیین کنید.
opacity: شفافیت هر عکس را تعیین میکند.
bgfixed: تعیین میکند که آیا تصویر پس زمینه و اصلی ثابت باشد یا متحرک.
perspective: با استفاده از این ویژگی میتوانید فاصلهی دید خود را مشخص کنید.
جمعبندی: طراحان وب میتوانند با استفادهی متناسب از افکت هاور به صفحات وب خود، زیبایی چشمنوازی ببخشند. شما میتوانید با بهرهگیری از افکتهای معرفی شده در این مقاله و سفارشیسازی آنها، زیبایی صفحات خود را چند برابر کنید. همچنین میتوانید از افکتهای موجود در سایتهایی مانند codepen استفاده کنید. اگر از خواندن مقالهی آموزش hover در CSS لذت بردید، نظرات خود را با ما به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل میشوی که آمادهی استخدام ، دریافت پروژه و کسب درآمد هستی.
سلام خسته نباشید
چطوری یه چیزیو پنهان کنیم و وقتی رفت روی یه چی دیگه ظاهر شه
مثل منو که وقتی میری روش چند گزینه دیگه ظاهر میشه
نازنین کریمی مقدم۰۲ دی ۱۴۰۲، ۱۶:۵۴
درود
میتونید از ویژگی display: none در استایل استفاده کنید و در بخش هاور این ویژگی رو مجدد فعال کنید تا آیتمها ظاهر بشه.
مانی۲۳ آذر ۱۴۰۲، ۰۹:۰۰
سلام من چطور میتونم با css یه تصویر دیگه روی تصویرم نمایان کنم مانند افکت هاور باشه
نازنین کریمی مقدم۰۲ دی ۱۴۰۲، ۱۸:۰۲
درود
از این لینک میتونید کمک بگیرید:
https://stackoverflow.com/questions/71925154/making-image-hover-over-another-image
امبر۱۲ آذر ۱۴۰۲، ۱۹:۳۹
سلام من میخوام وقتی کارت سایتم هاور شد زوم بشه و از کادر بیرون نزنه میتونین راهنماییم کنین
نازنین کریمی مقدم۱۸ آذر ۱۴۰۲، ۱۳:۱۵
درود
اگر کد رو درون یک کدپن آپلود کنید و لینکش رو اینجا بفرستید، میتونم بهتر کمک تون کنم.
افشاری۲۱ مهر ۱۴۰۲، ۱۰:۵۵
سلام
من میخواستم توو سایت خودم یه گیف بذارم ولی فقط وقتی شروع به حرکت کنه که با ماوس میرم رووش.. ممکنه راهنمایی ام کنید.. ممنون میشم
نازنین کریمی مقدم۲۲ مهر ۱۴۰۲، ۱۰:۱۶
درود
شما نمیتونید اجرای گیف رو کنترل کنید. بهترین راه اینه که یک تصویر مثلا png رو در کنار گیف داشته باشید و اگر موس روی تصویر اول رفت، دومی ظاهر بشه. نمونه کدش رو در کدپن زیر میتونید ببینید:
https://codepen.io/QDeltaE/pen/VWGYOB
۲۹ مرداد ۱۴۰۲، ۱۰:۴۲
سلام مقاله عالی بود اگر میشه هاورهای 3 بعدی بیشتری اضافه کنید مثل همون سه تا کارت کارتون عالیه
۲۵ مرداد ۱۴۰۲، ۲۳:۰۳
سلام ببخشید من دکمههای سایتم داخل گوشی استایل هاور ندارن یعنی میخوام وقتی کلیک کنم روش عکس العمل نشون بده اما فقط تو سیستم تغییر رنگ و شکل میدن میشه بگید چکار کنم
نازنین کریمی مقدم۰۶ شهریور ۱۴۰۲، ۰۶:۱۱
درود
برای این هست که اصولا هاور برای حرکت موس تعریف شده که خب این امکان در گوشی نیست و بجاش باید از تاچ استفاده کنید.
۱۹ مرداد ۱۴۰۲، ۱۱:۵۱
سلام ببخشید اسم چهار تا کد باکس هست تو هر کدوم عدد هست و از ۰ شروع میشن تا خود عدد مثل مثلاً تعداد دانشجویان تعداد جزوات
میشه لطف کنین اسمش رو بگین
نازنین کریمی مقدم۰۸ شهریور ۱۴۰۲، ۰۵:۳۱
درود
متوجه نشدم... لینک نمونه اش رو دارید که بفرستید؟
۲۵ تیر ۱۴۰۲، ۱۳:۴۰
سلام
یه چیزی دیدم که وقتی موس میرفت روی یک کلمه خاص یه پنجره باز میشد و اون کلمه رو توضیح میداد مثالش هم تو سایت https://simple.wikipedia.org/wiki/Paris میتونید ببینید
میخواستم ببینم چجوری ممکنه اینجور بشه؟
نازنین کریمی مقدم۱۹ شهریور ۱۴۰۲، ۱۱:۰۱
درود
میتونید از تگ abbr استفاده کنید به همین منظور ساخته شده.
۰۴ خرداد ۱۴۰۲، ۰۶:۳۸
سلام و عرض ادب
می خواستم که وقتی ماوس روی المان میره المان بزرگ بشه.مثلا چند تا جدول قیمت که کنار همدیگه هستن و وقتی ماوس روی هرکدام برود از
بقیه بزرگتر شود. ممنون.
نازنین کریمی مقدم۲۵ خرداد ۱۴۰۲، ۲۰:۰۰
درود
باید این بخش مقاله رو بر هریک از المانهای جدولتون اعمال کنید: کد بزرگ شدن عکس با رفتن موس روی آن تا اندازه دلخواه
۲۵ اسفند ۱۴۰۱، ۰۷:۰۱
سلام اگه میشه ویدیو آموزشی در رابطه با ساخت فیلتر قیمت در طراحی سایت بذارید
نازنین کریمی مقدم۲۵ اسفند ۱۴۰۱، ۱۲:۴۶
درود
یک لینک نمونه از چیزی که مدنظرتون هست رو میفرستید؟
۱۶ دی ۱۴۰۱، ۱۷:۲۶
با سلام و عرض ادب مجدد
ببخشید چطوری نمادهای اعتماد ( آینماد ، ساماندهی و ... ) مثل سایت سون لرن کوچیک و اونجوری کنار هم باید در سایت استفاده کنیم و پشتش یه صفحه سفید قرار بدیم؟
نازنین کریمی مقدم۱۷ دی ۱۴۰۱، ۰۶:۱۳
درود
باید در فوتر چهار div درنظر بگیرید و بهش با استایل بکگراند بدید. در نهایت هر آیکون رو بهش اضافه کنید و لینک رو درون کلیک آیکون بگذارید.
۱۶ دی ۱۴۰۱، ۱۷:۰۱
با سلام و عرض خسته نباشید به این سون لرن
ببخشید من میخوام به عکس هایی مثل آپارات و روبیکا و ... اینا که در فوتر سایتم گذاشتم ، هاور اضافه کنم
ینی چی
مثلا عکس هامو من بصورت svg از رسانههای وردپرس قرار دادم تو یک صفحه کنار هم
میخوام روی هر کدوم که کلیک میشه یا هاور میشه ، رنگش قرمز بشه
خیلی دنبال همچین چیزی میکردم اصلا نمیدونم باید چی جستجو کنم
امیدوارم منظورم و تونسته باشم برسونم
نازنین کریمی مقدم۱۷ دی ۱۴۰۱، ۰۶:۱۱
درود
از کدهای همین مقاله استفاده کنید. تگ img تون رو درون کلاس هاور بگذارید اوکی میشه.
۱۶ دی ۱۴۰۱، ۱۰:۳۲
سلام خسته نباشید ،وقتی بخوایم چندتا باکس رو با هم یکجا هاور کنیم طوری که موس رو بین باکسها که حرکت میدیم رنگشون تغییر کنه و از باکس اول تا باکس آخر که موس رو حرکت میدیم رنگ تغییر کنه ،چه کدی دقیقا باید بزنیم ؟
نازنین کریمی مقدم۱۶ دی ۱۴۰۱، ۱۴:۰۶
درود
میتونید با عدد بهشون آیدی بدید و با جاوا اسکریپت مدیریت کنید.
یا میتونید <a href="http://jsfiddle.net/davidThomas/kVjrh/8/" target="_blank" rel="noopener nofollow ugc">با استایل</a> مدیریت کنید.
۲۲ تیر ۱۴۰۱، ۱۵:۴۷
من کد css این هاور رو میخوام
ممنون میشم بهم کمک کنید
ولی متاسفانه هیچ کدی بهم داده نشد!
میشه کدهای مربوط به این را در اختیار من قرار بدهید؟؟؟
ممنون میشم
نازنین کریمی مقدم۲۶ تیر ۱۴۰۱، ۰۴:۳۲
درود
دوست عزیز این سایت با وردپرس و پلاگین المنتور پیاده سازی شده و برای همین باید خودتون دست به کد بشید.
ویژگیهایی که در کامنت قبلی گفتم برای تصویر و متن تون در نظر بگیرید و بعد با هاور به این صورت تغییرشون بدید:
<code>margin-top: 340px!important;
transform: translateX(0px) translateY(-100%)!important;
position: relative;
z-index: 2;</code>
۱۸ تیر ۱۴۰۱، ۰۷:۵۷
سلام بنده میخواستم دقیقا مشابه لینکی که براتون میفرستم جایی که تصاویر دموها بارگذاری شده ، وقتی ماوس روی آنها قرار میگیرد به ارامی به سمت بالا حرکت میکند و وقتی ماوس برداشته میشود دوباره تصویر به سمت پایین بر میگردد.
https://tabaneshahr...com/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87%DB%8C/
من کد css این هاور رو میخوام
ممنون میشم بهم کمک کنید
نازنین کریمی مقدم۱۸ تیر ۱۴۰۱، ۰۹:۲۲
درود
شما باید سایز تصویر رو بزرگتر از div پدرش در نظر بگیرید و در کد هاورتون تصویر رو تکون بدید.
بعد از برداشتن هاور هم باید مجددا به همون فاصله برگرده پایین. این کار با جاوا اسکریپت شاید راحتتر باشه البته پیشنهاد میکنم هردو رو تست کنید.
۰۶ خرداد ۱۴۰۱، ۱۹:۳۹
سلام چطور این دکمه رفتن به بالا را در پایین صفحه شناور کردید
نازنین کریمی مقدم۰۷ خرداد ۱۴۰۱، ۰۷:۳۵
درود
<a href="https://codesandbox.io/s/kmehg" target="_blank" rel="noopener nofollow ugc">این لینک</a> رو ببینید.
۱۹ فروردین ۱۴۰۱، ۱۲:۲۶
سلام چگونه وقتی موس و میبریم رویه عکس توضیحی به صورت یک کادر کوچیک نشون بده زیرش به عنوان توضیحات؟
نازنین کریمی مقدم۲۰ فروردین ۱۴۰۱، ۱۷:۲۵
درود
کافیه متن توضیح رو در یک پاراگراف بگذارید و بهش یک کلاس نسبت بدید که با هاور فعال و غیر فعال بشه.
برای مشاهده مثال عملی <a href="https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering" target="_blank" rel="noopener nofollow ugc">این لینک</a> رو مطالعه کنید.
۱۲ بهمن ۱۴۰۰، ۱۸:۴۱
سلام
این اون سایتی نبود که من میگفتم اون سایت را هر چی میگردم پیدا نمیکنم ولی این سایت اون چیز ی را که من میخواهم تقریبا نشان داده ببینید وقتی که به سمت پایین میآورید سایت را تصاویر به آرامی از پایین به بالا ظاهر میشوند حالا من میخواهم به آرامی از چپ به راست وارد شود و بالعکس این لینک سایت ولی اون سایتیکه من میگویم نیست چون در تاریخچه گوشیمم گشتم پیدا نکردم کدام بود امیدوارم منظورم را فهمیده باشد چی میخواهم
نازنین کریمی مقدم۱۳ بهمن ۱۴۰۰، ۱۲:۵۰
سلام
چیزی که دنبالش هستید اغلب به عنوان lazy loading استفاده میشه.
<a href="https://codepen.io/charkins/pen/XmVRvr" rel="nofollow ugc">این کد</a> کمابیش شما رو به هدفتون میرسونه.
۰۶ بهمن ۱۴۰۰، ۱۵:۵۰
سلام
من میخوام در سایتم یک افکتی بدم که وقتی موس را به سمت پایین میآورم تصاویر یا متن به صورت خیلی آرام از طرف مثل چپ یا راست سایت نمایش داده شود یا ظاهر شود یک سایتی دیدم این جوری بود خیلی توجهم را جلب کرد من میخواهم درست کنم ولی هر چی میگردم چیزی پیدا نمیکنم
Help Please
نازنین کریمی مقدم۰۹ بهمن ۱۴۰۰، ۱۱:۵۳
سلام
بی زحمت اون سایتی که دیدید رو اینجا بگذارید تا بتونم بهتر بهتون کمک کنم. (شنیدن کی بود مانند دیدن :) )
۱۸ دی ۱۴۰۰، ۲۲:۵۲
سلام
ببخشید چگونه یک دکمه بسازم
که در حالت عادی ایستاده ولی وقتی موس روی آن میگیری کمی به سمت پایین بیاید و وقتی موس را میبری بر گردد سر جای خودش میخواهم حالت up و down داشته باشه
نازنین کریمی مقدم۱۹ دی ۱۴۰۰، ۰۵:۳۳
درود
کد دقیقش در مقاله <a href="https://7learn.com/blog/create-a-button-with-css-html-javascript#collapseArticleList" rel="noopener" target="_blank">آموزش ساخت دکمه با HTML و CSS و جاوا اسکریپت</a> بخش معرفی Hover.css هست.
۱۵ دی ۱۴۰۰، ۱۸:۱۵
سلام و درود
از مطالب خیلی خوب و توضیحات عالی تشکر میکنم. خیلی خوب
چند وقت پیش سایت امداد موبایل دیدم یک سری لوگو برند موبایل را در صفحه اصلی گذاشته است که لوگو به حالت عادی لوزی گوشو محو است ولی وقتی که روی لوگو میآیم مستطیل کامل میشود.
می خواستم اگرر ممکن است راهنمایی فرمایید چطور این امر امکان پذیر است.
نازنین کریمی مقدم۱۷ دی ۱۴۰۰، ۱۶:۱۵
درود
برای اینکار کافیه یکم با border بازی کنید. برای مثال در حالت لوزی کافیه این کد رو در یک کلاس بدید و در هاور برای اینکه مستطیل پر بشه غیرفعالش کنید:
<code>
border-radius: 30% 70% 33% 67%/65% 33% 67% 35% !important;
transition: .3s !important;
</code>
وحید۱۴ آذر ۱۴۰۰، ۰۸:۴۷
سلام خسته نباشید
من بعضی سایتهای خارجی رو دیدم که برای نمایش دموهای خود یه اسکرین شات فول از سایت گرفتن(عکس) بعد موقعی که روی اون عکس میری کل اون عکس از بالا تا پایین خیلی نرم نمایش داده میشه
نمیدونم خوب تونستم توضیح بدم یا نه!
میخواستم بپرسم که برای همچین امکانی از کد استفاده شده یا پلاگین؟ و اگه ممکنه کمکم کنید خیلی دنبالش گشتم ولی چیزی پیدا نکردم احتمالا اشتباه سرچ میکنم
Nazanin KarimiMoghaddam۱۴ آذر ۱۴۰۰، ۱۱:۲۴
درود
امکانش هست از دمو یا مثالهای مشابه چیزی که میفرمایید یه لینکی چیزی بدید تا بهتر بتونم کمک تون کنم؟
fateme۱۷ شهریور ۱۴۰۰، ۱۴:۵۱
ممنون از مقاله ی مفیدتون
سوالی داشتم..من میخوام وقتی موس بره روی کارکتر زیرش یه خط ساده با رنگ متفاوت ایجاد بشه، از چ کدی باید براش استفاده کنم؟
نازنین کریمی مقدم۱۹ شهریور ۱۴۰۰، ۱۸:۳۱
درود
فقط زیر همون کاراکتر درون یک رشته یا کل رشته؟ حالت اول مثلا میشه وقتی شما روی حرف س در کلمه سلام موس رو میذارید زیر س خط بکشه، حالت دوم زیر کل کلمه سلام خط میکشه.
محمود۳۰ خرداد ۱۴۰۰، ۰۴:۰۶
سلام و عرض ادب
چگونه میتوان با هاور افکت صدا به متن اضافه کنیم. یعنی با رفتن موس روی متن صوت پخش بشود. با تشکر.
نازنین گودرزی۳۱ خرداد ۱۴۰۰، ۱۶:۲۴
سلام وقت بخیر. میتونید از این <a href="https://css-tricks.com/play-sound-on-hover/" target="_blank" rel="noopener nofollow ugc">کدهای آماده</a> استفاده کنید.
amir۰۹ فروردین ۱۴۰۰، ۱۰:۱۳
خیلی ممنون از مثالهای زیباتون
نازنین کریمی مقدم۱۸ بهمن ۱۳۹۹، ۰۹:۰۶
درود. ممنون که با ما همراه هستید.
برای این کار راههای مختلفی هست. هم میشه از پلاگین آماده جی کوئری استفاده کرد، هم با استایل مدیریت کرد و هم کد جاوا اسکریپت نوشت.
با توجه به سورس کدی که دادید، توصیه میکنم روی راه حل سوم تمرکز کنید و <a href="https://stackoverflow.com/questions/21454318/stop-slideshow-on-mouseover" target="_blank" rel="noopener nofollow ugc">این لینک</a> رو ببینید.
آکار۲۸ آذر ۱۳۹۹، ۰۸:۲۱
سلام وقتتون بخیر
اینخا واقعا جذابن
ولی من موفق نشدم استفادشون کنم.امکانش هست راهنماییم کنین که هاور سه بعدی رو چجوری میتونم توی سایت اجراش کنم؟؟
نازنین گودرزی۲۸ آذر ۱۳۹۹، ۱۹:۰۰
سلام وقت بخیر. تنها کافی هست که دو فایل html و css رو ایجاد کنید و به هم متصلشون کنید. در نهایت کدهای هر فایل رو از سایت کپی کنید. بعد میتونید فایل html رو توی مرورگرتون باز کنید و نتیجه رو ببینید.
یه غریبه۱۹ آذر ۱۳۹۹، ۱۲:۴۸
ببخشید چیزی راجب این کدها توضیح نمیدید؟
نازنین گودرزی۱۹ آذر ۱۳۹۹، ۱۵:۳۹
سلام. برای اینکه کدها رو متوجه بشید باید html و css بلد باشید و توضییح دادنش توی مقاله امکان پذیر نیست البته برای یادگیری میتونید از دورهی <a href="https://7learn.com/course/web-design-expert" target="_blank" rel="noopener noreferrer nofollow ugc">آموزش طراحی سایت</a> سون لرن استفاده کنید.
فرزاد۰۴ آبان ۱۳۹۹، ۱۲:۱۸
سلام بسیار عالی بود زحمت کشیدید
نازنین گودرزی۰۴ آبان ۱۳۹۹، ۱۷:۴۸
سلام. ممنون از همراهی شما.
AminAli۲۹ شهریور ۱۳۹۹، ۰۷:۲۲
عالی ، خیلی ممنون
نازنین گودرزی۲۹ شهریور ۱۳۹۹، ۰۹:۵۱
ممنون از همراهی شما.
mohammad۲۴ شهریور ۱۳۹۹، ۱۳:۴۱
سلام خسته نباشید
من یه منویی طراحی کردم که صفحه ی اصلی و ارتباط با ما و تماس با ما در سمت راست قرار داره
و ثبت نام و ورود را در سمت چپ با استفاده از margin-right تنظیم کردم و hover گذاشتم
مشکلی که دارم اینه وقتی ماوس به حد فاصل بین این دو گروه المان میره باز هم روی بخش ثبت نام هاور انجام میشه
چیکار باید انجام بدم که درست بشه
نازنین کریمی مقدم۰۲ مهر ۱۳۹۹، ۱۰:۵۹
سلام.
ببینید ما توی استایل به المانی که میخوایم هاور بشه این ویژگی رو میدیم و شرایطشو تعریف میکنیم. شما احیانا هاور رو برای حد فاصل هم تعریف نکردید؟ چون قاعدتا اگر روی ثبت نام و ورود گذاشته باشید، فقط همونا باید هاور بشن.
Line Theme۳۱ مرداد ۱۳۹۹، ۰۹:۵۲
سلام
ببخشید شما به سوالات هم پاسخ میدید؟؟؟
اگر بله از اینجا یا از طریق ایمیل؟؟؟
نازنین گودرزی۳۱ مرداد ۱۳۹۹، ۱۰:۴۹
سلام بله. همینجا پاسخ میدیم.
behrooz۰۸ خرداد ۱۳۹۹، ۱۴:۴۷
واقعا مطالب جالب و کاربردیه . ..
نازنین گودرزی۰۸ خرداد ۱۳۹۹، ۲۱:۴۱
ممنون از توجه و همراهی شما با سون لرن.
Mohsen7۰۸ خرداد ۱۳۹۹، ۱۳:۳۲
خیلی جالبه،یادمه 15سال پیش برای ساختن Buttonهای قشنگ و واکنشی کلی توی سایتها دنبال نمونه اش میگشتیم و نمونه هاشو که با جاوااسکریپت نوشته میشد پیدا میکردیم :)
نازنین گودرزی۰۸ خرداد ۱۳۹۹، ۲۱:۴۲
بله اما الان این امکان فراهم هست تا با استفاده CSS، افکتها و انیمیشنهای پیچیده رو با چند خط کد ساده ایجاد کنید.
ممنون از توجه و همراهی شما با سون لرن.