آموزش افکت زیبا متن در css
آموزش کامل افکت زیبا متن در css همراه با مثال و توضیحات کامل به زبان فارسی. در این آموزش موارد زیادی را می آموزید از جمله افکت سایه دادن به متن با css ، متن چشمک زن ، متن متحرک با افکت تایپ شدن و غیره
افکت سایه دادن به متن با css
در این بخش از آموزش css از تاپ سایت 98 به سراغ افکت سایه دادن به متن با css می رویم.
برای سایه دادن به متن در css از دستور text-shadow استفاده می کنیم.
در مثال زیر با نحوه استفاده از دستور text-shadow آشنا می شویم.
افکت سایه ها در متن می تواند به صورت افقی و عمودی باشد.
نتیجه این کد ، چاپ متن با افکت سایه مشکی است در قسمت پایین تر با بقیه موارد آشنا می شوید.
کد زیر را در یک فایل html ذخیره کرده و اجرا نمایید تا خروجی را مشاهده نمایید.
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
سایه قرمز متن
در قسمت زیر با سایه های رنگی آشنا می شوید.
در مثال زیر با سایه قرمز متن آشنا می شوید. در دستور text-shadow می توانید رنگ افکت سایه را تغییر داد.
با استفاده از css می توانیم افکت های مختلفی را برای متن ایجاد کنیم.
<html>
<head>
<style>
a {
text-shadow: 2px 2px red;
font-size: 30px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
افکت بلور متن
در این قسمت به سراغ افکت بلور متن می رویم.
یکی دیگر از ویژگی های دستور text-shadow استفاده از افکت بلور blur است.
با این افکت بجای اینکه سایه به صورت خطی دور متن قرار گیرد ، بصورت بلور یا پخش شده دور متن قرار می گیرد.
هر چقدر عدد بزرگتر باشد میزان بلور یا پخش شدگی بیشتر می شود.
<html>
<head>
<style>
a {
text-shadow: 6px 6px 7px blueviolet;
font-size: 60px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
افکت زیبا متن با css
در مثال زیر یک افکت زیبا متن با css را مشاهده می کنید .
کد زیر را در یک فایل با پسوند html ذخیره کنید و سپس تست نمایید.
خروجی یک متن سفید با سایه مشکی میباشد.
<html>
<head>
<style>
h1 {
background-color: orange;
padding: 20px;
color: white;
text-shadow: 2px 2px 2px black;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
استفاده از چندین افکت
در مثال زیر استفاده از چندین افکت را آموزش می دهیم.
ما می توانیم در دستور text-shadow چندین افکت را اعمال کنیم.
نتیجه کد زیر یک متن با افکت و سایه زیبا میباشد.
می توانید از این کدها و مثال ها در پروژه طراحی سایت خود استفاده نمایید.
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
متن چشمک زن با css
برای ایجاد متن چشمک زن با css کافی است مانند مثال زیر عمل نمایید.
کد زیر یک متن چشمک زن با css می باشد.
برای این کار کافی است میزان opacity را از صفر تا صد برسانید و با دستور animation مدت زمان را تعیین کنید.
در این مثال ، یک باکس ایجاد کرده ایم و پس زمینه آن را orange قرار داده ایم.
سپس یک متن با تگ span را در آن قرار داده و سپس آن را با css به صورت چشمک زن در آورده ایم.
<html>
<head>
<style>
.b{
background-color: orange;
width:200px;
height: 50px;
padding: 15px;
}
span{
font-size: 25px;
font-family: cursive;
color: #333;
animation: b 1s linear infinite;
}
@keyframes b{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
</style>
</head>
<body>
<div class="b"><span>TopSite98.com</span></div>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
متن متحرک با افکت تایپ شدن
در مثال زیر ، متن متحرک با افکت تایپ شدن را مشاهده می کنید.
برای اجرای این کد و تست آن ، کافی است آن را در یک فایل html ذخیره کرده و اجرا کنید.
این کد تست شده میباشد و کاملا صحیح میباشد.
<html>
<head>
<style>
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
.typewriter h1 {
color: #fff;
font-family: monospace;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
a{
color: white;
}
</style>
</head>
<body>
<div class="typewriter">
<h1>Topsite98.com</h1>
</div>
<a href="https://topsite98.com/">Topsite98</a>
</body>
</html>
کدها و مثال ها تست شده میباشد .
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
نوای انقلاب
2020-11-05 16:31:44
سلام علیکم چرا آموزش های ویدیویی این مطالب نیست
سلام انشاله برای هر قسمت آموزش ویدئویی آماده خواهد شد. اما هر روز مقاله های جدید در حال تهیه است.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید