Javid در ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۲۲

2026-08-06T06:22:34Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۲۲
خط ۱۸۵:		خط ۱۸۵:
	background-position:center;		background-position:center;

	filter:blur(~~1px~~);		filter:blur(2px);

	transform:scale(1.2);		transform:scale(1.2);

	opacity:.25;		opacity:.40;

	z-index:-1;		z-index:-1;

Javid در ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۹

2026-08-06T06:19:26Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۹
خط ۱۲۲:		خط ۱۲۲:
	margin:auto;		margin:auto;

			min-height:55vh;

	display:flex;		display:flex;

Javid در ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۷

2026-08-06T06:17:33Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۷
خط ۱۲۲:		خط ۱۲۲:
	margin:auto;		margin:auto;

	~~min-height:100vh;~~

	display:flex;		display:flex;

Javid در ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۴

2026-08-06T06:14:02Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۴
خط ۲۷۲:		خط ۲۷۲:
	.glass-card{		.glass-card{

	padding:~~1px~~;		padding:25px;

	border-radius:18px;		border-radius:18px;
خط ۲۹۰:		خط ۲۹۰:
	.glass-card{		.glass-card{

	padding:~~20px~~;		padding:1px;

	}		}

Javid در ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۳

2026-08-06T06:13:10Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۳
خط ۲۷۲:		خط ۲۷۲:
	.glass-card{		.glass-card{

	padding:~~25px~~;		padding:1px;

	border-radius:18px;		border-radius:18px;

Javid در ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۰

2026-08-06T06:10:11Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۶ اوت ۲۰۲۶، ساعت ۰۶:۱۰
خط ۱۳۰:		خط ۱۳۰:
	align-items:center;		align-items:center;

	padding:~~40px~~ 0;		padding:1px 0;

	}		}

Javid: صفحه‌ای تازه حاوی « Blur Background
...» ایجاد کرد

2026-08-06T06:06:58Z

صفحه‌ای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta name="description" content="نمونه پس‌زمینه محو و ریسپانسیو"> <meta name="robots" content="index, follow"> <title>Blur Background</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <main class="container">...» ایجاد کرد

صفحهٔ تازه

<html lang="fa" dir="rtl">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta name="description" content="نمونه پس‌زمینه محو و ریسپانسیو">
<meta name="robots" content="index, follow">

<title>Blur Background</title>

<link rel="stylesheet" href="css/style.css">
</head>

<body>

<main class="container">

<section class="glass-card">

<h1>سفر به دنیای خودشناسی؛ اولین قدم برای تغییر زندگی</h1>

<p>
هر تغییر بزرگی با شناخت بهتر خود آغاز می‌شود. استعدادهای پنهان، باورها و اهداف واقعی‌ات را کشف کن و با آگاهی، مسیر موفقیت، آرامش و رشد فردی را بساز.
</p>

<button>مشاهده بیشتر</button>

</section>

</main>

</body>
<style>
/* ==========================
Reset
========================== */

*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
min-height:100vh;
font-family:iransans,sans-serif;
color:#1a257f;
overflow-x:hidden;
position:relative;
}

/* ==========================
Background Image
========================== */

body::before{

content:"";

position:fixed;

inset:0;

background-image:url("../images/bg.jpg");

background-position:center;

background-size:cover;

background-repeat:no-repeat;

transform:scale(1.1);

filter:
blur(12px)
brightness(.55)
saturate(1.1);

z-index:-2;

}

/* لایه رنگی */

body::after{

content:"";

position:fixed;

inset:0;

background:
linear-gradient(
rgba(0,0,0,.35),
rgba(0,0,0,.35));

z-index:-1;

}

/* ==========================
Layout
========================== */

.container{

width:min(1200px,92%);

margin:auto;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:40px 0;

}

/* ==========================
Glass Card
========================== */

.glass-card{

width:min(700px,100%);

padding:40px;

border-radius:24px;

position:relative;

overflow:hidden;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.15);

box-shadow:

0 20px 60px rgba(0,0,0,.25),

inset 0 1px 1px rgba(255,255,255,.15);

}

/* تصویر محو داخل کارت */

.glass-card::before{

content:"";

position:absolute;

inset:0;

background-image:url("https://dl.faraghaib.ir/m/260021/26002115.jpg");

background-size:cover;

background-position:center;

filter:blur(1px);

transform:scale(1.2);

opacity:.25;

z-index:-1;

}

/* ==========================
Typography
========================== */

h1{

font-size:clamp(2rem,5vw,3rem);

margin-bottom:20px;

}

p{

font-size:clamp(1rem,2vw,1.15rem);

line-height:2;

margin-bottom:30px;

}

/* ==========================
Button
========================== */

button{

border:none;

outline:none;

cursor:pointer;

padding:14px 28px;

border-radius:10px;

background:#4da3ff;

color:#fff;

font-size:1rem;

transition:.3s;

}

button:hover{

background:#2576d2;

transform:translateY(-3px);

}

/* ==========================
Responsive
========================== */

@media (max-width:992px){

.glass-card{

padding:30px;

}

}

@media (max-width:768px){

.glass-card{

padding:25px;

border-radius:18px;

}

}

@media (max-width:480px){

.container{

width:95%;

}

.glass-card{

padding:20px;

}

}

</style>

</html>

الگو:پس زمینه شیشه ای - تاریخچهٔ نسخه‌ها