نمایش متن عمودی در CSS

با سلام خدمت شما دوستان و همراهان عزیز سایت چسبون. در این پست آموزش نمایش متن عمودی در CSS را برای شما عزیزان آماده کردیم. در این آموزش ما قصد داریم یک متن را به صورت عمودی بر روی یک تصویر نمایش دهیم. این کار در نمایش اسلایدشو های صفحه کاربرد دارد. همچنین می توانید بعنوان واترمارک روی تصاویر خود نیز از این روش استفاده کنید.

پیش نیاز های این آموزش دانش مقدماتی HTML و CSS می باشد.

CSS-Display-Text-In-Vertical-Direction

در این مثال یک تصویر زمینه داریم و یک متن که به صورت عمودی روی آن نمایش داده خواهد شد. در ادامه کد های HTML جهت نمایش تصویر و متن مورد نظر را بررسی می کنیم:

<!DOCTYPE html>
<html>
<head>
	<title>چسبون- آموزشگاه آنلاین برنامه نویسی</title>
	<meta charset="utf-8">
</head>
<body>
<h1>چسبون آموزشگاه آنلاین برنامه نویسی</h1>

<div class="content">
	<div class="image">
		<div class="vertical-text">آموزشگاه آنلاین چسبون</div>
	</div>
</div>

</body>
</html>

همانطور که در کد فوق مشاهده می نمایید از چند تگ div تو در تو برای نمایش تصویر و متن عمودی مورد نظر استفاده کردیم. تگ div با کلاس image جهت نمایش تصویر پس زمینه و تگ div با کلاس vertical-text جهت نمایش متن عمودی مورد استفاده قرار گرفت.

حال باید به کلاس های تعریف شده استایل دهیم. کد های CSS زیر را به کدهای نوشته شده در مرحله قبل اضافه می کنیم:

<style type="text/css">
	.image {
		background-image: url("/MyImage.png");
		width: 480px;
		height: 270px;
	}
	.vertical-text {
	    float: right;
		display: inline-block;
		transform: rotate(-90deg);
		margin-top: 85px;
		margin-right: -85px;
		background: #e3e2e2;
		padding: 10px;
		opacity: 0.8;
		font-size: 1.3em;
	}
</style>

با افزودن کدهای CSS فوق به صفحه، متن از حالت افقی خارج شده و به صورت عمودی نمایش داده می شود. در ادامه توضیح مختصری در مورد دستورات CSS استفاده شده در این مثال ارائه می شود:

backgroung-image: جهت نمایش یک تصویر در پس زمینه یک عنصر بکار می رود خاصیت url آدرس تصویر مورد نظر را مشخص می کند دقت کنید که آدرس باید به صورت رشته ای درون پرانتز وارد شود (آدرس تصویر باید بین علامت کوتیشن نوشته شود)

float: جهت شناور کردن متن بکار می رود که می تواند مقدار left و یا right بگیرد. در صورتیکه می خواهید متن شما در سمت چپ تصویر نمایش داده شود این خاصیت را با مقدار left مقداردهی کنید

transform: موجب چرخش متن می شود که در اینجا مقدار 90 درجه منفی تعیین شده است.

margin-top: میزان فاصله عنصر از عنصر بالایی را تعیین می کند.

margin-right: میزان فاصله عنصر از عنصر سمت راست را مشخص می کند.

background: رنگ پس زمینه عنصر را مشخص می کند.

padding: میزان حاشیه عنصر را مشخص می کند.

opacity: میزان شفافیت عنصر را مشخص می کند و می تواند مقداری بین 0 تا 1 باشد.

font-size: اندازه قلم را تعیین می کند.

در ادامه کد کامل این مثال آورده شده است که می توانید آن را اجرا نمایید.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">

<style type="text/css">
	.image {
		background-image: url("/photos/shares/1396/06/Display-Text-In-Vertical-Direction-Using-CSS.gif");
		width: 480px;
		height: 270px;
	}
	.vertical-text {
	    float: right;
		display: inline-block;
		transform: rotate(-90deg);
		margin-top: 85px;
		margin-right: -85px;
		background: #e3e2e2;
		padding: 10px;
		opacity: 0.8;
		font-size: 1.3em;
	}
</style>
</head>
<body>
<h1>چسبون آموزشگاه آنلاین برنامه نویسی</h1>
<div class="content">
	<div class="image">
		<div class="vertical-text">آموزشگاه آنلاین چسبون</div>
	</div>
	
</div>

</body>
</html>

امیدوارم این آموزش مورد پسند شما واقع شده باشد. چسبون آموزشگاه آنلاین برنامه نویسی وب

نمایش متن عمودی در CSS

دیدگاهی وجود ندارد