Kết quả tìm kiếm với tag ""

Sửa lỗi content bị dịch sang phải của bootstrap modal

Khi sử dụng modal của bootstrap thì toàn bộ content sẽ bị dịch sang phải một đoạn

Đặt height theo width trong CSS

Đôi khi bạn muốn đặt height của một element theo width của nó nhưng chưa biết trước được giá trị của width là bao nhiêu

Vẽ pie chart, donut chart dùng CSS

Có nhiều cách để vẽ các biểu đồ trên nền web

Tạo nền trong suốt không ảnh hưởng đến nội dung bên trong

Để tạo trong suốt cho một đối tượng, ta dùng opacity để thực hiện. Nhưng nhược điểm của opacity là sẽ làm cho toàn bộ đối tượng và các con của nó đều bị ảnh hưởng.

Ví dụ:

<div style="background-image: url(cloud.jpg); width: 150px; padding: 40px 40px">
	<div style="background-color: rgb(255, 165, 0); opacity: 0.5; padding: 40px 40px">
		<div style="background: red; padding: 20px 20px;">TEK</div>
	</div>
</div>
TEK

 
 
Bạn có thể dụng ảnh png trong suốt để giải quyết được vấn đề này:

<div style="background-image: url(cloud.jpg); width: 150px; padding: 40px 40px">
	<div style="background-image: url(orange_50.png); padding: 40px 40px">
		<div style="background: red; padding: 20px 20px;">TEK</div>
	</div>
</div>

Nhược điểm của phương pháp này là bạn phải chuẩn bị một file ảnh png với độ trong suốt nhỏ hơn 100% và bất tiện khi muốn thay đổi màu nền thì lại phải làm file ảnh khác.
 
 
Dùng màu nền trong suốt:

<div style="background-image: url(cloud.jpg); width: 150px; padding: 40px 40px">
	<div style="background-color: rgba(255, 165, 0, 0.5); padding: 40px 40px">
		<div style="background: red; padding: 20px 20px;">TEK</div>
	</div>
</div>
TEK

Nhược điểm của phương pháp này là chỉ hỗ trợ ở các trình duyệt có hỗ trợ CSS3 nhưng các trình duyệt phổ biến hiện tại đều đã hỗ trợ hết rồi.

Chúc bạn thành công

50 thủ thuật CSS không thể bỏ qua – part V

(tiếp theo các phần trước)

Multiline ellipsis chỉ với CSS

Cắt ngắn một đoạn text gồm nhiều dòng và thay thế vào đó dấu ba chấm thực sự là một công việc không dễ dàng

Các đơn vị kích thước trong thiết kế web

Trong CSS có khá nhiều đơn vị dùng cho kích thước

50 thủ thuật CSS không thể bỏ qua – part IV

(tiếp theo các phần trước)

Thuộc tính position trong CSS

Khi thiết kế giao diện với CSS, bạn không thể không nắm rõ các giá trị và cách sử dụng của thuộc tính position.

Một số mẹo nhỏ tối ưu CSS

CSS (Cascading Style Sheets) là một thành phần rất quan trọng trong việc thiết kế và bố cục trang web. Nó bao gồm các định dạng về màu sắc, kích thước, vị trí, phông chữ, hình nền… để làm trang web thêm sống động và rực rỡ hơn. Sau đây, mình xin giới thiệu với các bạn một số mẹo nhỏ để tối ưu css, có thể hạn chế việc phình to kích cỡ tập tin css khi chèn vào trang web.