Một trong những câu chuyện marketing của các công ty thiết kế web hiện nay ngày càng mạnh với những từ khóa thiết kế website giá rẻ, thiết kế web 555k, hay thiết kế website không đồng. Tiền nào của nấy nếu thật sự nó rẻ thì chất lượng nó đi theo chứ rẻ mà mà tốt toàn PR trá hình cho sản phẩm. Việc bạn có một thiết kế website của công ty thiết kế web chuyên nghiệp nó sẽ thể hiện hoàn toàn khác dưới cách nhìn của bạn và những khách hàng sử dụng dịch vụ của doanh nghiệp bạn cung cấp.



Hãy đặt địa vị chính mình là một khách hàng tiềm năng cho công ty hay doanh nghiệp mình thì bạn sẽ biết rõ về việc nhìn nhận một website tương xứng với dịch vụ họ cũng cấp có chuyên nghiệp và đầu tư quy mô hay không, chưa kể việc bạn sử dụng những website giá rẻ một thời gian bạn sẽ tìm thấy những khuyết điểm của nó và chi phí cho bạn sửa chữa nâng cấp nó sẽ rất mất nhiều thời gian và chi phí hơn cả mua một trang web của một công ty thiết kế web chuyên nghiệp ngay từ đầu.


Khi có một website hoàn hảo cho công ty mình bạn sẽ thấy rằng sự cuốn hút, hấp dẫn và bắt mắt hơn khi thấy lượng khách hàng truy cập ngày càng nhiều. Đồng thời khi website sử dụng nhiều hình ảnh sản phẩm thực của công ty hay doanh nghiệp bạn lúc đấy đó mới chính là điều mà bạn sẽ chiến thắng đối thủ cạnh tranh của mình. Với tiêu chí: Nhanh- Tiết kiệm- Chất lượng để giúp khách hàng có được một sự khởi đầu tốt đẹp nhất, khi công ty doanh nghiệp bắt đầu mở rộng thị trường kinh doanh qua chiến lược kinh doanh maketing online. Vậỵ thì công ty thiết kế web chuyên nghiệp có ý nghĩa quan trọng như thế nào chắc bạn đã nhận rõ được lợi ích

Chúc các bạn thành công cùng với sự lựa chọn của mình. Có thể tìm hiểu thêm tài liệu ở bài viết này : https://sites.google.com/site/growthietkeweb/

Phông chữ web cho phép các nhà thiết kế web sử dụng phông chữ không được cài đặt trên máy tính của người dùng.

Khi bạn đã tìm / mua các phông chữ mà bạn muốn sử dụng, chỉ cần bao gồm các tập tin font chữ trên máy chủ web của bạn, và nó sẽ được tự động tải về cho người sử dụng khi cần thiết.

Bạn phông chữ "riêng" được định nghĩa trong CSS3 @ font-face quy tắc.

Định dạng Font khác nhau
TrueType Fonts (TTF)

TrueType là một tiêu chuẩn font chữ phát triển vào cuối những năm 1980, bởi Apple và Microsoft. TrueType là định dạng font chữ phổ biến nhất cho cả hệ điều hành Mac OS và Microsoft Windows.

OpenType Fonts (OTF)

OpenType là một định dạng phông chữ cho máy tính khả năng mở rộng. Nó được xây dựng trên TrueType, và là thương hiệu đã đăng ký của Microsoft. Phông chữ OpenType được sử dụng phổ biến hiện nay trên các nền tảng máy tính lớn.

Các định dạng Web Open Font (WOFF)

WOFF là một định dạng font chữ để sử dụng trong các trang web. Nó được phát triển vào năm 2009, và bây giờ là một khuyến cáo của W3C. WOFF bản chất là OpenType hoặc TrueType với nén và thêm siêu dữ liệu. Mục đích là để hỗ trợ phân phối font từ một máy chủ với một khách hàng qua mạng với băng thông hạn chế.

Các định dạng Web Open Font (WOFF 2.0)

TrueType font / OpenType cung cấp nén tốt hơn so WOFF 1.0.

SVG Fonts / Shapes

Phông chữ SVG SVG cho phép được sử dụng như glyphs khi hiển thị văn bản. Các SVG 1.1 xác định module font đó cho phép tạo ra các phông chữ trong một tài liệu SVG. Bạn cũng có thể áp dụng CSS để tài liệu SVG, và @ font-face quy tắc có thể được áp dụng cho văn bản trong các tài liệu SVG.

Embedded OpenType Fonts (EOT)

Font EOT là một hình thức nhỏ gọn của phông chữ OpenType thiết kế bởi Microsoft để sử dụng như các font được nhúng vào các trang web.

Tìm hiểu thêm ở đây : http://tocdothietkewebsite.tumblr.com/
CSS3 chứa một số tính năng văn bản mới.



Trong chương này, bạn sẽ tìm hiểu về các thuộc tính văn bản sau đây:

Text-overflow

Các tài sản CSS3 text-overflow định cách tràn nội dung mà không được hiển thị sẽ được báo hiệu cho người sử dụng.

Nó có thể được cắt bớt:

Đây là một số văn bản dài mà sẽ không phù hợp trong hộp

hoặc nó có thể được trả lại như một dấu chấm lửng (...):

Đây là một số văn bản dài mà sẽ không phù hợp trong hộp


Các mã CSS như sau:
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
</head>
<body>

<p>The following two paragraphs contains a long text that will not fit in the box.</p>

<p>text-overflow: clip:</p>
<p class="test1">This is some long text that will not fit in the box</p>

<p>text-overflow: ellipsis:</p>
<p class="test2">This is some long text that will not fit in the box</p>

</body>
</html>

Tìm hiểu thêm về tác dụng của CSS3 cho thiết kế giao diện website tại đây: http://tocdothietkewebsite.tumblr.com/
CSS3 gradients phép bạn hiển thị quá trình chuyển đổi trơn tru giữa hai hoặc nhiều màu sắc nhất định.
Trước đó, bạn phải sử dụng hình ảnh cho những hiệu ứng này. Tuy nhiên, bằng cách sử dụng gradient CSS3 bạn có thể giảm thời gian tải về và sử dụng băng thông. Ngoài ra, các yếu tố với gradients nhìn tốt hơn khi zoom, vì gradient được tạo ra bởi trình duyệt.

Tôi sẽ chỉ cho các bạn cách để tạo ra CSS3 Radial Gradients
Một gradient xuyên tâm được xác định bởi trung tâm của nó.
Để tạo một Gradient bạn cũng phải xác định ít nhất hai điểm dừng màu

Ví dụ : <!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
    background: radial-gradient(red, green, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>
</html>
 
Sau khi bạn đã có đoạn mã trên thì sẽ được như hình ảnh sau : 


CSS3 là sự lựa chọn hoàn hảo cho chúng ta, đưa tôi và bạn đến sự phát triển thiết kế website chuyên nghiệp :http://tocdothietkewebsite.tumblr.com/ .


CSS3 cho phép bạn thêm nhiều ảnh nền cho một phần tử, thông qua thuộc tính background-image.

Các hình nền khác nhau được phân cách bằng dấu phẩy, và những hình ảnh được xếp chồng lên nhau, nơi những hình ảnh đầu tiên là gần gũi nhất với người xem.

Ví dụ sau đây có hai hình ảnh nền, hình ảnh đầu tiên là một bông hoa (liên kết đến phía dưới và bên phải) và hình ảnh thứ hai là một nền giấy (canh vào góc trên bên trái):

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>


CSS 3 với ngành thiết kế giao diện website :http://tocdothietkewebsite.tumblr.com/ . Hãy cố gắng học CSS3 nhé các bạn.

Như đã hứa ở bài trước hôm nay chúng ta sẽ nói về những thành phần mới của CSS3.


CSS3 Border :
#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
Thuộc tính border-image cho phép bạn chỉ định một hình ảnh được sử dụng thay cho biên giới bình thường xung quanh một phần tử.

Thuộc tính border-image là một tài sản viết tắt cho thiết lập biên giới-image-nguồn, biên giới-image-lát, biên giới-image-width, border-image-đầu, biên giới-image-repeat tính.
Với sự phát triển của ngành thiết kế giao diện website : http://tocdothietkewebsite.tumblr.com/ thật sự bạn nên theo dõi các bài viết của tôi về CSS3
Thế giới công nghệ càng ngày phát triển từ những ý tưởng không thể thực hiện được con người dần dần đưa vào thí nghiệm và biến nó trở thành hiện thực. Công nghệ thiết kế website ngày nay cũng vậy, nó lại ngày càng phát triển hơn vì nhu cầu của khách hàng ngày càng cao khi thị trường công nghệ buôn bán online đang phát triển mạnh " tiết kiệm chi phí và thời gian đi lại "

Với những công cụ thiết kế giao diện website chuyên nguyện như : CSS3, bootstrap việc thiết kế ngày nay trở nên hoàn thiện, trang web ngày càng phục phụ tốt cho người dùng. Vậy hôm nay chúng ta sẽ nói về hai công cụ css3, bootstrap để xem nó khiến công việc thiết kế website chuyên nghiệp như thế nào nhé.

Bootstrap có một số ưu điểm chính :



1. Tiết kiệm thời gian
- Boostrap giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian. Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng vào website của mình. Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao diện của mình.

2. Tùy biến cao
- Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng giao diện của chính mình. Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột và độ rộng 940px. Bạn có thể thay đổi, nâng cấp và phát triển dựa trên nền tảng này.

3. Responsive Web Design
- Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng trên thế giới.

CSS3 có đặc điểm gì?



- CSS3 là một tiêu chuẩn mới và bản nâng cấp đáng kể của CSS. Là một thành phần làm nên trang website một cách toàn diện nhất với các hỗ trợ sẵn có mà không cần phải dùng tới các thành phần bổ sung bên như như: JavaScript, Jquery, Flash,... khiến cho trang web tải nhanh chóng hơn. Tuy nhiên, với tiêu chuẩn mới này thì trình duyệt của bạn cũng phải là phiên bản mới nhất có hỗ trợ CSS3.
- CSS3 bổ sung rất nhiều thành phần mới giúp người lập trình web giảm thiểu được rất nhiều tài nguyên từ thành phần bổ sung bên ngoài, đặc biệt CSS3 rất có lợi cho website làm việc hiệu quả mà ít tốn dung lượng tài nguyên, thời gian tải trang.
Thành phần mới của CSS3
- CSS3 Border
- CSS3 Backgrounds
- CSS3 Gradients
- CSS3 Text Effects
- CSS3 Fonts
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS3 Transitions
- CSS3 Animations
- CSS3 Multiple Columns
- CSS3 User Interface

Bài sau tôi sẽ làm rõ hơn về các thành phần mới của CSS3. Mọi thứ chúng ta sẽ làm rõ với cả bài viết này: http://tocdothietkewebsite.tumblr.com/ .Các bạn hãy bình luận phía dưới nói lên những điều bạn biết về những công cụ thiết kế giao diện website để chúng ta cùng tham khảo và phát triển. Chúc các bạn may mắn lần sau!