Cách đổi màu thuộc tính placeholder của thẻ input HTML

Nếu ngày trước để làm một ô nhập liệu có thể hiển thị chữ như “Nhập tên ở đây” khi click vào biến mất dòng chữ đó thì phải viết javasrcipt cũng khá là rắc rối. Bây giờ thì bạn chỉ cần thêm thuộc tính placeholder cho thẻ input là có thể làm được điều này:

Có một vấn đề là màu của thuộc tính placeholder này là màu xám. Nếu bạn để textbox là màu trắng thì không có gì, nhưng khi đổi sang màu khác thì đúng là thảm họa. Bài viết này mình sẽ bày cho bạn một cách nhỏ để đổi màu placeholder text, chỉ cần thêm những dòng dưới đây vào file css của bạn. Đoạn code này thì sẽ thay thế tất cả mày của placehoder thành màu đỏ. Nếu chỉ muốn 1 input nào đó thì chỉ cần gọi class hoặc id phía trước nó thôi.

Hi vọng bài viết này sẽ giúp ích cho các bạn. Nếu có bất cứ thắc mắc hay vấn đề gì các bạn cứ để lại comment để mính sẽ trả lời các bạn.

Hướng dẫn sử dụng CSS3 Blending Mode

Nếu bạn đã từng dùng qua những trình chỉnh sửa hình ảnh như Photoshop hay Pixelmator thì chắc hẳn bạn sẽ nghe đến tính năng Blending Modes. Blending Mode là tập hợp các chế độ giúp pha trộn đối tượng này với các đối tượng khác, để tạo ra sự tương phản. Nếu bạn làm thành thục kỹ năng dùng Blending Mode thì có thể làm ra một bức hình như sau :

blend-mode-example

Blending Mode là một tính năng chỉ có thể tìm trong những trình chỉnh sửa hình ảnh Bây giờ thì bạn có thể thực hiện với CSS 3. Bây giờ chúng ta sẽ bắt đầu tìm hiểu xem blend màu bằng CSS 3.

Chuẩn bị

Để có thể nhìn thấy được hiệu ứng này trên Chrome thì bạn cần thực hiện vài bước dưới đây:

Truy cập vào chrome://flags và bật tính năng Web Platform Features lên.

web-platform-feature-enabled

Background and Mix Blend Mode

Hai thuộc tính mới được giới thiệu trong CSS3 mà chúng ta sẽ tìm hiểu trong bài viết này là mix-blend-modebackground-blend-mode.

Mix-blend-mode : Định nghĩa cách mà đối tượng sẽ pha trộn với những đối tượng phía dưới như thế nào.

Background-blend-mode : Đường dẩn màu nền , hình nền, và  background gradients.

Giống như Photoshop, Blending Modes trong CSS cũng có những thuộc tính như normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Chế độ Blending Modes trong Photoshop
Chế độ Blending Modes trong Photoshop

Sử dụng CSS3 Blend Mode

Ở bài viết này mình sẽ dùng logo của Google để demo tính năng này, vì nó có nhiều màu sắc. Mình sẽ trộn màu lại với nhau để cho các bạn dễ thấy được sự khác nhau.

Đầu tiên chúng ta tạo ra một đoạn HTML chứa các ký tự của từ Google như sau:

Chúng ta sẽ dùng selector

  của CSS để tránh phải đặt tên từng class cho từng chữ cái. Chúng ta sẽ thêm màu vào cho từng chữ cái với giống như logo của Google bằng CSS như sau:

 

Ở đây các bạn chú ý đến dòng letter-spacing: -25px; nó có tác dụng điều chỉnh khoảng cách giữa hai ký tự trong một từ.Sau khi thêm css vào chúng ta sẽ được một logo như hình bên dưới:

lam-google-logo-bang-css

Bây giờ chúng ta sẽ áp blend mode vào:

Bạn sẽ thấy màu sắc giữa những phần giao nhau của các ý tự đã thay đổi. Vàng với xanh dương thành màu xanh lá cây.

google-logo-blended

Xem lại tất cả mã nguồn của bài viết:

Bài viết trên là một ví dụ đơn giản cho việc sử dụng CSS3 Blending Mode trong thiết kế Website. Hi vọng qua bài viết này sẽ giúp được các bạn trong quá trình học CSS cũng như tìm hiểu về CSS3.Mình cũng xin giới thiệu với các bạn link rất hữu ích về Blending Mode CSS3 với ví dụ trực quan và so sánh giữa việc dùng CSS3 và hình ảnh để làm hình nền mà bạn nên tham khảo.

Ví dụ và so sánh Blanding Mode CSS3 :http://bennettfeely.com/gradients/

Tài liệu về Blend Mode CSS3 : http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode

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

 

15 mẫu thiết kế Web đẹp bằng Bootstrap nên xem

15 mau theme bootstrap dep nen xem

Twitter Bootstrap bao gồm các mã HTML và CSS cơ bản cho Typography, forms, buttons … và nhiều thành phần khác của website. Nó giúp chúng ta giảm thiểu thời gian thiết kế HTML và CSS, định nghĩa sẵn các class CSS công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình. Ngoài ra, Twitter Bootstrap còn hỗ trợ Responsive Design. Và hôm nay, mình sẽ giới thiệu một vài website mẫu dùng Twitter Bootstrap đẹp mắt, dễ gây ấn tượng cho người xem.

SerpBook

bootstrap-website-1

ThinSlices

bootstrap-website-2

Uberflip

bootstrap-website-3

Pear Analytics

bootstrap-website-4

SugarSync

bootstrap-website-5

Jumpstart UI

bootstrap-website-6

Atmail

bootstrap-website-7

Jetstrap

bootstrap-website-8

Learndot

bootstrap-website-9

Memrise

bootstrap-website-10

Brandwatch

bootstrap-website-11

Roxanne Koranda

bootstrap-website-12

Monitor Backlinks

bootstrap-website-13

NTFY

bootstrap-website-14

Disrupt University

bootstrap-website-15

Trên đây là 15 mẫu thiết kế web bằng Bootstrap với thiết kế khá độc đáo bạn có thể học hỏi khác nhiều từ những trang này.Nếu bạn có vấn đề gì hoặc có thắc mắc cứ để lại comment tại bài viết này nhé !

Lấy url của trang hiện tại(current url) bằng javascript và jQuery

Có rất nhiều cách để có thể lấy được url của trang hiện tại trên website.Nhưng thông dụng nhất vẩn là dùng Javascript hoặc jQuery.Hôm nay mình xin giới thiệu chi tiết về các thuộc tính cũng như những hàm của javascript và jQuery giúp chúng ta có thể lấy được current url.

window.location là một hàm chỉ đọc(read-only) sẽ trả về giá trị là Location object bao gồm những thông tin về vị tri hiện tại trên Website.

Để hiểu rõ hơn chúng ta cùng xét qua một ví dụ:
http://www.test.com:8082/index.php#tab2?foo=123
Đầu tiên chúng ta sẽ get url ở trang hiện tại bằng javasrcript:

Còn dưới đây là jQuery:

Với bài hướng dẩn ngắn này hi vọng sẽ giúp ích cho các bạn trong lúc thiết kế cũng như lập trình web.Nếu có thắc mắc hoặc yêu cầu gì bạn cứ comment ngay tại bài viết này mình sẽ giải đáp nhanh nhất có thể.

Plugin Jquery phong cách so sánh hình ảnh – twentytwenty

Dạo gần đây nhiều người đặt câu hỏi về tính năng so sánh hình ảnh xưa và nay trên Zing.vn là dùng plugin gì ?Hôm nay mình xin giới thiệu đến các bạn plugin tạo hiệu ứng tương tự bằng Jquery.

twentytwenty là một plugin với tính năng so sánh và chỉ ra sự khác nhau giữ hai hình ảnh.Plugin này tạo một thanh ở giữa hình giúp bạn có thể kéo qua lại để so sánh giữa tâm hình phía trên và tấm hình phía dưới như hình phía dưới.

plugin so sanh hinh anh giong zing.vn

Cách sử dụng plugin twentytwenty

Download

Đầu tiên bạn phải download plugin này về.Chú ý đây là plugin jquery chứ không phải là của wordpress nhé.Plugin twentytwenty dành cho WordPress mình sẽ giới thiệu ở bài viết sau.

Sau khi đã có file thì bạn tiến hành giải nén và làm theo những bước sau

Chèn file CSS và JS của twentytwenty và thẻ head

Bạn cần tạo thêm cấu trúc HTML theo mẫu sau

Cần chèn thêm file jquery.event.move.js để sử dụng được sự kiên ‘movestart’, ‘move’ and ‘moveend’.

Sau khi hoàn thành các bước trên chúng ta tiến hành gọi plugin làm việc

Như vậy là đã hoàn thành rồi.Bạn chạy thử file vừa làm xem như thế nào.Nếu gặp lổi hay có gì thắc mắc xin để lại comment để mình giải đáp nhé.Chúc các bạn thành công !

Hướng dẩn tạo navbar mini khi dùng Bootstrap

Ngày càng nhiều blogger dùng theme có sử dụng Bootstrap và blog của mình cũng dùng Bootstrap từ lâu.Nếu chưa biết gì về Bootstrap có thể đọc qua những bài viết liên quan đến Bootstrap trên blog của mình.
Khi mới bắt đầu làm quen với Bootstrap mình gặp rất nhiều khó khăn trong việc custom lại css theo ý của mình vì muốn.Với lại tài liệu về Boootstrap bằng tiếng Việt cũng không nhiều.Đa số những bí quyết hay tài liệu điều là tiếng Anh nên gây không ít khó khăn cho những người mới làm quen với CSS Framework này.
bootstrap navnarMình đã loay hoay rất lâu mới chỉnh sửa được theo ý mình.Nếu bạn đang dùng Bootstrap thì bạn chắc hẳn có sử dụng Navbar để làm menu cho website của mình.Như blog của mình dùng đế 2 menu thì cách dùng cũng đơn giản.Chỉ cần chỉnh sửa lại một ít là có thể tạo ra menu nhỏ hơn so với mặc định của Bootstrap.
Đầu tiên chúng ta cần thêm CSS này vào file style.css của website của bạn.

Còn đây là cách sử dụng của Mini Navbar Bootstrap bạn chỉ cần thêm 2 thẻ div với cấu trúc như đoạn code bên dưới là xong.

 

Thật sự mình cũng muốn Việt hóa lại tài liệu của Twitter Bootstrap nhưng lại chưa có động lực để làm.Nếu bài viết này được nhiều bạn ủng hộ mình sẽ cố gắng Việt hóa lại Document Bootstrap để những bạn mới làm quen không tốn nhiều công sức phải tìm lục tại liệu tiếng Anh nữa.
Với bài viết ngắn này hi vọng các bạn có thể thiết kế những template đẹp bằng Bootstrap.Nếu có bất cứ gì thấc mắc hoặc yêu cầu gì cứ để lại comment bên dưới, mình sẽ cố gắng giải đáp trong khả năng của mình.

Top 30 plugin Jquery tạo Lightbox miển phí

Hiệu ứng Lightbox cho ảnh chính là hiệu ứng mà khi các bạn nhấp vào một tấm ảnh nó sẽ hiển thị ra một cửa sổ popup nhỏ để hiển thị kích thước thật của ảnh đó từ việc sử dụng một plugin trong jQuery.

Dưới đây là 30 plugin Lightbox miển phí để bạn có thể tích hợp vào website của mình, bạn có thể áp dụng những plugin miển phí này cho bất kỳ dự án web nào dù có dùng wordpress hay không, bạn chỉ cần chèn file javasrcript và css vào là được.

Announcing Nivo Lightbox – A free jQuery Lightbox Plugin

Announcing-Nivo-Lightbox-–-A-free-jQuery-Lightbox-Plugin

Colorbox – a jQuery lightbox

Colorbox-a-jQuery-lightbox

fancyBox

fancyBox

Nivo Lightbox

Nivo-Lightbox

Image Lightbox

Image-Lightbox

Fluidbox

Fluidbox

Lightbox

Lightbox

Magnific Popup

Magnific-Popup

Bootstrap Image Gallery

Bootstrap-Image-Gallery

Avgrund Popins

Avgrund-Popins

blueimp Gallery

blueimp-Gallery

Remodal

Remodal

jQuery Photobox

jQuery-Photobox

Custombox

Custombox

jQuery nanoGALLERY

jQuery-nanoGALLERY

VenoBox

VenoBox

FancyBox Lighbox Jquery Plugin

FancyBox-Lighbox-Jquery-Plugin

iLightBox

iLightBox

Litebox jQuery Plugin

Litebox-jQuery-Plugin

jQuery facyBox

jQuery-facyBox

jQuery lightGallery

jQuery-lightGallery

Featherlight – ultra slim jQuery lightbox

Featherlight-–-ultra-slim-jQuery-lightbox

Vanillabox

jQuery-Lighter

jQuery Lighter

Popup.-js

Popup.js

Popup.js

jGallery

jGallery

jQuery fullsizable

jQuery-fullsizable

Visual jQuery Lightbox

Visual-jQuery-Lightbox

PgwModal

PgwModal

ABigImage

ABigImage

Trên đây là những plugin Lightbox miển phí thông dụng còn rất nhiều plugin có tác dụng tương tự nhưng ở bài viết này mình chỉ xin giới thiệu 1 số ít trong đó.Nếu bạn muốn biết cách sử dụng plugin Lightbox nào cứ để lại comment mình sẽ viết bài hướng dẩn riêng cho plugin đó.Chúc bạn thành công !

Live Counter đơn giản với jQuery và CSS

Trong bài viết này mình sẽ giải thích về Live Counter và viết một demo nhỏ cho các bạn.Bài viết này sẽ giúp ích cho bạn nếu bạn muốn trang trí cho phần thống kê trên website của mình như tổng số lượt view, lượng subcribes, lượng bài viết,… hiện có trên site một cách sinh động hơn. Để giải thích về Live Counter thì bạn có thể xem qua bài viết 26 mẫu Under Construction Page tuyệt đẹp và miển phí bạn sẽ thấy một số mẫu có đồng hồ đếm ngược đó cũng là một dạng Live Counter. Bạn có thể hiểu đơn giản là bộ đếm tăng hay giảm theo thời gian. live Counter don gian voi jquery va CSS Sau khi làm theo hướng dẩn này bạn sẽ được như hình phía trên. Bây giờ chúng ta sẽ vào phần chính là viết code: Phần đầu là HTML:

[code language=”html”]
<div class=”stat”>
<span class=”stat-count”>8</span>
<p class=”stat-detail”>Subscribers</p>
</div>
[/code]

Đây là đoạn HTML mẫu với giá trị đếm kết thúc là 4200 tức là khi chạy đến 4200 thì dừng.Bạn có thể tạo ra nhiều đoạn HTML cùng chạy với nhau ví dụ như:

Đây là đoạn CSS mình làm mẫu nếu bạn biết thì có thể style lại cho live counter của mình phù hợp với theme mà bạn đang dùng.

Giờ chúng ta sẽ làm hiệu ứng đếm với jQuery:

Giá trị sẽ tăng sau mổi 0.05 giây, bạn có thể thay giá trị này cho phù hợp với site của mình.Đây là một hướng dẫn đơn giản nên nếu bạn muốn những live counter phức tạp hơn có thể tham khảo trên google. Chúc các bạn thành công với hướng dẩn này ! Bạn có thể xem qua demo ở đây và có thể view source nhé ! Demo live counter

5 lý do nên dùng Twitter Bootstrap cho dự án Web

5 ly do de dung twitter bootstrap

Twitter Bootstrap ngày càng được sử dụng nhiều bạn có thể dạo 1 vòng những website hoặc blogger khác có thể thấy giao diện sử dụng bootstrap rất nhiều.Bạn có thể nhanh chóng tạo 1 giao diện web bằng cách sử dụng các component của bootstrap, giúp bạn tranh việc lặp đi lặp lại quá trình tạo ra các class CSS và những đoạn mã HTML giống nhau.

Nếu bạn mới biết đến HTML và CSS thì có thể gặp 1 ít khó khăn vì với bạn có thể Bootstrap khó điều khiển và sử dụng.

Những tính năng nổi bật của Twitter Bootstrap:

  • Grid System
  • Responsive
  • Component
  • Typography
  • Tích hợp Jquery và Javascript
  • Khả năng tương thích với trình duyệt

Những tính năng có thể ngày xưa phải mất rất nhiều thời gian để viết thì bây giờ đã được tích hợp sẳn.Trong nội dung bài viết này mình chỉ nói đến những phần tích cực,lợi ích của việc sử dụng Bootstrap để các bạn có cái nhìn mới về quá trình phát triển web cũng như có thể áp dụng cho những dự án sau này của bạn.

1- Phát triển ứng dụng web nhanh chóng

Nếu cần phát triển nhanh một website hoặc ứng dụng web trong vòng 1 tuần và có một ngân sách eo hệp thì bạn nên chọn Bootstrap ! Bạn có thể lấy một mẩu web phù hợp với bạn và chỉ cần thêm thắt 1 số màu sắc,hình ảnh, video,.. trang trí lại thì dã hoàn thành rồi.Nếu không sử dụng Bootstrap thì có thể kết quả sau 1 tuần sẽ rất tệ hại và sẽ gặp nhiều vấn đề.Nhưng với Bootstrap thì khác, được viết bởi những người thông minh và tài năng trên khắp hành tình.Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn có thể tin tưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại nên giúp cho dự án của bạn tiết kiệm được thời gian và tiền bạc.

2 – Nền tảng dễ sử dụng

Twitter Bootstrap chỉ gồm CSS và JS nên bạn không cần phải tìm hiểu gì mới, chỉ cần bạn chịu khó ngồi đọc những tài liệu được viết chi tiết cho người dùng.Một số trường hợp thì có thể phức tạp một chút nếu bạn sử dụng phiên bản Sass hoặc Less,hoặc sử dụng Bootstrap cho .NET như này, hoặc sử dung như plugin của WordPress.

3 – Giao diện sang trọng và đầy đủ

Với giao diện màu xám bạc rất sang trọng,hổ trợ gần như đầy đủ những thành phần cần thiết mà một website hiện đại cần.Cấu trúc HTML rõ ràng giúp bạn có thể nhanh chóng nắm bắt được cách sử dụng của Bootstrap.Tuy cấu trúc của Bootstrap không phải là tốt nhất nhưng giúp nắm bắt dễ dàng và nhanh chóng.Nếu bạn cảm thấy những thành phần trong Bootstrap có thể thừa thải thì ban có thể vào mã nguồn của Bootstrap để chỉnh sửa theo ý mình

4 – Responsive

Một website được gọi là responsive có nghĩa là khi bạn vào bằng những thiết bị có kích thước màn hình khác nhau  và website có khả năng thay đổi giao diện phù hợp với kích thước màn hình đó mà không cần load lại trang.

Do có sử dụng Grid System nên Bootstrap mặc định hổ trợ Responsive.Và Bootstrap được viết theo xu hướng Mobile first tức là ưu tiêng giao diện trên Mobile trước nên nếu sử dụng Bootstrap website của bạn sẽ phù hợp với tất cả kích thước màn hình.

5 – Dễ dàng tùy biến

Để phù hợp cho nhiều loại website thì đội ngũ phát triển Bootstrap đã làm thêm 1 tính năng trên website của họ là Customizer.Bạn có thể thay đổi gần như tất cả những thuộc tính của Bootstrap để phù hợp với project của bạn hơn.Nếu những tùy chỉnh này không đủ với bạn, bạn có thể chỉnh sửa trực tiếp trên mã nguồn của Bootstrap

twitter_customizer

Bạn có thể tham khảo thêm những thông tin về Bootstrap tại đây

Mỗi thứ trên đời này chỉ hữu ích ở một mức độ nào đó và Bootstrap không phải là công cự tốt nhất cho mọi loại web nên việc sử dụng nó hay không là tùy thuộc vào quyết định của người lập trình viên.

Trong bài viết sắp tới mình sẽ viết Những lý do bạn không nên sử dụng Twitter Bootstrap trong dự án của mình.Mình mong các bạn có thể góp ý cho mình, vì bài viết nghĩ gì viết đó nên đôi chổ chưa phù hợp, hoặc bạn có lý do nào khác có thể đóng góp để bài viết hoàn chỉnh hơn.

HTML Basic

Tiếp tục bài viết trước hôm nay chúng ta sẽ tìm hiểu về các thẻ cơ bản của HTML.Đây là những thẻ chúng ta gặp thường xuyên nhất khi muốn thiết kế 1 giao diện bằng HTML.

HTML Headings

Heading nói nôm na nó giống như đề mục trong word ở đây ta có tất cả là 6 heading là h1,h2,h3,h4,h5 và h6.Như  dòng HTML Headings  phía trên là mình dùng h2. Continue reading “HTML Basic”