Bài đăng

Hiển thị các bài đăng có nhãn CSS

Thuộc tính border-radius trong CSS3

Hình ảnh
Thuộc tính border-radius là 1 thuộc tính mới xuất hiện ở HTML5. Thuộc tính này rất hữu dụng để bo tròn các góc của 1 phần tử (element) DIV hoặc SPAN. Trong quá trình thiết kế website người ta luôn sử dụng thuộc tính này để làm đẹp hình ảnh và đơn giản một điều là nó không làm ảnh hưởng đến việc load trang cho web ngược lại còn góp phần làm đẹp, tạo điểm nhấn cho hình ảnh mà bạn muốn truyền tải. Trong thủ thuật hôm nay longanit xin hướng dẫn các bạn cách để chúng ta sử dụng tính năng này.
Để bo tròn các góc của phần tử, bạn sử dụng thuộc tính border-radius
<style>
    .border1 {
        border-radius: 20px;
        background-color: green;
        color: white;
        width: 150px;
        height: 100px;
        padding: 20px;
    }
</style>
 <div class="border1">
    Ví dụ về border-radius
</div>

Bạn có thể chỉ ra từng bán kính bo tròn của các góc khác nhau: border-radius: Rgóc-trên-trái rgóc-trên-phải r-góc-dưới-phải r-góc-dưới-trái; border-radius: 0…

Tạo Slideshow với HTML, CSS và Javascript căn bản

Hình ảnh
Slideshow là một phần rất quan trọng và không thể thiếu trong website hiện nay, thực chất thì đây chỉ là những hình ảnh chạy qua lại chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này longanit sẽ cùng các bạn xây dựng một Slideshow đơn giản với HTML, CSS và Javascript.



Bước 1: Tạo code HTML
<div class="slideshow-container">
  <h2>longanit.com hướng dẫn tạo slideShow đơn giản</h2>
  <div class="mySlides fade">
    <img src="./images/slide-1.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide đầu tiên!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-2.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 2!</div>
  </div>

  <div class="mySlides fade">
    <img src="./im…

Cách chèn hình ảnh và liên kết vào trang web HTML

Hình ảnh
Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif (hình động),.... vào trang web của mình. Trong bài viết hôm nay phần chuyên mục HTML và CSS căn bản mình xin giới thiệu với các bạn một số mã cơ bản để chèn hình ảnh, link vào trong website.
1. Cách chèn hình ảnh vào trong website Để đưa hình ảnh vào trang html ta dùng thẻ <img> với cú pháp cơ bản như sau

<img src="Liên kết đến ảnh " />
Một số thuộc tính đi kèm như sauWidth: Chiều rộng của ảnh sẽ hiển thị trên trình duyệt ( tính bằng pixel hoặc % so với chiều rộng toàn trang web )Height: Chiều cao mà ảnh sẽ hiển thị trên trình duyệt.Border (Đường biên hay đường viền) :Thuộc tính này quy định độ dày của đường biên bao quanh ảnh ( tính bằng pixel ). Nếu không có thuộc tính này, ảnh sẽ không có đường biên bao quanh.Alt : Tiêu đề cho ảnh, khi bạn rê chuột vào ảnh, tiêu đề của ảnh sẽ hiện ra. Tuy nhiên "alt" không có tác dụng trong một số trình duyệt, vì vậy để chắc ăn, bạn nên dùng thuộc t…

Thuộc tính con trỏ chuột trong CSS

Hình ảnh
Thuộc tính trỏ chuột có chức năng quyết định cách hiển thị của con trỏ khi di qua một thành phần nào đó, trong bài viết này tôi sẽ hướng dẫn các bạn cách hiển thị các kiểu con trỏ trong CSS Blogger.


Bước 1: Bạn truy cập vào blog hay trang web của bạn
Bước 2: Click chuột phải vào vùng trống trên trang web sau đó chọn "kiểm tra" hoặc bạn có thề truy cập nhanh bằng việc nhấn phím nóng F12 thần chưởng quá dễ đúng không. Sau khi vào màn hình dành cho nhà phát triển bạn chọn như hình

Ở đây tại thẻ Body CSS mình thêm vào đoạn "cursor:" khi đó trình duyệt sẽ hiện ra các kiểu con trỏ như bên dưới.
auto
alias
crosshair
col-resize
default
e-resize
help
move
n-resize
ne-resize
nw-resize
not-allowed
no-drop
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
w-resize
wait Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ các thuộc tính liên quan đến con trỏ. Bạn có thể thay đổi các thông số con trỏ chuột như tôi liệt kê bên dưới để xem…

CSS căn bản cách đổi màu link liên kết trên website

Hình ảnh
Khi bạn online trên internet hoặc bản thân là quản trị một trang web khi truy cập vào các đường link trong trạng thái tĩnh hay động bạn sẽ thấy có hiệu ứng màu link
Hiệu ứng màu link nó được tạo ra ừ CSS áp dụng cho tất cả link liên kết của website, blog của bạn. Tạo hiệu ứng thay đổi màu sắc phân biệt rõ ràng cho khách truy cập.

Phân biệt link đã truy câp, link chưa truy cập và di chuột vào sẽ thay đổi thành màu sắc khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn tìm hiểu về cách thay đổi các màu link này theo ý mình

Ví dụ: Tôi có đoạn code CSS như sau:

/* màu Link khi chưa truy cập*/
a:link {
color:#3366ff;
text-decoration:none;
}
/*Màu Link khi đã truy cập*/
a:visited {
color:#cccccc;
text-decoration:none;
}
/*Màu link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}
Như đoạn code trên tôi chia làm 3 trường hợp

Trường hợp 1: màu link chi chưa truy cập Trường hợp 2: màu link khi đã truy cậpTrường hợp 3: màu link khi rê chuột vào Nói thì có vẻ mông lung…

Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

Hình ảnh
Đây là hiệu ứng tạo chữ chạy trên thanh tiêu đề cho Blog của trang chạy qua lại trông rất bắt mắt, với đoạn code tôi chia sẻ bên dưới sẽ giúp cho các bạn thực hiện được hiệu ứng ấy một cách dễ dàng trên Blogger.

Thật ra thì code kiểu này có từ rất lâu rồi, nhiều bạn chuyên về thiết kế Web hoặc Blog thì nó quá đơn giản rồi đúng không nào. Tuy nhiên đối với những bạn mới bước vào nghề thì hơi bị khó đấy. Qua đây  mình cũng xin giới thiệu lại cho một số bạn mới đến với Blogger cũng như những bạn mới học thiết kế Web như mình đoạn coe này trên nền tản CSS và HTML. Các bạn thực hiện theo các bước sau nhé.


Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTMLTìm đến thẻ </head> và thêm đoạn code  bên dưới vào ngay bên trên nó

<script type="text/javascript">
var txt="Chào mừng bạn đến với Longanit.com. Chúc các bạn có những giây phút vui vẻ";
var espera=150;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0)…

Code tạo nút Demo, Download, Xem mẫu, Tải về, Mua ngay đẹp cho Blogger

Hình ảnh
Với các blogger lĩnh vực về  game, phần mềm, chia sẻ tài liệu... thì thường chia sẻ những đường link để người dùng download hay xem demo.

Việc làm nổi bật các đường link này chúng ta nên kết hợp với các Button để người dùng dễ dàng nhìn thấy và làm đẹp blog của bạn. Bộ code này dùng để làm button bằng CSS3 đẹp tuyệt.

Khi bạn đưa trỏ chuột vào button thì sẽ thấy hiệu ứng rất hay. Bộ code này đi kèm với thư viện Bootstrap, Fontawesome, với bộ icon đa dạng và phong phú giúp bạn có thể tùy chỉnh icon tùy thích. Trong bài này tôi sẽ hướng dẫn cho các bạn cách tạo bộ icon này với các bước thực hiện như bên dưới.

Bước 1: Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML

Bước 2: Thêm thư viện FontAwesome vào bằng cách thêm đoạn code này vào sau thẻ <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Nếu blog của bạn có đoạn tương tự thì có thể bỏ qua hoặc thay bằng đoạn code trên

Bước 3: Thêm đoạn CSS này tr…