2 سال پیش
714

آموزش ایجاد سایت با بک گراند ویدیویی

به نام خدا و با عرض سلام خدمت کاربران عزیز زرین هور
امروز می خوایم نحوه ساخت یک سایت با بک گراند ویدیویی را به شما آموزش بدهیم در این آموزش ما از html و css استفاده می کنیم.

بک گراند ویدیویی

۱-اول از همه یک new folder با نام دلخواه مثلا bg می سازیم.
۲-در داخل فولدر دو فولدر دیگر با نام های cssوvideo ایجاد می کنیم.

۳-در داخل فولدر اصلی با نام bg یک فایل با فرمت html می سازیم و آن را با برنامه note pad ++ ویرایش می کنیم.

در داخل این فایل کد های زیر را می نویسیم:

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style.css">
		<title>zarrinhoor.com</title>
	</head>
	<body>
		<video class="video" autoplay muted loop>
			<source src="video/video.mp4">
		</video>	
	</body>
</html>

بعد از این وارد فایل css که در فولدر css ساخته ایم می شویم که ما نام آن را style گذاشته ایم.
در داخل فایل css می نویسیم:

.video{
	position:fixed;
	z-index:1;
	width:auto%;
	height:auto%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-height:100%;
	min-width:100%;
	
}

بعد از این کار در داخل فایل html و در بالای تگ <video> می نویسیم:

<div class="content">
		<h1>زرین هور بهترین سایت ایران در آموزش  رایگان</h1>
		<p>.............................................................
		............................ متن دلخواه ....................................
		................................................................
		</p>
	</div>

بعد از این وارد فایل cssمی شویم و می نویسیم:

.content{
	position:relative;
	color:#fff;
	width:800px;
	padding: 1em;
	margin:0 auto;
	z-index:2;
}

نکته: در این آموزش فایل ویدیویی ما در داخل فولدر، به نام video.mp4 بود.

ویدیوی آموزشی در زیر:

به زودی…

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب پر بازدید

c
call of duty

پابجی یا کالاف؟

 بازی کالاف آو دیوتی و پابجی دو بازی بتل رویال هستند با گرافیک بسیار عالی در ps و گوشی های موبایل با بیش از 2 میلیون بازیکن که هم اکنون سرگرمی بیشتر گیم پلیرها است. این مقایسه برای پیدا کردن...

تبدیل ویدیو به گیف در واتساپ،تبدیل فیلم به گیف آنلاین، تبدیل فیلم به گیف با کیفیت بالا اندروید، تبدیل فیلم به گیف ویندوز تبدیل فلم به گیف ،

تبدیل ویدیو به گیف در واتساپ

چند برنامه کاربردی ایفون،ایفون،اپلیکیشن ایفون،اپلیکیشن،برنامه های کاربردی،ایفوندار ها،IOS،برنامه ی ایفون،فتوشاپ،اب و هوا،ادیت،رمز عبور،پسورد

چند برنامه کاربردی ایفون

XML

قابلیت ساخت نقشه سایت XML به نسخه‌ی جدید وردپرس افزوده خواهد شد!

قابلیت های جدید فتوشاپ 2020 و نحوه کار کردن با آن ها،قابلیت های جدید،

قابلیت های جدید فتوشاپ ۲۰۲۰ و نحوه کار کردن با آن ها