Tạo hiệu ứng Gradient bằng CSS 3 một cách đơn giản

Trước đây chúng ta thường dùng các hình ảnh chuyển sắc để làm background cho trang trang web hay một phần trang web, nhưng như thế sẽ làm website của ta load rất nặng điều này không tốt cho SEO và cả người dùng.

Ở thời đại ngày nay chúng ta đã có CSS 3 có thể giải quyết được vấn đề này chỉ với vài dòng lệnh, giúp website load nhẹ hơn rất nhiều.

Bài này mình sẽ hướng dẫn các bạn sử dụng công cụ để tạo một hiệu ứng Gradient một cách nhanh nhất.

Các bạn vào http://www.colorzilla.com/gradient-editor/ để bắt đầu tạo hiệu ứng gradient bằng css 3.

Tại box Presets có chứa các mẫu có sẳn về hiệu ứng chuyển sắc Gradient các bạn có thể chọn mẫu mình thích, các bạn nhìn xuống dưới có một thanh cho phép các bạn điều chỉnh theo ý mình thích giống như sử dụng Photoshop vậy đó.

Tạo hiệu ứng Gradient bằng CSS 3
Tạo hiệu ứng Gradient bằng CSS 3

Copy tất cả các code trong box CSS và bỏ vào class của css như ví dụ bên dưới:


<html>
	<head>
		<meta charset="UTF-8"> 
		<title>Ví dụ tạo hiệu ứng background gradient bằng CSS 3</title>
	</head>
	<style>
		.gradient{
			height: 100px;
			background: #e6f0a3; /* Old browsers */
			background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
			background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
		}
	</style>
	<body>
		<div class="gradient">
		</div>
	</body>
</html>

Thế là bạn đã tạo thành công một background gradient bắt mắt mà không cần dùng đến hình ảnh.
Các bạn xem demo online tại đây http://jsfiddle.net/75L7f/

Tạo Theme WordPress 5: Viết CSS cho giao diện Tablet

Ở bài trước chúng ta đã làm xong Viết CSS cho giao diện mobile đến bài này mình sẽ hướng dẫn các bạn viết CSS cho Tablet.

Ở đây mình xét 2 loại thiết bị đó là Small Tablet (600×800) và Tablet (ipad 2, 3, mini) (768×1024).

Đối với Small Tablet ta không có chỉnh sửa gì vì với kích thước chiều ngang như thế không thể đổ sidebar lên được, ta sẽ tiến hành viết css cho Tablet, trước tiên tạo file tablet.less trong thư mục css (nhớ vào prepros để Fresh project lại nhé các bạn).

Các bạn viết CSS vào trong đoạn code sau:

@media screen and (min-width: 768px) {
	/* Viết code CSS tại đây */
}

Phần header ta vẫn giữ nguyên, ta bắt đầu xử lý phần Wrapper ở giao diện Tablet ta sẽ chia phần này thành 2 phần đó là danh sách các bài viết mới và sidebar.

Sau đây là đoạn code css cho phần Wrapper và Footer:

@media screen and (min-width: 768px) {
	/* Viết code CSS tại đây */
	#wrapper{
		.main-content{
			width: 69%;
			float: left;
			.featured_cont{
				width: 48%;
				float: left;
			}
			.posts{
				clear: both;
			}
		}
		.sidebar{
			width: 29%;
			float: right;
			margin: 6px;
			.sidebar-item{
				margin-bottom: 4px;
				box-shadow: 3px 3px 3px #dcdcdc;
			}
		}
	}
	#footer{
		clear: both;
	}
}

Đa số các thuộc tính css này mình đã giải thích ở các bài trước nên chắc nó cũng đơn giản dễ hiểu phải không nào.

Giao diện kết quả sẽ như thế này:

Viết CSS cho giao diện Tablet
Viết CSS cho giao diện Tablet

Các bạn download code đầy đủ của bài này tại đây

Ở bài viết sau mình sẽ hướng dẫn các bạn viết phần cuối đó là viết phần css cho giao diện Desktop với menu đa cấp xổ xuống.

Tạo Theme WordPress 4: Viết CSS cho giao diện Mobile

Lời đầu tiên cho mình xin cáo lỗi với các bạn là trong thời gian nghỉ tết do ăn chơi dữ quá nên không biết bài mới được, bây giờ mình mới tiếp tục viết bài cho Serie WordPress Toàn Tập này.

Để có thể review trang web trên các loại thiết bị như mobile, tablet, … ta dùng công cụ sau đây để test trang web ngay trên trình duyệt Firefox. Vào http://lab.maltewassermann.com/viewport-resizer/ click và giữ chuột button “CLICK OR BOOKMARK” kéo vào bookmark toolbar của Firefox, sau đó vào website cần kiểm tra và bấm vào Bookmark vừa được tạo là “<->Resizer” để kiểm tra từng kích thước màn hình khác nhau.

Nào chúng ta bắt đầu Viết CSS cho Mobile, trước tiên bạn thêm đoạn code sau vào trước thẻ </head> của file index.html.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="screen and (min-width: 18.750em)" />
<link rel="stylesheet" type="text/css" href="css/small-tablet.css" media="screen and (min-width: 600px)" />
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width: 768px)" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width: 1024px)" />

Dòng đầu tiên là để kích hoạt chế độ Responsive của giao diện, các dòng tiếp theo là chèn lần lượt các file css cho riêng từng loại màn hình vào giao diện.

Tiếp đó ta tạo file mobile.less trong thư mục css ta tạo lúc ban đầu, đừng quên bật Prepros nhé, tạo xong quay lại Prepros bấm Refresh để file mobile.less được cập nhật vào phần mềm.

Ta vừa làm vừa mở tool Resizer để check cho tiện, hiện tại giao diện nó sẽ như thế này:

Giao diện hiện tại chạy trên Mobile
Giao diện hiện tại chạy trên Mobile

Bắt đầu viết những dòng code đầu tiên trong file mobile.less, sau đây là đoạn code dùng để thiết lập một số thuộc tính chung cho giao diện mobile, các bạn sẽ viết code tại /* Viết code CSS tại đây */

@media screen and (min-width: 18.75em) {
	/* Viết code CSS tại đây */
}

Ta bắt đầu viết CSS cho phần Header trước, code phần header như sau:

#header{
	.top-menu{
		ul{
			padding-top: 3px;
			li{
				padding-right: 5px;
			}
		}
	}
	.site-title{
		.title{
			text-align: center;
			padding: 5px 0;
		}
		.top-banner{
			text-align: center;
			padding-bottom: 3px;
			img{
				width: 98%;
			}
		}
	}
	.header-menu{
		padding-top: 10px;
		min-height: 3em;
		a.mobile-menu{
			background: #dcdcdc;
			margin-left: 40%;
			border: 2px solid #FF0000;
			padding: 5px;
			border-radius: 3px;	
		}
	}
}

Ở phần này đáng chú ý đó là phần Header Menu, tại giao diện Mobile thì không thể nào làm menu với nhiều thuộc tính như vậy được nên ta tạo một nút Menu và sẽ viết một đoạn jQuery đơn giản để ẩn đi danh sách các menu để lại nút Menu khi click vào nút Menu sẽ hiển thị danh sách các item của Menu. jQuery được thực hiện như sau.

Trước tiên ta tạo một folder ngang hàng với index.html tên là “js” và tạo một file jquery.js với nội dung như sau:

$(document).ready(function(){
	$('.header-menu > ul').hide();
	$('a.mobile-menu').click(function(){
		$('.header-menu > ul').slideToggle(100);
	});
});

Thêm code sau vào trước thẻ :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.js"></script>

Phần Wrapper không thay đổi, Code Footer có nội dung như sau:

#footer{
	.footer-logo{
		text-align: center;
	}
}

Giao diện cuối cùng sẽ như thế này:

Viết CSS cho giao diện Mobile
Viết CSS cho giao diện Mobile

Các bạn download code đầy đủ tại đây
Bài tiếp theo mình sẽ hướng dẫn các bạn viết CSS cho giao diện Tablet.

Tạo Theme WordPress 3: Viết CSS thành phần chính cho HTML

Ở bài trước chúng ta đã hoàn thành xong sườn của theme bằng html rồi, bây giờ chúng ta bắt đầu xác định các thành phần chính của website và viết css cho những phần chung cho các kích thước màn hình khác nhau.

Các bạn nhìn vào trang chủ Xuân Thức Blog sẽ thấy các phần chung dành cho các loại màn hình như sau:

  • Màu background, màu chữ, màu hover, border.
  • Màu Background của Site Title.
  • Màu background của trang web.
  • Màu background của Featured Posts và các posts.
  • Sidebar.
  • Màu background của Footer, màu chữ, màu hover.

Nào chúng ta bắt đầu vào xây dựng CSS thôi, trước tiên các bạn tạo một file style.less ngang hàng với file index.html và bổ sung thêm vào thẻ <head> của index.html đoạn sau để gọi file style.css (style.css được sinh ra khi bạn save file style.less – với điều kiện là phần mềm Prepros phải được mở nha).

<link rel="stylesheet" href="normalize.min.css" /> <!--Reset CSS-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />

Bắt đầu viết nội dung cho file style.less, trước tiên bạn thêm đoạn này vào đầu file style.less:

body {
  font-size: 93.8%;
  line-height: 1.5em;
  background-color: #EFEFEF;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
}
a {
  color: #1e4684;
  text-decoration: none;
}
a:hover {
  color: #ed1b2d;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Một số thông giải thích như sau:

  • font-size: 93.8%; ở đây nghĩa là ta đưa tỷ lệ của đơn vị em = 15px cho dễ tính, mặc định nó là 16.
  • line-height: 1.5em; là khoảng cách giữa các dòng văn bản với nhau.
  • background-color: #EFEFEF; là màu nền của trang web.
  • ahover chắc các bạn cũng đã biết đó là thiết lập cho link và khi rê chuột vào link.
  • before, after là để set cho các trình duyệt khác như IE chẳng hạn khỏi bị tràn chữ ra ngoài khung.

Tiếp đến ta viết CSS cho phần Header:

#header{
  width: 100%;
  .top-menu{
    margin: 0;
    height: 2em;
    background: #000;
    ul{
      margin: 0;
      list-style: none;
      li{
        display: inline;
        a{
          color: #fff;
        }
      }
    }
  }
  .site-title{
    background: #49B3EB;
    .title{
      h1{
        margin: 0;
        a{
          color: #FF8040;
        }
      }
    }
  }
  .header-menu{
    background: #858585;
  }
}

Ở phần này có một số thông số đáng chú ý đó là:

  • margin: 0; trong thẻ ul để canh lề lại cho thẻ này vì thẻ này mặc định nó bị đẩy vào.
  • list-style: none; lệnh này dùng để bỏ các dấu chấm đen đằng trước mỗi item của list.
  • display: inline; lệnh này dùng để đưa các phần từ về cùng một hàng thay vì nó dạng cột như mặc định.

Tiếp đến là viết CSS cho phần Wrapper:

#wrapper{
  .main-content{
    .featured_cont{
      margin: 5px;
      border: 1px solid #d6d6d6;
      border-radius: 3px;
      box-shadow: 3px 3px 3px #dcdcdc;
      .featured_posts{
        background: #fff;
        margin: 2px;
        border-radius: 2px;
        .featured-title{
          background: #3C78E8;
          text-align: center;
          font-weight: bold;
          color: #fff;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
        .posts-title{
          padding-left: 5px;
          font-weight: bold;
        }
        .thumb{
          img{
            border: 1px solid #dcdcdc;
          }
        }
        .posts-exceprt{
          padding: 5px;
        }
        .posts-item{
          ul{
            margin: 0;
            list-style: none;
            li{
              padding-left: 18px;
              background: url("images/list-icon.png") left no-repeat;
            }
          }
        }
      }
    }
    .content{
      .posts{
        background: #fff;
        border: 1px solid #d6d6d6;
        border-radius: 3px;
        margin: 5px;
        box-shadow: 3px 3px 3px #dcdcdc;
        padding: 5px;
        .post-title{
          a{
             font-weight: bold;
             font-size: 18;
          }
        }
        .thumb{
          img{
            border: 1px solid #dcdcdc;
          }
        }
        .posts-exceprt{
          padding: 5px;
        }
      }
    }
  }
  .sidebar{
    .sidebar-item{
      background: #fff;
      border-radius: 4px;
      border: 1px solid #dcdcdc;
      .widget-title{
        background: #3C78E8;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        text-align: center;
        font-weight: bold;
        color: #fff;
      }
      .textwidget{
        ul{  
          margin: 0;
          list-style: none;
          li{
            padding-left: 18px;
            background: url("images/list-icon.png") left no-repeat;
          }
        }
      }
    }
  }
}

Các thông số đáng chú ý trong phần Wrapper:

  • border: 1px solid #d6d6d6; lệnh này dùng để tạo đường viền độ dày 1 pixel cho div với màu là #d6d6d6.
  • border-radius: 3px; thẻ này dùng để bo góc 3px cho div đó.
  • box-shadow: 3px 3px 3px #dcdcdc; lệnh này dùng để đổ bóng cho div.
  • background: url(“images/list-icon.png”) left no-repeat; lệnh này trong li dùng để tạo background bên trái cho item.

Cuối cùng là viết CSS cho phần Footer:

#footer{
  background: #5C5C5C;
  border-top: 3px solid #FF0606;
  .footer-logo{
    color: #fff;
    font-size: 18;
  }
  .footer-info{
    color: #272727;
  }
}

Hoàn tất ta sẽ được tương tự như thế này:

Hướng dẫn Viết CSS cho HTML
Hướng dẫn Viết CSS cho HTML

Ở bài trước mình có nhầm tí là id=”footer” nhưng mình để là class=”footer” các bạn sửa lại nhé, mời các bạn download bản mới dành cho bài này tại đây, phần sau mình sẽ hướng dẫn viết CSS dành cho giao diện mobile.

Code tạo Menu trái trượt theo website khá cool

Hôm nay lang thang trên mạng thấy cố một bạn share code tạo Menu trái trượt theo website khá cool, nên share lên blog cho anh em down về dùng, code bằng html và css nên chắc không có vấn đề gì đối với anh em, nếu ai không tích hợp được vào website thì pm mình bằng cách bình luận bài bên dưới nha, mình sẽ hướng dẫn.

Demo tại đây: http://ptc.org.vn/demo/menu-left-fixed

code-menu-dep
Code menu khá đẹp cho các bạn

Các bạn download tại đây