کاربرد های پراپرتی text-transform در CSS
پراپرتی text-transform در CSS ابزاری قدرتمند برای کنترل نحوه نمایش حروف در متن است. با استفاده از این خاصیت می‌توانیم متن را به صورت کاملاً کوچک، بزرگ، یا با تغییرات دیگر به نمایش درآوریم. این موضوع در طراحی وب برای هماهنگی ظاهری و خوانایی متن بسیار مهم است.
به عنوان مثال، فرض کنید می‌خواهید تمام متن‌های عنوان (heading) یا دکمه‌های یک وب‌سایت را به صورت حروف بزرگ نشان دهید. به کمک text-transform به راحتی می‌توانید این کار را انجام دهید.
برای اعمال این خاصیت CSS گزینه‌های مختلفی داریم مانند: uppercase که تمام حروف را به صورت بزرگ نمایش می‌دهد، lowercase که حروف را به صورت کوچک نشان می‌دهد، و capitalize که حرف اول هر کلمه را به صورت بزرگ نمایش می‌دهد.
در انتخاب حالت مناسب برای طراحی وب‌سایت خود، در نظر بگیرید که هر یک از این حالت‌ها می‌تواند تاثیر زیادی بر نحوه درک و خوانایی متن داشته باشد، همچنین می‌تواند به همخوانی بصری سایت شما کمک کند. بهتر است همیشه اصول دسترسی‌پذیری را نیز در نظر داشت.
نمونه‌های کد CSS با text-transform
p { <br> text-transform: uppercase;<br>}<br>
h1 { <br> text-transform: capitalize;<br>}<br>
button { <br> text-transform: lowercase;<br>}
توضیحات خط به خط کد:
p { text-transform: uppercase; }تمام متن‌های عنصر
p به حروف بزرگ تبدیل می‌کند.h1 { text-transform: capitalize; }اولین حرف هر کلمه در عنصر
h1 را به حرف بزرگ تبدیل می‌کند.button { text-transform: lowercase; }تمام حروف داخل عنصر
button را به حروف کوچک تبدیل می‌کند.