discord icon
سرور دیسکورد گاردایران
Zed

تحلیل صفحه دیفیس گارد ایران

پست های پیشنهاد شده

سلام تو این تاپیک همنجوری که قول دادم قرار صفحه دیفیس گارد ایران رو تحلیل کنیم

اول از همه با css شروع می کنیم

css رو قبلا براتون گزاشتم

بریم سراغ کار خودمون

چیزی که داخل تحلیل یا تغییر یک صفحه دیفیس مهم هست این هست که اول ببینیم که طرف چی کار کرده و کد هایی که نوشته برای چی هست

یکی یکی با هم پیش میریم

body {
    background-color: #14151b;
    margin: 0;
    font-family: Jura, sans-serif;
}

اولین کدی که داخل css بهش بر می خورید ایشون هست

تحلیل :

             خط اول فرد که css رو نوشته اومده body رو باز کرده

             خط دوم فرد اومده و رنگ بک گراند رو مشخص کرده

             خط سوم فاصله ها رو 0 کرده

             خط چهارم فونت که برای که در نظر داشته رو اضافه کرده

             خط پنجم هم body رو که باز کرده بود رو بسته

اگر موافق باشید من دیگه باز و بسته شدن رو نگم چون کاملا معلوم هست

@font-face {
    font-family: Jura;
    src: url("../fonts/Jura.ttf");
}

تحلیل :

            خط اول فونت مورد نظرش رو مشخص کرده

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

a {
    text-decoration: none;
    color: inherit;
}

این کد در مورد با تگ a نوشته شده 

تحلیل

             در خط اول خواسته که زیر متنی که لینک شده هیچ خطی وجود نداشته باشه              (در حالت پیش فرض یک خط پایین متنی که لینک شده وجود داره که با css  قابل تغییر و جا به جایی هست)

             در خط دوم رنگ متنی که لینک شده رو بی رنگ قرار داده              (ما هر موقع روی یک لینک کلیک می کنیم اگر یک بار برگردیم و بهش نگاه کنیم رنگ تغییر می کنه)

برای این کد یک مثال میزنم تا بهتر براتون جا بیوفته

مثلا ما این قطع کد رو می خوایم اجرا کنیم و خروجی که به ما میده رو با هم ببینیم

<html>
	<head>
		<title>Guardiran</title>
	</head>
	<body>
		<center>
			<br>
				<a style="font-size: 300px;" href="https://guardiran.org">Guardiran</a>
			<br>
		</center>
	</body>
</html>

در خروجی این کد همچین چیزی رو به ما میده

Capture.thumb.PNG.1aaae2661f0fd65d6fc7a242c3d4ef72.PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

خب این لینک ما الان یک خط زیرش هست که ما نمی خوایم باشه پس با استفاده از این کد

text-decoration: none;

برش میداریم

خب این لینکی که ماساختیم رنگ داره ما نمی خوایم این رنگی باشه پس عوضش می کنیم با این کد

color: inherit;

حالا این دو کد رو به کدی که داشتیم اضافه می کنیم

<html>
	<head>
		<title>Guardiran</title>
		<style>
			a {
				text-decoration: none;
				color: inherit;
			}
		</style>
	</head>
	<body>
		<center>
			<br>
				<a style="font-size: 300px;" href="https://guardiran.org">Guardiran</a>
			<br>
		</center>
	</body>
</html>

با خروجی زیر رو به رو میشیم

Captsure.thumb.PNG.26b32e68529528baf7a90e823adf09c7.PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

هنوز هم لینک هست اما خاصیت های اضافش رو ازش گرفتیم

اگر من بخوام کل تحلیل css داخل همین یک جلسه تموم کنم نه شما چیزی میفهمید نه کسی حال خوندن این همه متن داره

در روز های آینده هر روز مقدار به مقدار پیش میریم تا کاملا صقحه دیفیس گارد ایران براتون جا بیوفته

اگر سوالی بود بپرسید در خدمتم حتما جواب میدم

تا تاپیک های بعدی در پناه حق👋

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

سلام دوستان بعد از مدت ها باز برگشتم با تحلیل css گارد ایران

بریم سراغ کارمون

تگ استایل تگ a پیش رفتیم و حالا نوبت سایر کد ها رسیده

#guardiran-logo {
    padding-top: 13.475409836065573vh;
    text-align: center;
}

اول از همه باید بگم که # که قبل از نوشته اومده داره میگه این یک id هست فرق id و class این هست که کلاس به چند تگ داده میشه اما ای دی فقط برای یک تگ هستش 

از این مورد که بگزریم میرسیم به padding خودمونی بگم که راحت متوجه بشید پدینگ ی فاصله ایجاد میکنه به همین راحتی بعضی جاها دیدم که عنصر درونی بیرونی و غیر رو میگن که درست هم میگن اما کاربر گیج میشه

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

از این مورد که رد بشیم میرسیم به text-align با استفاده از اینکه برنامه نویس لوگو رو سر جای خودش ثابت کرده و گفته حرکات اجرا بشه اما جای لوگو تغییری نکنه 

الان با مثال بهتون توضیح میدم

به ویدیو پایین دقت کنید

 

فک کنم خودتون تغییر رو متوجه شده باشید و نیاز به توضیح دیگر نباشه 

اما اگر جایی از آموزش رو متوجه نشدید می تونید به من پیام بدید تا بهتون توضیح بدم

بریم سراغ ادامه کد ها

#header-text {
    font-weight: bold;
    font-size: 22px;
    color: white;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.2);
    margin: 4.918032786885246vh auto auto auto;
    text-align: center;
}

در واقع ما با استفاده از font-weight یک حالت بولد یا مقدار بولد بودن یک تگ رو مشخص می کنیم

در خط بعدی با استفاده از font-size اندازه نوشته خودمون رو مشخص می کنیم

در خط سوم با استفاده از color رنگ متن رو مشخص می کنیم

خط چهارم با استفاده از text-shadow به متن خودمون سایه میدیم که خیلی در زیبایی تأثیر داره

خط پنجم در این خط با استفاده از auto برای مارجین مقداری که مارجین دریافت میکنه رو خودکار گزاشته

در خط آخر از کد هم مکان تگ رو مشخص کرده 

 

فکر می کنم برای امروز کافی باشه

سایر مطالب رو برای روز دیگر قرار بدیم بهتر هست

اینجوری شما هم اگر سوالی داشته باشید می تونید بپرسید

هدف ما این هست که شما بتونید این کد ها رو یادبگیرید

نه اینکه صرفا حفظ کنید

 

پس تا تاپیک های بعدی در پناه حق 👋

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری