✳️ ۸ افکت HTML برای زیباتر شدن وبسایت
شاید شما هم از آن دسته افرادی باشید که دوست دارند وبسایت زیبا داشته باشند ولی به علت نداشتن مهارت فنی لازم، محدودیتهایی در این امر دارند. اصلا جای نگرانی نیست. برای طراحی یک سایت زیبا و چشمنواز اصلا نیازی به دانش «CSS» یا «PHP» ندارید، همینکه مقدار کمی «HTML» مسلط باشید و عمل کپی پیست (Copy-Paste) را خوب بلد باشید، کفایت میکند.
══ فهرست مطالب ══
○ ۱. افکت پارالاکس
○ ۲. جعبه متن با قابلیت اسکرول کردن
○ ۳. متن برجسته
○ ۴. اضافه کردن تصویر پسزمینه به متن
○ ۵. اضافه کردن Tooltip به متن
○ ۶. ساخت متون متحرک
○ ۷. ایجاد منوهای بازشو
○ ۸. Tablezier!
🔸 ۱. افکت پارالاکس
حتما در برخی از وبسایتها دیدهاید که به هنگام اسکرول به پایین (Scroll Down)، به نظر میرسد که تصویر پسزمینه نیز در جهت مخالف در حال حرکت است و هنگامی که بخش دیگری از آن مقاله میرسید، تصویر پسزمینه نیز تغییر میکند. این یک افکت بسیار زیبا است که عمق بصری بیشتری به محتوا میافزاید.
🔸 ۲. جعبه متن با قابلیت اسکرول کردن
این عنصر در HTML به شما این اجازه را میدهد که مجموعهی زیادی از متون را در یک فرمت فشرده نمایش دهید. با این کار، متن شما تمام صفحه را پر نخواهد کرد. کد HTML این ویژگی به صورت زیر است:
<div style=”width: 25%; height: 50px; overflow: auto;
scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color:#11111;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;
”>
Your text will show here. And you can scroll down to go through all of it.
You just have to add a sufficient amount of text to make the scrollbars show.
Obviously, this is not enough,o let’s assume we have a little more to say.
Eventually, the scrollbars will come in handy. That’s it! :)
</div>
خروجی آن نیز به شکل زیر است:
مطالعه ادامه مطلب 👇👇
🔗 ۸ افکت HTML برای زیباتر شدن وبسایت — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس
شاید شما هم از آن دسته افرادی باشید که دوست دارند وبسایت زیبا داشته باشند ولی به علت نداشتن مهارت فنی لازم، محدودیتهایی در این امر دارند. اصلا جای نگرانی نیست. برای طراحی یک سایت زیبا و چشمنواز اصلا نیازی به دانش «CSS» یا «PHP» ندارید، همینکه مقدار کمی «HTML» مسلط باشید و عمل کپی پیست (Copy-Paste) را خوب بلد باشید، کفایت میکند.
══ فهرست مطالب ══
○ ۱. افکت پارالاکس
○ ۲. جعبه متن با قابلیت اسکرول کردن
○ ۳. متن برجسته
○ ۴. اضافه کردن تصویر پسزمینه به متن
○ ۵. اضافه کردن Tooltip به متن
○ ۶. ساخت متون متحرک
○ ۷. ایجاد منوهای بازشو
○ ۸. Tablezier!
🔸 ۱. افکت پارالاکس
حتما در برخی از وبسایتها دیدهاید که به هنگام اسکرول به پایین (Scroll Down)، به نظر میرسد که تصویر پسزمینه نیز در جهت مخالف در حال حرکت است و هنگامی که بخش دیگری از آن مقاله میرسید، تصویر پسزمینه نیز تغییر میکند. این یک افکت بسیار زیبا است که عمق بصری بیشتری به محتوا میافزاید.
🔸 ۲. جعبه متن با قابلیت اسکرول کردن
این عنصر در HTML به شما این اجازه را میدهد که مجموعهی زیادی از متون را در یک فرمت فشرده نمایش دهید. با این کار، متن شما تمام صفحه را پر نخواهد کرد. کد HTML این ویژگی به صورت زیر است:
<div style=”width: 25%; height: 50px; overflow: auto;
scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color:#11111;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;
”>
Your text will show here. And you can scroll down to go through all of it.
You just have to add a sufficient amount of text to make the scrollbars show.
Obviously, this is not enough,o let’s assume we have a little more to say.
Eventually, the scrollbars will come in handy. That’s it! :)
</div>
خروجی آن نیز به شکل زیر است:
مطالعه ادامه مطلب 👇👇
🔗 ۸ افکت HTML برای زیباتر شدن وبسایت — کلیک کنید (+)
📌 کانال اختصاصی آموزشی طراحی و توسعه وب
آخرین مطالب علمی، مقالات رایگان و ویدئوهای آموزشی طراحی و توسعه وب را در کانال اختصاصی [@FaraWebDev] دنبال کنید. 👇
@FaraWebDev — مطالب و آموزشهای طراحی و توسعه وب فرادرس