Text transform css là gì

Text-Transform là một thuộc tính cũng thường được sử dụng với chữ. Nó dùng để hiển thị chữ thường thành chữ hoa trên trình duyệt. Mời bạn cùng quachquynh.com tìm hiểu về thuộc tính text-transform trong CSS qua bài này.

Cú pháp viết:

text-transform: none|capitalize|uppercase|lowercase;

Giải thích:

• none: Giá trị mặc định, nó sẽ không viết hoa
• capitalize: Viết hoa mình chữ cái đầu tiên
• uppercase: Viết hoa toàn bộ chữ cái
• lowercase: Chuyển tất cả chữ hoa thành in thường

Để hiểu hơn bạn chạy ví dụ sau:

Ví dụ viết chữ

.text1 {
text-transform: none;
}
.text2 {
text-transform: capitalize;
}
.text3 {
text-transform: uppercase;
}
.text4 {
text-transform: lowercase;
}




This is a paragraph - giá trị none
This is a paragraph - giá trị capitalize
This is a paragraph - giá trị uppercase
THIS IS A PARAGRAPH - GIÁ TRỊ LOWERCASE

Kết quả:

Trên đây là các giá trị và ví dụ về thuộc tính text transform sử dụng trong viết chữ. Qua đây bạn đã hiểu cách sử dụng chưa nhỉ? Hãy tiếp tục theo dõi các bài viết khác tại chuyên mục học CSS online miễn phí nhé!

Khi làm web cần căn giữa theo chiều dọc, yêu cầu này có vẻ khó khăn với người không thông thạo với css . Một số gợi ý sử dụng display: inline với vertical-align: middle hay display: table với 1số kiểu style đi kèm. Ngoài ra có thể giải quyết bằng Flexbox và Grids, nhưng đối với các component nhỏ hơn, sử dụng transform có thể là 1 lựa chọn đơn giản

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  



  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  

• Không có gì phức tạp: chỉ có hai khối với một văn bản Lorem Ipsum có độ dài khác nhau.

• Hãy đặt chiều rộng, chiều cao và đường viền cho .parent, cũng như một số khoảng cách để làm cho nó trông đẹp hơn:

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Và kết qủa chúng ta nhận được như hình ảnh sau:

ngocyen @ngocyen

Theo dõi

3.4K 107 57

Đã đăng vào thg 8 20, 2019 7:55 SA 8 phút đọc

4.3K

1

6

• Báo cáo
• Thêm vào series của tôi

Bài đăng này đã không được cập nhật trong 3 năm

• Trong bài viết này, chúng tôi sẽ tìm hiểu cách sử dụng CSS transform trong thực tế để giải quyết các mục đích khác nhau và đạt được kết quả rất thú vị. Cụ thể, bạn sẽ học cách điều chỉnh transform theo chiều dọc , tạo mũi tên đẹp mắt, xây dựng icon loading và tạo hình lật ngược sống động

1. Căn giữa theo chiều dọc

• Khi làm web cần căn giữa theo chiều dọc, yêu cầu này có vẻ khó khăn với người không thông thạo với css . Một số gợi ý sử dụng display: inline với vertical-align: middle hay display: table với 1số kiểu style đi kèm. Ngoài ra có thể giải quyết bằng Flexbox và Grids, nhưng đối với các component nhỏ hơn, sử dụng transform có thể là 1 lựa chọn đơn giản

• Căn giữa theo chiều dọc có thể phức tạp khi chiều cao của phần tử thay đổi. Tuy nhiên với việc sử dụng transform css lại giúp ta giải quyết vấn đề đó

• Xem ví dụ dưới đây:

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  



  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  

• Không có gì phức tạp: chỉ có hai khối với một văn bản Lorem Ipsum có độ dài khác nhau.

• Hãy đặt chiều rộng, chiều cao và đường viền cho .parent, cũng như một số khoảng cách để làm cho nó trông đẹp hơn:

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Và kết qủa chúng ta nhận được như hình ảnh sau:

• Và khi khách hàng xem kết qủa của bạn họ yêu cầu: Hãy căn chỉnh văn bản ra giữa. Các bạn sẽ làm sao, chúng tôi sẽ hướng dẫn bạn căn giữa khi sử dụng transform. Bước đầu tiên là cố định vị trí của .child và di chuyển chúng xuống 50%

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
}

• Sau đó, áp dụng một thành phần bí mật - thuộc tính translateY - sẽ định vị lại các element theo chiều dọc:

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY[-50%];
}

• Trong thực tế một số developer đã nói rằng với cách này có thể khiến class con bị mờ do yếu tố được đặt trên “half pixel” . Một giải pháp cho việc này là dùng perspective cho element con

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: perspective[1px] translateY[-50%];
}

• Link demo ví dụ: //codepen.io/ngc-yn/pen/NWKrQgV

2. Tạo mũi tên[ Arrows]

• Các bạn có thể tạo ra mũi tên bằng chỉnh sửa đồ hoạ và nó khá là tẻ nhạt. Chúng ta có thể tạo ra mũi tên bằng sử dụng thuộc tính Scale của transform
• Đầu tiên chúng ta tạo 1 box và có 1 mũi tên chỉ ra ngoài kiểu như dạng comment

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  

html {
  font-size: 16px;
}

.box {
  width: 10rem;
  background-color: #e0e0e0;
  padding: 1rem;
  margin: 1rem;
  border-radius: 1rem;
}

như hình ảnh này:

• Và tạo mũi tên bên phải box trên hình ảnh bằng sử dụng : ::before pseudo-selector

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  overflow: hidden;
}

• Chiều rộng và chiều cao càng lớn, mũi tên sẽ càng lớn.

Bây giờ di chuyển mũi tên sang phải và căn chỉnh nó theo chiều dọc:

.box {
  // ...
  position: relative;
}

.box::before {
  // ...
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
}

• Tất cả những gì chúng ta cần làm là xoay cái hộp nhỏ này để biến nó thành một hình tam giác, trông sẽ giống như một mũi tên. Bằng sử dụng transform: rotate[45deg]; . Link demo //codepen.io/ngc-yn/pen/JjPKQdg Kết qủa như hình ảnh bên dưới

3. Tạo icon Loading với SVG

• Thật không may, những yêu cầu trên web ko xảy ra ngay lập tức. Người dùng thường phải chờ một khoảng thời gian để yêu cầu hoàn tất, có thể là gửi email, đăng bình luận hoặc tải ảnh lên. Do đó, một ý tưởng hay khác là hiển thị loading để để người dùng hiểu rằng họ sẽ phải chờ trong vài giây.

• Trước đây, khi không có animation và transform CSS, chúng ta đã sử dụng bằng hình ảnh GIF. Và giờ việc sử dụng ảnh GIF ko còn cần thiết vì CSS3 cung cấp các tùy chọn mạnh mẽ. Vì vậy, việc tạo ra các loading đẹp mắt bằng việc kết hợp giữa animation, svg và transform.

• Chúng ta có một khung nhìn 66 × 66. [ viewBox="0 0 66 66"]

• Vòng tròn với trung tâm của nó nằm ở [33,33] và bán kính là 31px. Chúng tôi cũng có một nét 2px, có nghĩa là 31 * 2 + 2 * 2 = 66. Stroke = "url [#gradient] có nghĩa là màu của nét được xác định bởi một phần tử có ID là #gradient.

• Đó là gradient của chúng tôi cho vòng quay. Nó có ba điểm dừng đặt các giá trị độ mờ khác nhau, điều này sẽ dẫn đến một hiệu ứng khá tuyệt vời.

  Text

  Thuộc tính text-transform trong CSS giúp bạn xác định kiểu cách cho phần văn bản bên trong một phần tử [ví dụ: dạng chữ hoa, chữ thường].

  Text indent trong CSS là gì?

  Thuộc tính text-indent trong CSS chỉ ra khoảng thụt đầu dòng [chiều ngang] của văn bản. Thuộc tính này nhận các giá trị theo đơn vị [px, pt, cm, em ...], % và inherit. Thuộc tính text-indent chỉ ra khoảng thụt đầu dòng [chiều ngang] của văn bản.

  CSS là viết tắt của từ gì?

  CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website. CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium [W3C]. CSS xử lý một phần giao diện của trang web.

  Làm sao để tạo chữ đầm trong CSS?

  Một trong những cách tối ưu hơn để in đậm text là sử dụng thẻ in đậm trong CSS. Thẻ in đậm text trong CSS là thẻ font-weight. Thẻ này sẽ giúp thay đổi độ mỏng và dày của chữ tùy theo mục đích của lập trình viên. Thẻ font-weight mang lại rất nhiều lựa chọn cho bạn so với thẻ bold và strong trong HTML.