آموزش عمودی نوشتن متن در Html

Home Forums آموزش طراحی سایت آموزش html آموزش عمودی نوشتن متن در Html

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 1 year, 8 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #4712

    Anonymous

    آموزش عمودی نوشتن متن در Html

    گاهی اوقات لازم می شود که برخی متون را به صورت عمودی در صفحات وب به کار گرفت. با نگاهی که به بیشتر سایت ها که از چنین روشی استفاده کرده ام کنیم ، متوجه خواهیم شد که آن متن به صورت عکس می باشد! به عبارتی مدیر وب سایت یا طراح قالب متن مورد نظر با استفاده از ویرایشگرهای تصویر به صورت عمودی درآورده و آن را به صورت تصویر ذخیره کرده و در صفحات سایت استفاده می کنند.

    اما همانطور که متوجه شدید این روش کمی طولانی و غیراصولی به نظر می رسد. برای همین بهتر است به دنبال روشی باشیم متن واقعی (نه تصویر) را به عمودی نمایش دهیم. چاره این کار استفاده از CSS3 می باشد.

    html

    برای اینکه متن را با استفاده از css به صورت عمودی نمایش دهید، کافیست از کد زیر استفاده کنید.

    <p style=”transform: rotate(270deg);position: absolute”>طراحی سایت</p>

    در کد بالا ما با استفاده از کدهای استایل مشخص نمودیم که متن 270 درجه بچرخد ، position: absolute نیز باعث می شود متن در همان قسمتی که تاپی شده است، جای بگیرد.

    اگر به مبحث سئو علاقه مند باشید ، باید بدانید که استفاده از کدهای استایل داخلی روشی اصولی نیست و برای همین باید کدها را از طریق کلاس (class) مشخص کنید. بدین منظور ابتدا کدهای زیر را به فایل استایل سایت خود اضافه کنید:

    .amoodi{-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270eg);
    ;position: absolute}

    سپس هرجا که نیاز به عمودی کردن متن بود، کافیست به روش زیر اقدام کنید:

    <p class=”amoodi”>طراحی سایت</p>

    اگر به کدهایی که برای اضافه کردن که به فایل استایل کنید، متوجه یک موضوع خواهید شد! و آن هم اضافه شدن عبارتی به اول transform می باشد. با توجه به اینکه برخی مرورگرها تمام کدهای css3 را با نام خالی نمی توانند اجرا کنند، برای همین باید آنها را به مرورگر شناساند که بدین منظور:

    -webkit- : برای مرورگرهایی که برپایه وب کیت نوشته شده اند ، مانند گوگل کروم و سافاری

    -moz- : برای موزیلا فایرفاکس

    -o- : برای مرورگر اپرا

    تبریک! شما هم اکنون با یک تیر 3 نشان را زده اید!

    1.  با نحوه عمودی نوشتن متون در وب آشنا شدید
    2. با یکی از موارد سئو آشنا دید.
    3. با نحوه شناساندن کدهای CSS3 به انواع مرورگرها آشنا شدید.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.