روز بخیر، دوستان! این مقاله دیگری است که به درخواست یکی از خوانندگان وبلاگ من نوشته شده است. امروز ما قابلیت نمایش یک تصویر را در هنگام قرار دادن نشانگر ماوس روی یک لینک پیاده سازی خواهیم کرد. چرا این ممکن است ضروری باشد؟ همه چیز بسیار ساده است، به این ترتیب می توانید در فضای سایت صرفه جویی کنید و در عین حال لینک ها را احیا کنید.

همانطور که می دانید برای پیاده سازی تصاویر پاپ آپامکان پذیر با کمک جی کوئری، CSS و همچنین HTML. در مقاله امروز پست خواهم کرد کد تمام شدهاین اثر، و همچنین چند نمونه های خوب. هر اسکریپت بسیار ساده است و با استفاده از CSS+HTML ایجاد شده است. من دیگر شما را عذاب نمی دهم و راه حل های آماده به شما می دهم!

تصویر بازشو در حالت شناور

a.site-ssilka:hover+div

بگذارید نکات اصلی را به اختصار توضیح دهم. برای نمایش یک تصویر پاپ آپ باید به تگ مراجعه کنید با مشخصه src و بعد از علامت مساوی در گیومه، مسیر تصویر را بنویسید، پس از آپلود آن در پوشه ریشهسایت.

برچسب بزنید <а> با پارامتر اجباری href مسئول ایجاد و نمایش یک پیوند است (در مثال من، این متن است).

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

ویژگی alt به موتورهای جستجو اجازه می دهد تا آنچه را که در تصویر نشان داده شده است با دقت بیشتری تشخیص دهند.

برای وضوح، بخشی از کد را که به احتمال زیاد می خواهید تغییر دهید، برجسته کرده ام.

هنگام قرار دادن ماوس روی پیوند، متن بازشو

a.site-ssilka:hover+div

جسورتر!!! روی من شناور باش!

همانطور که در مثال مشاهده می کنید، هنگامی که ماوس را روی متن قرار می دهید، یک راهنمای ابزار متنی ظاهر می شود.

ناپدید شدن تصویر هنگام قرار دادن ماوس روی پیوند

a.site-ssilka:hover+div

جسورتر!!! روی من شناور باش!

برای افزودن یک افکت خاص در بالا، کافی است کدی را که مناسب شماست کپی کرده و در آن جایگذاری کنید ویرایشگر متن. بنابراین، یک پیوند با یک تصویر پاپ آپ / ناپدید می شود در هر نقطه از مقاله می تواند نوشته شود.

نکته مهم!هر یک از اسکریپت های ارائه شده به اعتبار سایت لطمه ای وارد نمی کند.

به نظر من اجرای کار با افزودن یک اسکریپت خاص به فایل سبک قالب شما که معمولا style.css نامیده می شود، به همان اندازه راحت است.

تصویر بازشو CSS

موقعیت: نسبی;

تصویر کوچک: شناور(

گستره تصویر کوچک (/*CSS برای تصویر بزرگ شده*/

موقعیت: مطلق;

پس زمینه رنگ: #3d3d3d;

حاشیه: 1px سفید جامد.

دید: پنهان؛

text-decoration: هیچ;

حاشیه-شعاع: 4px 4px 4px 4px;

Moz-border-radius: 4px 4px 4px 4px;

Webkit-border-radius: 4px 4px 4px 4px;

فاصله تصویر کوچک img( /*CSS برای تصویر بزرگ شده*/

عرض مرز: 0

تصویر بندانگشتی: span (/*CSS برای تصویر بزرگ شده در شناور*/

دید: قابل مشاهده

سمت چپ: 60px; /*موقعیتی که تصویر بزرگ شده باید به صورت افقی جابجا شود */

برای نمایش یک پنجره پاپ آپ هنگام قرار دادن ماوس روی پیوند، پیوند زیر را در متن وارد کنید:

علاوه بر این، یک پیوند با یک تصویر پاپ آپ را می توان در آن درج کرد بخش معینالگوی شما برای این کار کد زیر را به فایل index.php اضافه کنید. این فایلی است که آرایش بصری عناصر سایت را تعریف می کند.

در صورتی که با CSS آشنایی ندارید، توضیح خواهم داد که ورودی img.animate1:hover به مرورگر می گوید که برای همه عناصر ، با ویژگی کلاس برابر با animate1، هنگامی که با نشانگر ماوس روی آنها قرار می گیرید، استایل های مشخص شده را اعمال کنید. و سبک ها بین آنها مشخص شده است آکولاد(و). اگر همه چیز به درستی انجام شود، باید چیزی شبیه به این باشد:

می توانید در آن عکس بگیرید حالت اصلیشفاف باشد، و هنگامی که ماوس را روی آن قرار می دهید، آن را غیر شفاف کنید. سپس باید خطوط زیر را به فایل CSS اضافه کنید:

img.animate1(
فیلتر: آلفا (Opacity=25);
کدورت: 0.25
}
img.animate1:hover(

کدورت: 1
}

نتیجه به این صورت خواهد بود:

برای جلوه بیشتر، می توانید تغییرات در شفافیت تصویر را کاهش دهید. برای این کار می توانید از ویژگی CSS transition استفاده کنید که افکت انتقال بین دو حالت یک عنصر را تنظیم می کند. برای مثال، اجازه دهید یک ثانیه کاهش سرعت را اضافه کنیم. سپس کد CSS ما به شکل زیر خواهد بود:

img.animate1(
فیلتر: آلفا (Opacity=25);
کدورت: 0.25
-moz-transition: همه 1 ها ease-in-out. /* جلوه انتقال برای فایرفاکس قبل از نسخه 16.0 */
-webkit-transition: همه 1 ها ease-in-out. /* جلوه انتقال برای Chrome تا نسخه 26.0، Safari، Android و iOS */
-o-transition: همه 1ها ease-in-out. /* جلوه انتقال برای Opera قبل از نسخه 12.10 */
انتقال: همه 1 ها ease-in-out; /* جلوه انتقال برای مرورگرهای دیگر */
}
img.animate1:hover(
فیلتر: آلفا (Opacity=100);
کدورت: 1
}

نتیجه:

با استفاده از ویژگی تبدیل، تصویر را می توان مقیاس، چرخش، جابجایی، کج کرد. بیایید سعی کنیم تصویر را بزرگ کنیم. سپس کد css به این صورت خواهد بود:

img.animate1(


- o-transition: همه 1 ها سهولت.
انتقال: همه 1 ها سهولت.
}
img.animate1:hover(
- moz-transform: مقیاس (1.5)؛ /* جلوه تبدیل برای فایرفاکس قبل از نسخه 16.0 */
- webkit-transform: مقیاس (1.5)؛ /* جلوه تبدیل برای Chrome تا نسخه 26.0، Safari، Android و iOS */
- o-transform: مقیاس (1.5)؛ /* جلوه تبدیل برای Opera قبل از نسخه 12.10 */
- ms-transform: مقیاس (1.5)؛ /* جلوه تبدیل برای IE 9.0 */
transform:scale(1.5); /* جلوه تبدیل برای سایر مرورگرها */
}

و نتیجه به این صورت خواهد بود:

چرخش را می توان برای بزرگنمایی تصویر اضافه کرد. سپس سبک های css کمی تغییر می کند:

img.animate1(
moz-transition: all 1s ease;
webkit-transition: all 1s ease;
- o-transition: همه 1 ها سهولت.
انتقال: همه 1 ها سهولت.
}
img.animate1:hover(
- moz-transform: مقیاس چرخشی (360 درجه) (1.5)؛
- webkit-transform: مقیاس چرخش (360 درجه) (1.5)؛
- o-transform: مقیاس چرخشی (360 درجه) (1.5)؛
- ms-transform: مقیاس چرخشی (360 درجه) (1.5)؛
transform: rotate(360deg) scale(1.5);
}

نتیجه:

در بالا، مواردی را در نظر گرفتیم که یک تصویر در انیمیشن نقش داشته باشد. بعد، در نظر بگیرید نحوه جایگزینی یک تصویر با تصویر دیگر. در این حالت معمولاً دو تصویر با اندازه یکسان تهیه می شود: یکی برای نمای اصلی و دیگری برای جایگزینی آن.

فرض کنید دو عکس داریم، یکی سیاه و سفید و دیگری رنگی:

اجازه دهید آن را طوری تنظیم کنیم که وقتی ماوس را روی یک تصویر سیاه و سفید نگه می دارید، یک تصویر رنگی نمایش داده شود. برای انجام این کار، تصویر اصلی را با استفاده از ویژگی پس‌زمینه، پس‌زمینه عنصر div می‌کنیم. و هنگامی که ماوس را روی تصویر مکان نما نگه دارید، ما تغییر خواهیم کرد تصویر پس زمینهبا استفاده از همان ویژگی hover pseudo-class و background. برای پیاده سازی این اثر در صفحه htmlیک عنصر div را با کلاس rotate1 اضافه کنید:

و توضیحات سبک زیر را اضافه کنید:

div.rotate1(
پس زمینه: url (img/2.jpg)؛ /* مسیر فایل با تصویر اصلی */
عرض: 480 پیکسل /*عرض عکس*/
ارتفاع: 360px; /* ارتفاع تصویر */
}
div.rotate1:hover(
پس زمینه: url (img/1.jpg)؛ /* مسیر فایل با تصویر جایگزین شده */
}

و نتیجه:

این روش یک اشکال قابل توجه دارد. از آنجایی که تصویر دوم تنها زمانی بارگذاری می‌شود که نشانگر روی آن قرار گیرد، اگر کاربر اینترنت کندی داشته باشد و حجم فایل همراه با تصویر بزرگ باشد، تصویر با مکث نمایش داده می‌شود. بنابراین، در زیر چند روش دیگر برای جایگزینی تصاویر در هنگام نگه داشتن نشانگر ماوس در نظر خواهیم گرفت.

روش بعدی بر اساس ترکیب دو تصویر در یک فایل خواهد بود. فرض کنید باید دکمه ای را روی صفحه قرار دهیم که وقتی نشانگر ماوس روی آن قرار می گیرد، ظاهر آن تغییر می کند. برای انجام این کار، دو تصویر را در یک فایل ترکیب می کنیم و تصویر حاصل چیزی شبیه به این خواهد بود:

در این حالت، تغییر از یک الگو به الگوی دیگر با جابجایی انجام خواهد شد تصویر پس زمینهبه صورت عمودی با استفاده از ویژگی background-position. از آنجایی که وقتی روی دکمه کلیک می کنید، معمولاً به صفحه دیگری می روید، تصویر را در عنصر قرار می دهیم< a>. سپس کد زیر را در صفحه html قرار دهید:

و در یک فایل css مانند این:

a.rotate2(
پس زمینه: url (img/button.png)؛ /* مسیر فایل با تصویر اصلی */
display:block; /* پیوند به عنوان یک عنصر بلوک */
عرض: 50 پیکسل /* عرض تصویر بر حسب پیکسل */
ارتفاع: 30 پیکسل؛ /* ارتفاع تصویر */
}
a.rotate2:hover(
موقعیت پس زمینه: 0-30px. /* افست پس زمینه */
}

نتیجه:

و آخرین راه برای امروز زمانی است که یک تصویر در زیر تصویر دیگر قرار می گیرد cssموقعیت: قوانین مطلق در این حالت دو تصویر را داخل ظرف div قرار می دهیم:

و استایل های css را اضافه کنید:

متحرک 2(
موقعیت:نسبی;
margin:0 auto;/* بلوک div را در مرکز صفحه تنظیم کنید*/
عرض: 480 پیکسل /* عرض */
ارتفاع: 360px; /* قد */
}
.animate2 img(
موقعیت: مطلق; /* موقعیت یابی مطلق*/
سمت چپ: 0; /* تصاویر را به سمت چپ تراز کنید گوشه بالا div-a*/
بالا: 0; /* تصاویر را در گوشه سمت چپ بالای div تراز کنید */
}

پس از افزودن قوانین css، تصاویر یکی زیر دیگری قرار می گیرند. اکنون شفافیت تصاویر را با خواص کدورتدر حالت عادی، تصویر دوم را نشان خواهیم داد و زمانی که ماوس را روی تصویر اول قرار دهید. برای انجام این کار، در حالت عادی، تصویر را با کلاس اول کاملاً شفاف می کنیم و وقتی مکان نما را نگه می دارید، برعکس است: تصویر با کلاس دوم کاملاً شفاف می شود و با کلاس اول کاملاً شفاف می شود. شفاف نباشید:

Animate2 img.first ( /* تصویر اول کاملا شفاف است */
کدورت: 0;
فیلتر:آلفا (تعوض=0)؛
}
.animate2:hover img.first ( /* اولین تصویر با شناور غیر شفاف می شود */
کدورت: 1;
فیلتر:آلفا (تعوض=100)؛
}
/* و دومی با شناور شفاف می شود */
کدورت: 0;
فیلتر:آلفا (تعوض=0)؛
}

نتیجه:

شما می توانید با افزودن ویژگی انتقال CSS به آخرین قانون، به یک انتقال صاف دست پیدا کنید:

Animate2:hover img.second, .animate2 img.second:hover (
کدورت: 0;
فیلتر:آلفا (تعوض=0)؛
-moz-transition: همه 2s ease.
-webkit-transition: همه 2s ease.
-o-transition: همه 2s ease.
انتقال: همه 2 ها سهولت.
}

و نتیجه:

و اگر خاصیت transform را اضافه کنیم:

Animate2:hover img.second, .animate2 img.second:hover (
کدورت: 0;
فیلتر:آلفا (تعوض=0)؛
-moz-transform:scale(0,1);
-webkit-transform:scale(0,1);
-o-transform:scale(0,1);
-ms-transform:scale(0,1);
transform:scale(0,1); /* عرض تصویر را به 0 کاهش دهید */
}

اینجوری میشه:

با ترکیب ویژگی های مختلف CSS، می توانید به موارد مختلفی دست پیدا کنید جلوه های شناورهنگام تغییر تصاویر هنگام نگه داشتن ماوس. من این و نمونه های دیگر را در این صفحه قرار دادم که می توانید کد منبع را نیز دانلود کنید. این همه، تا زمانی که دوباره ملاقات کنیم.

| 18.02.2016

CSS3 امکانات نامحدودی را برای طراحان رابط کاربری باز می کند و مزیت اصلی این است که تقریباً هر ایده ای را می توان به راحتی پیاده سازی کرد و بدون استفاده از جاوا اسکریپت به زندگی تبدیل شد.

شگفت آور است که چگونه چیزهای ساده می توانند یک صفحه وب معمولی را ادویه کنند و آن را برای کاربران قابل دسترس تر کنند. ما در مورد انتقال CSS3 صحبت می کنیم که با استفاده از آن می توانید به عنصر اجازه دهید تا تغییر کند و سبک را تغییر دهد، به عنوان مثال، در حالت شناور. 9 نمونه انیمیشن CSS3 زیر به شما کمک می کند تا یک تجربه واکنش گرا در سایت خود ایجاد کنید و همچنین ظاهر کلی صفحه خود را با انتقال صاف زیبا بهبود بخشید.

برای اطلاعات بیشتر می توانید آرشیو را به همراه فایل ها دانلود کنید.

همه افکت ها با خاصیت انتقال کار می کنند. انتقال- "transition"، "transformation") و شبه کلاس: hover، که سبک عنصر را زمانی که نشانگر ماوس روی آن قرار می گیرد (در آموزش ما) تعیین می کند. برای مثال‌هایمان، از یک div پیکسل 500x309، رنگ پس‌زمینه اولیه #6d6d6d و مدت زمان انتقال 0.3 ثانیه استفاده کردیم.

Body > div ( عرض: 500px؛ ارتفاع: 309px؛ پس‌زمینه: #6d6d6d؛ -webkit-transition: all 0.3s ease;؛ -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; انتقال: همه 0.3s سهولت؛ )

1. تغییر رنگ در شناور

روزی روزگاری، اجرای چنین اثری با محاسبات ریاضی مقادیر خاص RGB کار بسیار پر زحمتی بود. حالا کافی است یادداشت کنید سبک css، که در آن باید کلاس شبه را اضافه کنید: نشانگر را روی انتخابگر قرار دهید و رنگ پس‌زمینه را تنظیم کنید، که به آرامی (در عرض 0.3 ثانیه) هنگامی که ماوس را روی بلوک می‌برید جایگزین رنگ پس‌زمینه اصلی می‌شود:

رنگ: شناور (پس زمینه:#53ea93; )

2. ظاهر قاب

یک دگرگونی جالب و روشن، قاب داخلی است که وقتی روی ماوس می‌روید به آرامی ظاهر می‌شود. برای تزئین دکمه های مختلف مناسب است. برای رسیدن به این افکت، از کلاس :hover و ویژگی box-shadow با پارامتر inset استفاده می کنیم (سایه را در داخل عنصر تنظیم می کند). علاوه بر این، باید کشش سایه (در مورد ما 23 پیکسل است) و رنگ آن را تنظیم کنید:

حاشیه: شناور (box-shadow: inset 0 0 0 23px #53ea93; )

3. تاب

این انیمیشن CSS یک استثنا است، زیرا ویژگی transition در اینجا استفاده نمی شود. در عوض از:

• @keyframes یک دستورالعمل اساسی برای ایجاد یک انیمیشن CSS فریم به فریم است که به شما امکان می دهد به اصطلاح انجام دهید. استوری بورد و انیمیشن را به عنوان لیستی از نکات کلیدی توصیف کنید.
• انیمیشن و انیمیشن-تکرار-شمارش - خواص برای تنظیم پارامترهای انیمیشن (مدت و سرعت) و تعداد چرخه ها (تکرار). در مورد ما، 1 را تکرار کنید.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px)؛ transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing (15% ( -webkit-transform: translateX(9px)؛ transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) .swing:hover (-webkit-animation: s سهولت بال 0.6s; انیمیشن: نوسان 0.6s ease; -webkit-animation-itation-count: 1; انیمیشن-تکرار-تعداد: 1; )

4. پوسیدگی

یک افکت محو اساساً فقط تغییر شفافیت یک عنصر است. انیمیشن در دو مرحله ایجاد می شود: ابتدا باید حالت شفافیت اولیه را روی 1 تنظیم کنید - یعنی شفافیت کامل و سپس مقدار آن را با نگه داشتن ماوس - 0.6 مشخص کنید:

محو شدن ( تیرگی: 1; ) .fade:hover ( opacity: 0.6; )

برای نتیجه مخالف، مقادیر را عوض کنید:

5. زوم کنید

برای بزرگ‌تر کردن کادر هنگام شناور، از ویژگی transform استفاده می‌کنیم و مقدار آن را روی مقیاس (1.2) قرار می‌دهیم. در این حالت، بلوک با حفظ نسبت های خود 20 درصد افزایش می یابد:

رشد: شناور (-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. کاهش

کاهش یک عنصر به اندازه افزایش آن آسان است. اگر در پاراگراف پنجم برای افزایش مقیاس نیاز به تعیین مقدار بیشتر از 1 داشتیم، سپس برای کاهش بلوک، به سادگی مقداری را مشخص می کنیم که کمتر از یک باشد، برای مثال scale(0.7) . اکنون، هنگام نگه داشتن ماوس، بلوک به نسبت 30 درصد از اندازه اصلی خود کاهش می یابد:

Shrink:hover (-webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. تبدیل به دایره

یکی از انیمیشن‌های رایج مورد استفاده، یک عنصر مستطیل شکل است که با نگه داشتن ماوس روی آن به دایره تبدیل می‌شود. با استفاده از ملک css border-radius، که همراه با :hover و transition استفاده می شود، این را می توان بدون مشکل پیاده سازی کرد:

دایره: شناور (شعاع مرزی: 70٪؛ )

8. چرخش

یک گزینه انیمیشن خنده دار این است که یک عنصر را با تعداد معینی درجه بچرخانید. برای انجام این کار، ما دوباره به ویژگی transform نیاز داریم، اما با مقدار متفاوت - rotateZ(20deg). با این پارامترها، بلوک نسبت به محور Z 20 درجه در جهت عقربه های ساعت می چرخد:

چرخش: شناور (-webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg)؛ تبدیل: rotateZ(20deg)؛ )

9. سایه سه بعدی

طراحان در مورد مناسب بودن این اثر در طراحی تخت اختلاف نظر دارند. با این حال، این انیمیشن CSS3 کاملا اورجینال است و در صفحات وب نیز استفاده می شود. با استفاده از ویژگی‌های box-shadow که قبلاً برای ما آشنا هستند، به یک افکت سه‌بعدی دست می‌یابیم (این یک سایه چند لایه ایجاد می‌کند) و با پارامتر translateX (-7px) تبدیل می‌شود (اطمینان حاصل می‌کند که بلوک به میزان 7 پیکسل به‌صورت افقی به چپ منتقل می‌شود. ):

threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 5px #53ea93, 6px 3px #53ea93, 3px 3px #53ea93 -7px)؛ تبدیل: translateX(-7px)؛ )

پشتیبانی مرورگر

ویژگی انتقال در حال حاضر توسط مرورگرهای زیر پشتیبانی می شود:

مرورگرهای دسکتاپ
اینترنت اکسپلورر	پشتیبانی شده توسط IE 10 و بالاتر
کروم	از نسخه 26 پشتیبانی می شود (قبل از اینکه نسخه 25 با پیشوند -webkit- کار کند)
فایرفاکس	از نسخه 16 پشتیبانی می شود (در نسخه های 4-15 با پیشوند -moz- کار می کند)
اپرا	از نسخه 12.1 پشتیبانی می شود
سافاری	از نسخه 6.1 پشتیبانی می شود (در نسخه های 3.1-6 با پیشوند -webkit- کار می کند)

بقیه ویژگی های استفاده شده در این مثال ها، مانند transform، box-shadow و غیره نیز تقریباً توسط همه پشتیبانی می شوند. مرورگرهای مدرن. با این حال، اگر می‌خواهید از این ایده‌ها برای پروژه‌های خود استفاده کنید، اکیداً توصیه می‌کنیم که سازگاری بین مرورگرها را دوباره بررسی کنید.

امیدواریم این نمونه های انیمیشن CSS3 برای شما مفید بوده باشد. ما برای شما موفقیت خلاقانه آرزو می کنیم!

قبل از پرداختن به دکمه ها، اجازه دهید به تنظیماتی که در همه آنها مشترک است نگاهی بیندازیم.

HTML

برای دکمه ها بسیار استفاده خواهد شد html سادهکد:

اشتراک در

css

همچنین تمام دکمه ها خواهد بود تنظیمات عمومیبرای متن نوشته و لغو انتخاب پیوندها:

ButtonText ( فونت: 18px/1.5 Helvetica، Arial، sans-serif؛ رنگ: #fff; ) a (رنگ: #fff؛ متن-تزیین: هیچکدام؛ )

به طور معمول، زمانی که ماوس را روی پیوند یا دکمه قرار می‌دهد، کاربر انتظار یک اثر نسبتاً ملایم را دارد. و در مورد ما، دکمه اندازه را تغییر می دهد - افزایش می یابد و یک پیام اضافی نشان می دهد.

کد CSS اصلی

برای شروع، فقط باید به دکمه یک شکل و یک رنگ بدهیم. ارتفاع 28px و عرض 115px را تعریف کنید، حاشیه و padding اضافه کنید و به دکمه یک حاشیه روشن بدهید.

#button1 (پس‌زمینه: #6292c2؛ حاشیه: 2px جامد #eee؛ ارتفاع: 28px؛ عرض: 115px؛ حاشیه: 50px 0 0 0 50px؛ بالشتک: 0 0 0 7px؛ سرریز: پنهان؛ نمایش: بلوک؛ )

جلوه های CSS3

برخی از افراد دوست دارند یک دکمه ساده با مقدار زیادی کد CSS همراه باشد. AT این بخشسبک های CSS3 اضافی را برای دکمه ما فراهم می کند. شما می توانید بدون آنها کار کنید، اما آنها ظاهر مدرن تری به دکمه می دهند.

گوشه های قاب را گرد کنید و یک گرادیان اضافه کنید. در اینجا یک ترفند کوچک گرادیان تیره وجود دارد که با هر رنگ پس زمینه ای کار می کند.

/*گوشه های گرد*/ -webkit-border-radius: 15px; -moz-border-radius: 15px. حاشیه شعاع: 15 پیکسل. /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)).

انیمیشن CSS

حالا بیایید نصب کنیم انتقال CSS. این انیمیشن برای هر گونه تغییر ویژگی استفاده می شود و نیم ثانیه طول می کشد.

ماوس شناور

زمانی که ماوس را روی آن قرار می دهید، فقط باید یک سبک اضافه کنید تا دکمه را گسترش دهید. دکمه باید 230 پیکسل عرض داشته باشد تا کل پست نمایش داده شود.

#button1: شناور (عرض: 230 پیکسل؛ )

تغییر تن رنگ آسان

یک افکت CSS بسیار ساده و محبوب برای یک دکمه. وقتی مکان نما ماوس را حرکت می دهید به آرامی رنگ پس زمینه تغییر می کند.

کد اصلی CSS

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

#button2 ( پس‌زمینه: #d11717؛ حاشیه: 2 پیکسل توپر #eee؛ ارتفاع: 38 پیکسل؛ عرض: 125 پیکسل؛ حاشیه: 50 پیکسل 0 0 50 پیکسل؛ سرریز: پنهان؛ نمایش: بلوک؛ تراز نوشتار: مرکز؛ ارتفاع خط: 38 پیکسل. )

جلوه های CSS3

گرد کردن گوشه ها، گرادیان پس زمینه و سایه اضافی را تنظیم کنید. با استفاده از rgba سایه را سیاه و شفاف می کنیم.

/*گوشه های گرد*/ -webkit-border-radius: 10px; -moz-border-radius: 10px. شعاع حاشیه: 10 پیکسل /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)). /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2)؛ box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

انیمیشن CSS

انیمیشن عملا مشابه مثال قبلی است.

/*Transition*/ -webkit-transition: همه 0.5s ease. -moz-transition: همه 0.5s ease. -o-transition: همه 0.5s ease. -ms-transition: همه 0.5s ease. انتقال: همه 0.5s سهولت.

ماوس شناور

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

#button2:hover (رنگ پس‌زمینه: #ff3434؛ )

این افکت بسته به انتخاب تصویر پس زمینه می تواند کاملاً چشمگیر باشد. نسخه ی نمایشی از پس زمینه ی غیر توصیفی استفاده می کند و افکت غیر توصیفی به نظر می رسد. سعی کنید از یک تصویر متفاوت استفاده کنید و ممکن است با یک جلوه خیره کننده روبرو شوید.

کد اصلی CSS

قسمت اصلی کد مانند نمونه های قبلی است. توجه داشته باشید که ما از یک تصویر پس زمینه استفاده می کنیم. موقعیت اولیه پس زمینه روی "0 0" تنظیم شده است. هنگامی که ماوس را روی مکان نما نگه دارید، موقعیت به صورت عمودی تغییر می کند.

#button3 ( پس‌زمینه: #d11717 url("bkg-1.jpg")؛ موقعیت پس‌زمینه: 0 0؛ text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3)؛ اندازه قلم: 22px؛ ارتفاع : 58 پیکسل؛ عرض: 155 پیکسل؛ حاشیه: 50 پیکسل 0 0 50 پیکسل؛ سرریز: پنهان؛ نمایش: بلوک؛ تراز نوشتاری: مرکز؛ ارتفاع خط: 58 پیکسل؛ )

جلوه های CSS3

در این مثال، هیچ چیز خاصی وجود ندارد - گوشه ها و سایه های گرد.

/*گوشه های گرد*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; شعاع حاشیه: 5 پیکسل /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2)؛ box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

انیمیشن CSS

انیمیشن برای این مورد طولانی تر است تا جلوه ای روان و جالب ایجاد کند.

/*Transition*/ -webkit-transition: همه 0.8s ease. -moz-transition: همه 0.8s ease. -o-transition: همه 0.8s ease. -ms-transition: همه 0.8s ease. انتقال: همه 0.8s سهولت.

ماوس شناور

اکنون زمان انتقال تصویر پس زمینه است. موقعیت اولیه "0 0" بود. پارامتر دوم را روی 150px قرار دهید. برای جابجایی افقی، باید پارامتر اول را تغییر دهید.

#button3: شناور (موقعیت پس‌زمینه: 0px 150px؛ )

فشار دادن دکمه شبیه سازی شده سه بعدی

آخرین مثال در آموزش ما بر روی روش سه بعدی محبوب شبیه سازی یک کلیک دکمه زمانی که با ماوس روی آن قرار می گیرید تمرکز دارد. انیمیشن این مورد آنقدر ساده است که حتی نیازی به انتقال CSS ندارد. اما نتیجه نهایی کاملاً چشمگیر است.

کد اصلی CSS

کد CSS برای دکمه ما.

#button4 ( پس‌زمینه: #5c5c5c؛ text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3)؛ اندازه قلم: 22px؛ ارتفاع: 58px؛ عرض: 155px؛ حاشیه: 50px 0 0 over 50px; ؛ نمایش: بلوک؛ تراز متن: مرکز؛ ارتفاع خط: 58 پیکسل؛ )

جلوه های CSS3

در این مورد، CSS3 دیگر گزینه خوبی نیست. سایه ها و گرادیان برای به دست آوردن اثر مورد نیاز است. سایه سخت ظاهر یک دکمه سه بعدی را ایجاد می کند.

/*گوشه های گرد*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; شعاع حاشیه: 5 پیکسل /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8)؛ box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); تصویر پس زمینه: -moz-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر زمینه: -o-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); تصویر پس زمینه: -ms-linear-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)); پس‌زمینه-تصویر: خطی-gradient(بالا، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.2)).

ماوس شناور

در این حالت ما بزرگترین بخش شناور را داریم. طول سایه کاهش می یابد و حاشیه ها ترکیبی از منطقه تاریک را ایجاد می کنند. همه با هم باعث ایجاد توهم فشار دادن یک دکمه می شود. چرخاندن گرادیان جلوه را افزایش می دهد.

#button4: شناور ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8؛ box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8)؛ /*Gradient*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0، 0)، rgba(0، 0، 0، 0.4))؛ تصویر پس زمینه: -moz-linear-gradient (پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4 ))؛ تصویر پس زمینه: -o-خطی-gradient(پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4))؛ تصویر پس زمینه: -ms-linear-gradient( پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4))؛ تصویر پس‌زمینه: گرادیان خطی (پایین، rgba(0، 0، 0، 0)، rgba(0، 0، 0، 0.4)))