Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Desaturate với SVG và CSS.

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi rebel123, 21/12/14.

Lượt xem: 6,440

  1. rebel123 Thành viên cấp 1

    Nghe tiêu đề có vẻ lạ tai quá phải không các bạn!.
    Đối với các bạn nào thành thạo về photoshop, thì thuật ngữ "desaturate" là một từ chuyên môn rất quen thuộc. "Desaturate" là một lệnh trong photoshop dùng để thực thi chuyển ảnh màu thành ảnh đen trắng chỉ với một cú click chuột. Vậy "desaturate" thì có liên quan gì với ngôn ngữ lập trình web.!?.Vậy mà có đấy các bạn! Ngôn ngữ lập trình web cũng làm được chuyện đó, nhưng không phải bằng một cú click chuột, mà bằng ngôn ngữ SVG.

    Xem demo nguồn: ( *Do code trang demo nguồn nầy khai báo bộ lọc chỉ đáp ứng được trên IE, nên các bạn chỉ xem được trên trình duyệt IE và firefox. )
    http://www.boogdesign.com/examples/svg/desaturate.html

    Nếu bạn muốn xem được trên chrome, Safari và Opera, thì xem tại đây, mình đã fix lại :
    http://mienkyuc.byethost7.com/code/Desaturate-with-SVG-and-CSS/desaturate.htm

    Screenshot demo: 30MBscE.png
    Xem demo, các bạn sẽ thấy hình con hổ được trình duyệt hiển thị là 1 ảnh đen trắng.Nhưng nếu các bạn bấm chuột phải lên ảnh và chọn xem hình, các bạn sẽ thấy, ảnh con hổ thực chất là 1 ảnh màu chứ không phải là ảnh đen trắng như ta nhìn thấy trên trình duyệt ( hiển nhiên rồi, vì ảnh gốc là ảnh màu mừ! ).

    Đây là ảnh gốc:
    [​IMG]

    SVG (Scalable Vector Graphics) thật tuyệt diệu phải không các bạn. SVG còn mần được nhiều điều tuyệt diệu hơn thế nữa đó các bạn.Các bạn có thể tham khảo SVG tại đây: http://vi.wikipedia.org/wiki/SVG

    Download source code:
    http://www.mediafire.com/download/yexmq7rij5a189v/Desaturate-with-SVG-and-CSS.zip
    P/s: Đúng ra các bạn có thể download source code trực tiếp từ trang demo, nhưng vì SVG trên trang demo là ngoại tuyến, bạn nào không rành về thủ thuật internet sẽ rất khó down file resources. svg của nó để ngâm kíu. Mình đã nhúng SVG vào trang html cho các bạn thuận tiện ngâm kíu source code.
    Nguồn: boogdesign.com​

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    rebel123, 21/12/14
    #1
    Phạm Hữu Dư thích bài viết này
  2. banbaonylong

    banbaonylong Ko phải assmin

    CSS3 là ngôn ngữ định dạng cấu trúc trang chứ ko fải ngôn ngữ lập trình
    banbaonylong, 21/12/14
    #2
    rebel123 thích bài viết này
  3. Texture_SSK

    Texture_SSK Thành viên cấp 2

    Thực ra thì chỉ cần CSS đã đủ để chuyển về đen trắng rồi
    Texture_SSK, 21/12/14
    #3
    Nguyễn Tất Thắng và rebel123 thích bài viết này.
  4. rebel123

    rebel123 Thành viên cấp 1

    banbaonylong
    Cám ơn bạn đã góp ý!
    Theo mình nghĩ, html, CSS, Javascript, PHP.v.v...là những phần nhỏ nằm trong lĩnh vực ngôn ngữ lập trình web, và cách gọi của mình là cách gọi chung. Cách gọi của bạn đúng, nhưng là cách gọi chuyên sâu theo từng chức năng của từng ngôn ngữ.
    Xem: http://hoangnguyen.edu.vn/kien-thuc...7-mot-so-ngon-ngu-lap-trinh-web-pho-bien.html

    Trong bài đăng nầy thì mình có suy nghĩ, không thể gọi theo cách riêng như bạn được vì là ngôn ngữ kết hợp html, svg và css...chứ không riêng biệt loại nào cả.Nếu mình đăng là: "...Vậy "desaturate" thì có liên quan gì với ngôn ngữ định dạng cấu trúc trang.!?.Vậy mà có đấy các bạn! Ngôn ngữ định dạng cấu trúc trang cũng làm được chuyện đó...", mình thấy nó thế nào ấy!

    Thực ra mình chỉ là dân amatuer về web, chỉ học hỏi chắp vá trên mạng nên còn nhiều hạn chế.Nếu suy nghĩ của mình còn thiếu sót chỗ nào mong bạn góp ý thêm.Mình rất trân trọng và hoan nghênh những góp ý của bạn.

    Texture_SSK
    Bạn có thể cho mình một thí dụ để mình được học hỏi thêm không!?.Rất mong được học hỏi thêm từ các bạn.
    Chỉnh sửa lần cuối: 21/12/14
    rebel123, 21/12/14
    #4
  5. Texture_SSK

    Texture_SSK Thành viên cấp 2

    Texture_SSK, 21/12/14
    #5
    rebel123 thích bài viết này
  6. banbaonylong

    banbaonylong Ko phải assmin

    HTML, CSS là thiết kế web
    Javascript là lập trình front-end
    PHP v.v... là lập trình back-end

    bạn nên nhìn rõ demo bạn: cái bạn bảo sửa chính là xài CSS như Texture_SSK dẫn link. Cái đó chả có tí gì gọi là "lâp trình" cả.
    banbaonylong, 22/12/14
    #6
    rebel123 thích bài viết này
  7. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    chèn cái này vào attribute ảnh là thành đen trắng nè :D
    -webkit-filter: grayscale(1);
    Nguyễn Tất Thắng, 22/12/14
    #7
    rebel123 thích bài viết này
  8. rebel123

    rebel123 Thành viên cấp 1

    Texture_SSK
    Quá tuyệt!. Hiệu ứng "Hue-rotate and Animate" thật đẹp!. Nhờ bạn mà mình lĩnh hội thêm được kiến thức về css. Rất cảm ơn bạn.
    rebel123, 22/12/14
    #8
  9. rebel123

    rebel123 Thành viên cấp 1

    banbaonylong
    Cám ơn bạn đã chỉ thêm. Trước giờ, do tìm tòi trên mạng nên mình còn mập mờ về cách gọi thế nào cho đúng. Nhờ bạn chỉ ra, giờ mình mới tường tận về cách gọi. Cám ơn bạn góp ý.
    rebel123, 22/12/14
    #9
Từ khóa:

Ủng hộ diễn đàn