لوگو چندوجهی

ساخت یک card

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

مباحثی که در این ویدیو یاد می‌گیریم:

 

text-align

متن، یکی از بزرگترین بخش‌های وب سایت ها است. تقریبا در تمام سایت ها مقاله و نوشته وجود دارد. در CSS برای ترازبندی متن مقادیر مختلفی برای ویژگی text-align در نظر گرفته شده است.

justify : مقدار justify باعث می‌شود تمام خطوط متن به جز خط آخر، به لبه های راست و چپ المنتی که در آن قرار دارند بچسبند.

center : متن را وسط‌چین می‌کند.

right : متن را راست‌چین می‌کند.

left : متن را چپ‌چین می‌کند.

 

width

عرض یک المنت را با خصوصیت width تعیین کنیم. مقدار این خصوصیت هم می‌تواند relative باشد مثل em هم absoloute مثل px یا درصدی از عرض المنتی که داخل آن قرار دارد.

 

height

ارتفاع یک المنت را با خصوصیت height تعیین می‌کنیم. مقداردهی به ارتفاع، شبیه عرض است. تمام یونیت‌هایی که برای width استفاده کردیم در این‌جا هم استفاده می‌شوند.

 

strong

یکی از راه‌هایی که برای برجسته کردن متن می‌توانیم انجام بدهیم استفاه از تگ strong است. با این کار نسبت به متن مورد نظر جلب توجه می‌کنیم. مرورگر تگ strong را به font-weight:bold تفسیر و اعمال می‌کند.

 

u

برای زیرخط‌دار کردن متن از تگ u استفاده می‌کنیم. با این‌کار به مخاطب اعلام می‌کنیم که این بخش از متن مهم است و باید به آن توجه کند. در نهایت مرورگر با دیدن تگ u ویژگی text-decoration: underline را به بخش مورد نظر ما اعمال می‌کند.

 

em

برای کج کردن متن از em استفاده می‌کنیم. مرورگر em را به font-style: italic تفسیر می‌کند.

 

s

با CSS می‌توانیم روی یک متن خط بکشیم. برای این‌کار از تگ s استفاده می‌کنیم. از این خصوصیت زمانی استفاده می‌کنیم که می‌خواهیم به کاربر اطلاع دهیم که قسمت مورد نظر بی اعتبار است. مرورگر با دیدن تگ s خصوصیت text-decoration: line-through را به المنت مورد نظر ما می‌دهد.

 

hr

خط افقی یکی از مواردی است که معمولا به عنوان جداکننده استفاده می‌شود. این خط تمام عرض المنتی که در آن قرار دارد را پر می‌کند.

 

()rgba

برای این‌که از لحاظ دیداری بین متن و اطراف آن تمایز ایجاد کنیم می‌توانیم به جای این‌که به متن رنگ بدهیم، با استفاده از خصوصیت background-color رنگ پس‌زمینه المنتی که در آن قرار دارد را تغییر دهیم. یکی از روش‌های رنگ دادن به المنت‌ها که در دوره مقدماتی هم آن را بررسی کردیم استفاده از تابع rgb() و کد hex بود، در این‌جا از rgba() استفاده می‌کنیم.

 

font-size

معمولا اندازه فونت عنوان‌ها باید بیشتر از اندازه فونت استفاده شده در پاراگراف باشد. با این کار عنوان را از متنی که در پاراگراف وجود دارد متمایز می‌کنیم. برای این‌کار از خصوصیت font-size استفاده می‌کنیم که در دوره مقدماتی در مورد آن زیاد صحبت کردیم.

 

box-shadow

با استفاده از خصوصیت box-shadow می‌توانیم یک یا بیشتر از یک سایه به المنت مورد نظرمان بدهیم. مقادیری که به box-shadow اعمال می‌شود:

offset-x : میزان فاصله افقی سایه از المنت.

offset-y : میزان فاصله عمودی سایه از المنت.

blur-radius : میزان مات شدن سایه.

spread-radius : میزان پخش شدن سایه.

color : رنگ سایه.

خصوصیت‌های blur-radius و spread-radius اختیاری هستند.

نکته: می‌توانیم با قرار دادن کاما چندین سایه با یک المنت بدهیم و جلوه‌های خاصی را ایجاد کنیم.

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

 

opacity

برای تعیین میزان شفافیت یک المنت از خصوصیت opacity استفاده می‌کنیم. opacity یک عدد بین ۰ تا ۱ است. ۰ یعنی المنت شفاف شفاف باشد و در این حالت مشاهده نمی‌شود. ۱ یعنی تمام رنگ المنت قابل مشاهده و مات باشد. این مقدار روی کل یک المنت اعمال می‌شود، مهم نیست که تصویر باشد، رنگ پس‌زمینه یا چیز دیگر.

 

text-transform

زبان انگلیسی حروف بزرگ و کوچک دارد، اصطلاحا uppercase و lowercase . با استفاده از CSS می‌توانیم این ویژگی را کنترل کنیم و جلوه مورد نظرمان را به متن بدهیم.

با استفاده از خصوصیت text-transform و مقادیری که به آن می‌دهیم:

lowercase : تمام حروف را به حروف کوچک تبدیل می‌کند.

uppercase :  تبدیل به حروف بزرگ.

capitalize :  حرف اول هر کلمه را تبدیل به حروف بزرگ می‌کند.

initial : استفاده از پیش‌فرض (حرف اول کلمه اول با حروف بزرگ).

inherit : از خاصیت text-transform المنت والد استفاده می‌کند.

none : تغییری در متن اصلی ایجاد نمی‌کند.

 

font-face@

@font-face {
        font-family: "Vazirfont";
        src: url("fonts/Vazir-Regular-FD.eot");
        src: url("fonts/Vazir-Regular-FD.eot?#iefix") format("embedded-opentype"),
          url("fonts/Vazir-Regular-FD.woff2") format("woff2"),
          url("fonts/Vazir-Regular-FD.woff") format("woff"),
          url("fonts/Vazir-Regular-FD.ttf") format("truetype");
        font-weight: normal;
        font-display: swap;
}
@font-face {
        font-family: "Vazirfont";
        src: url("fonts/Vazir-Bold-FD.eot");
        src: url("fonts/Vazir-Bold-FD.eot?#iefix") format("embedded-opentype"),
          url("fonts/Vazir-Bold-FD.woff2") format("woff2"),
          url("fonts/Vazir-Bold-FD.woff") format("woff"),
          url("fonts/Vazir-Bold-FD.ttf") format("truetype");
        font-weight: 900;
        font-display: swap;
}

تمرین

یک کارت مشابه آن‌چه در ویدیو دیدید بسازید.

از رنگ‌های دلخواه خودتان استفاده کنید.

برای ارسال دیدگاه باید وارد سایت شوید ورود به سایت
قیمت دوره
368,000 تومان
175,000 تومان
مدرس حمید صالحی
وضعیت در حال برگزاری
تعداد قسمت‌ها 4
زمان کل دوره 01:44:58
امکان پرسش زیر هر درس

برای شرکت در دوره باید عضو سایت شوید و اگر عضو هستید وارد سایت شوید.

این دوره‌ها را هم ببینید