Tạo Sidenote và Vẽ hình tròn bằng CSS3

Bài viết này sẽ hướng dẫn bạn tạo ghi chú bên cạnh bài viết (sidenote) bằng CSS, đơn giản, dễ làm. Và thủ thuật vẽ hình tròn bằng CSS, thay vì phải dùng một “hình” (image), giúp trang web gọn nhẹ hơn, và rất hữu ích trong nhiều trường hợp.

Tạo Slide note và vẽ hình tròn bằng CSS

Nguồn: esvn.com.vn

1. Tạo Sidenote bằng CSS

– Bạn mở file CSS của theme lên (style.css với WordPress), hoặc tạo một file CSS mới với tên style.css (tùy ý bạn chọn).

– Thêm vào cuối file đoạn code sau:

div .note {
	background: url(images/vline.jpg) top left repeat-x;
	background-color: #ffd1a3;
	background-position: left -323px;
	border: 3px double #f93;
	color: black;
	float: right;
	line-height: 30px;
	margin: 10px;
	padding: 10px;
	width: 175px;
}

– Chú thích:

Dòng 2: Đưa hình (có link tải ở bên dưới) làm hình nền cho sidenote, cho hình nằm sát bên trái và ở trên, lặp lại theo chiều ngang. Nhớ sửa đường dẫn trong url() cho đúng nhé.

Dong 4: Đưa hình nằm đúng chỗ.

Dòng 7: Cho cái note nằm sát bên phải khung bài viết.

Dòng 8: Cho khoảng cách các dòng trong note phù hợp với dòng kẻ trên hình.

Dòng cuối: Cho note có một “bề ngang” vừa vặn, hợp lý so với tổng thể trang web.

– Xong phần CSS. Tới trang web. Khi bạn viết blog hay soạn web, bạn chuyển sang chế độ HTML, và đưa nội dung muốn note vào giữa cặp thẻ div:

</pre>
<div class="note">Xong phần CSS. Tới trang web. Khi bạn viết blog hay soạn web, bạn chuyển sang chế độ HTML, và đưa nội dung muốn note vào giữa cặp thẻ div.</div>
<pre>

Đừng quên class=”note” nhé, thiếu phần đó là vô dụng nha.

Xong phần CSS. Tới trang web. Khi bạn viết blog hay soạn web, bạn chuyển sang chế độ HTML, và đưa nội dung muốn note vào giữa cặp thẻ div.

– Xong rồi đấy. Và kết quả như thế này nè…

– Hình nền: Tạo Silde note bằng CSS

* Bạn cũng có thể tự thiết kế một hình nền cho mình. Nguyên tắc như sau:

– Hình có chiều ngang (width) là 1 px

– Chiều cao (height) càng cao càng tốt, nhưng ước lượng chiều cao tối đa của note để tiết kiệm. Chừng 1000 hay 2000px là ổn.

– Màu nền nổi bật so với nền blog/trang web.

– Dòng kẻ màu nhạt, làm sao cho khi có chữ thì không bị chóa, khó đọc chữ.

2. Vẽ hình tròn bằng CSS

Chắc bạn cũng biết qua cách tạo bo góc cho hình chữ nhật bằng CSS rồi. Ta dùng thuộc tính border-radius. Nếu dùng đơn vị là pixel thì góc bo tính theo pixel. Ví dụ:

div {
border: 2px solid #a1a1a1;
padding: 10%;
background: #dddddd;
width: 300px;
border-radius: 25px;
}

Sẽ cho ra kết quả như sau:

Ta dùng thuộc tính border-radius. Nếu dùng đơn vị là pixel thì góc bo tính theo pixel.

Nếu dùng đơn vị là % và cho giá trị 50%… Kèm thêm thiết lập chiều dài bằng chiều rộng…

div {
border: 2px solid #a1a1a1;
padding: 10%;
background: #dddddd;
width: 100px;
height: 100px;
border-radius: 50%;
}

Thì ta có kết quả là một hình tròn ^^

Nếu dùng đơn vị là % và cho giá trị 50%…

2 thoughts on “Tạo Sidenote và Vẽ hình tròn bằng CSS3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s