logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش افکت زیبا متن در css

آموزش افکت زیبا متن در css
هدایت عباسی آموزش CSS

آموزش کامل افکت زیبا متن در css همراه با مثال و توضیحات کامل به زبان فارسی. در این آموزش موارد زیادی را می آموزید از جمله افکت سایه دادن به متن با css ، متن چشمک زن ، متن متحرک با افکت تایپ شدن و غیره

افکت سایه دادن به متن با css

در این بخش از آموزش css از تاپ سایت 98 به سراغ افکت سایه دادن به متن با css می رویم.

برای سایه دادن به متن در css از دستور text-shadow استفاده می کنیم.

در مثال زیر با نحوه استفاده از دستور text-shadow آشنا می شویم.

افکت سایه ها در متن می تواند به صورت افقی و عمودی باشد.

نتیجه این کد ، چاپ متن با افکت سایه مشکی است در قسمت پایین تر با بقیه موارد آشنا می شوید.

کد زیر را در یک فایل html ذخیره کرده و اجرا نمایید تا خروجی را مشاهده نمایید.

<!DOCTYPE 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 می توانیم افکت های مختلفی را برای متن ایجاد کنیم.

<!DOCTYPE html>
<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 است.

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

هر چقدر عدد بزرگتر باشد میزان بلور یا پخش شدگی بیشتر می شود.

<!DOCTYPE html>
<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 ذخیره کنید و سپس تست نمایید.

خروجی یک متن سفید با سایه مشکی میباشد.

<!DOCTYPE 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 چندین افکت را اعمال کنیم.

نتیجه کد زیر یک متن با افکت و سایه زیبا میباشد.

می توانید از این کدها و مثال ها در پروژه طراحی سایت خود استفاده نمایید.

<!DOCTYPE html>
<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 به صورت چشمک زن در آورده ایم.

<!DOCTYPE html>
<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 ذخیره کرده و اجرا کنید.

این کد تست شده میباشد و کاملا صحیح میباشد.

<!DOCTYPE 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 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.

  • کامنت نوای انقلاب

    2020-11-05 16:31:44

    سلام علیکم چرا آموزش های ویدیویی این مطالب نیست

    پاسخ کامنتسلام انشاله برای هر قسمت آموزش ویدئویی آماده خواهد شد. اما هر روز مقاله های جدید در حال تهیه است.