برعکس کردن متون با استفاده از CSS

برعکس کردن متون با استفاده از CSS

برای طراحان وب بسیار حائز اهمیت است که در صفحاتی که ساخته و طراحی می کنند ، تا حد ممکن از عکس و المان های گرافیکی استفاده نکنند چرا که باعث سنگین شدن صفحه و دیر بارگزاری(Load) آن می شود. برای این منظور می بایست با استفاده از Css و سایر روش هایی که به گرافیکی کردن صفحه کمک می کند شکل ظاهری مدنظر خود را طراحی کنند. برای این منظور یک راه برای برعکس کردن متون در اینجا آموزش داده شده که ممکن است برای افراد جالب و قابل استفاده باشد. لطفاً به کد زیر توجه فرمائید :

برعکس کردن متون در CSS

<html>
<head>
<style type="text/css">
.txtUpsideDown
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */
-moz-transform: rotate(-180deg); /* FF3.5+ */
-o-transform: rotate(-180deg); /* Opera 10.5 */
-webkit-transform: rotate(-180deg); /* Safari 3.1+, Chrome */
position: absolute;
}
</style>
</head>
<body>
<div class="txtUpsideDown">Test message</div>
</body>
</html>

با توجه به کد بالا و همانطور که قابل مشاهده است ، یک CSS در تگ Head تعریف کردیم که کدهای مربوط به برعکس کردن متن برای تمامی مرورگرها را در آن قرار داده ایم. حال کافی است در بدنه صفحه یا همان تگ Body یک تگ دیگر نوشته و با استفاده از متد Class ، کدهای نوشته شده در Head را به تگ نسبت می دهیم. اکنون تمامی نوشته های موجود در تگ ساخته شده همانند شکل فوق به صورت برعکس نشان داده می شوند.



نظرات کاربران



عبارت امنیتی : حاصل 5 × 1 می شود :
متن پیام :