خرید آنلاین - Onlion shop
رفتن به کانال در Telegram
4 399
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-427 روز
-21030 روز
آرشیو پست ها
// Get the video element
var video = document.getElementById("myVideo");
// Function to play the video
function playVideo() {
video.play();
}
// Function to pause the video
function pauseVideo() {
video.pause();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
body{
height: 10000px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
@font-face {
font-family: 'Moraba';
src: url('fonts/Morabba-Medium.ttf');
}
p,h1{
font-family: 'Moraba';
}
.container{
width: 250px;
height: 250px;
border-radius: 15px;
/* background-color: rgb(75, 60, 60); */
box-shadow: 1px 1px 5px 0 rgba(90,90,90);
/* background-image: linear-gradient(30deg, green, blue, orange, red); */
opacity: .7;
transition: background-image 100s ease-in-out;
position: relative;
}
.play{
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: blue;
bottom: 10px;
right: 10px;
opacity: 0;
transition: all .5s ease-in-out;
}
.container:hover .play{
opacity: 1;
cursor: pointer;
transform: translateY(-20px);
}
</style>
</head>
<body>
<div class="container">
<div class="play"></div>
</div>
</body>
</html>
برای قرار دادن یک المان در وسط قرارگیری با استفاده از پاراپرتی ترانسفورم در CSS، می‌توانید از ترکیبی از ویژگی‌های
position`، `top`، `left`، `transform و translate استفاده کنید. به طور کلی، می‌توانید این روش را به صورت زیر پیاده‌سازی کنید:
1. ابتدا المان مورد نظر را با استفاده از CSS انتخاب کنید، به عنوان مثال با استفاده از یک نام کلاس یا شناسه.
<div class="element"></div>
position: absolute; برای تعیین موقعیت المان استفاده کنید.
.element {
position: absolute;
}
top: 50%; و left: 50%; استفاده کنید تا المان در مرکز صفحه قرار بگیرد.
.element {
position: absolute;
top: 50%;
left: 50%;
}
transform: translate(-50%, -50%); استفاده کنید.
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
تأثیر خطی (Linear Gradient) در CSS به شما اجازه می‌دهد تا تدرج رنگی خطی را در عناصر HTML ایجاد کنید. به کمک خواص CSS مربوط به تدرج خطی، می‌توانید رنگها را از یک مکان به مکان دیگر به صورت پیوسته تغییر دهید. در زیر یک مثال از استفاده از تدرج خطی در CSS آورده شده است:
/* ایجاد تدرج خطی افقی */
div {
background: linear-gradient(to right, red, yellow);
}
/* ایجاد تدرج خطی عمودی */
div {
background: linear-gradient(to bottom, blue, green);
}
/* ایجاد تدرج خطی مورب */
div {
background: linear-gradient(to bottom right, orange, purple);
}background و مقدار linear-gradient استفاده کرده‌ایم. مقدار to right نشان می‌دهد که تدرج خطی از چپ به راست ایجاد شود و رنگ اول (قرمز) از سمت چپ شروع شده و به رنگ دوم (زرد) تغییر می‌کند. به همین ترتیب، می‌توانید تدرج خطی افقی، عمودی یا مورب را با تغییر مقدار to و استفاده از رنگهای دیگر ایجاد کنید.
این فرمت تدرج خطی نیز قابل تنظیم است. شما می‌توانید نقاط شروع و پایان تدرج را با استفاده از درصد یا مقادیر طولی مشخص کنید. همچنین، می‌توانید رنگهای بیشتری را به تدرج خطی اضافه کنید و نوع تغییر رنگ را مشخص کنید (مانند تدرج خطی، تدرج رادیال و غیره).
با استفاده از قدرت تدرج خطی در CSS، شما می‌توانید طرح‌ها و ظاهرهای جذاب‌تری را برای عناصر HTML خود ایجاد کنید.
در CSS، خاصیت
transform برای تغییر و تعیین تغییراتی در موقعیت، اندازه، چرخش و برخی ویژگی‌های دیگر عناصر HTML استفاده می‌شود. این خاصیت قابلیت اعمال تغییرات دوبعدی و سه‌بعدی را فراهم می‌کند.
مقادیر مختلفی که می‌توان به transform اختصاص داد عبارتند از:
1. translate: این مقدار برای تغییر موقعیت المان در جهت‌های افقی و عمودی استفاده می‌شود. می‌توانید مقادیر مختلفی مانند translateX, translateY و translateZ را تعیین کنید.
2. scale: این مقدار برای تغییر اندازه المان استفاده می‌شود. می‌توانید مقادیری مانند scaleX, scaleY و scaleZ را تعیین کنید.
3. rotate: این مقدار برای چرخش المان در جهت‌های مختلف استفاده می‌شود. می‌توانید زاویه چرخش مورد نظر را تعیین کنید.
4. skew: این مقدار برای تغییر زاویه‌ی المان استفاده می‌شود. می‌توانید زاویه‌ی افقی و عمودی را تعیین کنید.
5. matrix: این مقدار برای تعیین تبدیل کلی المان با استفاده از ماتریس ۳x۳ استفاده می‌شود.
علاوه بر این، شما می‌توانید از ترکیبی از این مقادیر برای ایجاد تغییرات پیچیده تر استفاده کنید و از توابعی مانند translate3d, rotateX, rotateY, rotateZ, scale3d و غیره بهره ببرید.
همچنین می‌توانید مقادیر مورد نظر را به صورت پیکسل، درصد یا واحدهای دیگری تعیین کنید.
متغیرها در CSS (Cascading Style Sheets) ورودی‌هایی هستند که توسط توسعه‌دهنده تعریف می‌شوند و مقادیری را درون خود ذخیره می‌کنند تا بتوان از آن مقادیر بارها و بارها درون یک سند استفاده کرد. این مفهوم به توسعه‌دهندگان اجازه می‌دهد تا مقادیر مشترک را در یک مکان تعریف کنند و در سراسر سایت یا برنامه‌ی وب خود استفاده کنند. حالا بیایید با مثالی این مفهوم را بهتر درک کنیم:
فرض کنید یک سایت دارید که تم ظاهری آن دارک است. حالا بعد از مدتی، می‌خواهید تم سایت را تغییر دهید. در اینجا دو حالت وجود دارد:
1. بدون استفاده از متغیرها:
- در این حالت، شما کدهای رنگی را در تمام قسمت‌های سایت تغییر می‌دهید. به عبارت دیگر، باید به صورت دستی تک تک دیوها و عناصر را پیدا کنید و کدهای رنگی را تغییر دهید. این کار زمان‌بر و خطاپذیر است.
2. استفاده از متغیرها:
- در این حالت، از متغیرهای CSS استفاده می‌کنید. ابتدا یک متغیر با نام مشخصی تعریف می‌کنید و مقدار رنگ اصلی سایت را درون آن ذخیره می‌کنید. به عنوان مثال:
:root {
--main-color: #7F583F;
}
var() استفاده کنید:
a {
color: var(--main-color);
}
باکس شادو (Shadow Box) در CSS یک عنصر است که برای ایجاد اثر سایه دور یک المان استفاده می‌شود. با استفاده از باکس شادو، می‌توانیم المان‌ها را از زمینه صفحه تمایز دهیم و آن‌ها را برجسته کنیم.
در زیر یک مثال از استفاده از باکس شادو در CSS آمده است:
HTML:
<div class="shadow-box">
این یک متن باکس شادو است.
</div>.shadow-box {
width: 200px;
height: 100px;
background-color: #f2f2f2;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}<div> با کلاس "shadow-box" ایجاد شده است.
2. با استفاده از CSS، عرض و ارتفاع المان تعیین شده است (به ترتیب 200 پیکسل و 100 پیکسل).
3. رنگ زمینه المان با استفاده از مقدار "#f2f2f2" تعیین شده است.
4. برای ایجاد سایه دور المان، از خاصیت "box-shadow" استفاده شده است. مقادیر دهی شده به این خاصیت به ترتیب به شرح زیر است:
- 2px: انتقال سایه در جهت افقی.
- 2px: انتقال سایه در جهت عمودی.
- 4px: بزرگی سایه.
- rgba(0, 0, 0, 0.4): رنگ سایه به صورت RGBA تعیین شده است. در اینجا، سایه سیاه با شفافیت 0.4 ایجاد می‌شود.
این کد باعث ایجاد یک باکس شادو با سایه‌داری در نزدیکی المان <div> می‌شود. شما می‌توانید مقادیر و پارامترهای مختلف را تغییر دهید تا شکل و ظاهر باکس شادو را به دلخواه خود تنظیم کنید.
کی فریم (Keyframe) در CSS یک مفهوم مهم است که در انیمیشن و تغییر وضعیت عناصر در صفحات وب استفاده می‌شود. برای درک بهتر مفهوم کی فریم، ابتدا باید با مفهوم انیمیشن در CSS آشنا شوید.
انیمیشن در CSS امکان اعمال تغییراتی به خواص عناصر HTML با استفاده از تغییرات تدریجی است. با استفاده از کی فریم، می‌توانید وضعیت مورد نظر عنصر را در زمان مشخص تعریف کنید و CSS تغییرات بین وضعیت‌های مختلف را به صورت تدریجی اعمال می‌کند.
حالا بیایید با یک مثال ساده کی فریم در CSS آشنا شویم. فرض کنید می‌خواهید یک دکمه را با حالتی انیمیشن بدهید که رنگ آن به تدریج تغییر کند. برای این کار می‌توانید از کی فریم استفاده کنید.
در مثال زیر، یک دکمه با نام "انیمیشن رنگ" ایجاد می‌کنیم که رنگ آن به تدریج از قرمز به آبی تغییر می‌کند:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes color-animation {
0% {background-color: red;}
50% {background-color: purple;}
100% {background-color: blue;}
}
.button {
width: 200px;
height: 50px;
background-color: red;
animation-name: color-animation;
animation-duration: 3s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<button class="button">انیمیشن رنگ</button>
</body>
</html>animation-name`، `animation-duration`، `animation-timing-function و `animation-iteration-count`، این کی فریم به دکمه اعمال می‌شود.
در نتیجه، دکمه با تغییر تدریجی رنگ از قرمز به آبی نمایش داده می‌شود.
در سی اس اس (CSS)، واژه "important" به عنوان یک کلیدواژه استفاده می‌شود که به قوانین نحوه اعمال استایل‌ها در یک سند HTML می‌پردازد. وقتی استایلی با استفاده از important تعریف می‌شود، آن استایل بر اولویت بالاتری نسبت به سایر استایل‌ها قرار می‌گیرد و به طور قاطع بر روی المان مورد نظر اعمال می‌شود.
استفاده از important معمولاً به صورت زیر است:
selector {
property: value !important;
}
