Blog

Chúng ta đều biết phần mềm chỉnh sửa hình ảnh nổi tiếng đây là Photoshop không chỉ cho các nhà nhiếp ảnh mà các chuyên gia thiết kế web chuẩn SEO đều sử dụng để làm giao diện nhưng được cài đặt trực tiếp trên  máy tính, vậy khi muốn chỉnh sửa hình ảnh ngay trên trình duyệt thì làm thế nào? Câu trả lời là: ở trên website để tinh chỉnh hình ảnh trên trình duyệt mà không cần Photoshop chúng ta sẽ sử dụng Filter Image CSS.

CSS filter Property

Dây  là Property dùng để áp dụng hiệu ứng quen thuộc như làm mờ, đảo ngược, thay đổi màu sắc của một đối tượng đồ họa nào đó và được hỗ trợ trong tất cả các trình duyệt. Cú pháp đơn giản như sau:

filter: type(value);

 Ví dụ:

Mã HTML

<header>
  <h1>Simple CSS Image Filters</h1>
  <p>Hover Over an Image To View Original</p>
       <a href="http://webdesignerwall.com/tutorials/9-simple-css-image-filters" alt="webdesignerwall.com" target="_blank"><button id="fontawesome">View Tutorial</button></a>
</header>
<main role="main">
 <ul class="grid">
   <li><img class="saturate" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Saturate: <code>filter: saturate(2);</code></li>
   <li><img class="hue" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Hue Rotate: <code>filter: hue-rotate(140deg);</code></li>
   <li><img class="invert" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Invert: <code>filter: invert(.8);</code></li>
      <li><img class="greyscale" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Grayscale: <code>filter: grayscale(1);</code></li>
   <li><img class="sepia" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Sepia: <code>filter: sepia(100%);</code></li>
   <li><img class="blur" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Blur: <code>filter: blur(5px);</code></li>
    <li><img class="darken" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Brightness: <code>filter: brightness(.5);</code></li>
   <li><img class="contrast" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Contrast: <code>filter: contrast(3);</code></li>
     <li><img class="all-the-things" src="https://images.pexels.com/photos/33066/hummingbird-flying-portrait-wildlife.jpg?h=350&auto=compress"/>
     Combo: <code>filter: contrast(1.4) saturate(1.8) sepia(.6);</code></li>
  </ul>
</main>

 Mã CSS:

/* FILTERS */
.greyscale{
  filter: grayscale(1);
    -webkit-filter: grayscale(1);    
}
.sepia{
  filter: sepia(100%);
    -webkit-filter: sepia(1);
    -ms-filter: sepia(100%);    
}
.blur{
  filter: blur(5px);
   -webkit-filter: blur(5px);
   
}
.saturate{
    filter: saturate(2);
      -webkit-filter: saturate(2);
}
.hue {
    filter: hue-rotate(140deg);
      -webkit-filter: hue-rotate(140deg);
}
.invert {
    filter: invert(.8);
      -webkit-filter: invert(.8);
} 
.darken {
    filter: brightness(.5);
      -webkit-filter: brightness(.5);
}
.contrast {
    filter: contrast(2);
      -webkit-filter: contrast(2);
}

.all-the-things {
    filter: contrast(1.4) saturate(1.8) sepia(.6);
      -webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
}
button:hover{
   filter: opacity(.7);
      -webkit-filter: opacity(.7);
  text-shadow: -1px -1px 0px #000;
}
/* Remove effect on Hover */
img:hover{
  filter: none;
  -webkit-filter: none;
}

/* Demo Styling */

html{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7e2cc+0,78d3c5+29,ff5c5c+100 */
background: #a7e2cc; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #a7e2cc 0%, #78d3c5 29%, #ff5c5c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #a7e2cc 0%,#78d3c5 29%,#ff5c5c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #a7e2cc 0%,#78d3c5 29%,#ff5c5c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7e2cc', endColorstr='#ff5c5c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */




}
body{
  font-family: sans-serif;
  text-transform: uppercase;
  color: #FFF;
  text-shadow: 1px 1px 0px #333;
}
img{
  max-width: 100%;
}
a{
    color: #FFF;
    font-family: sans-serif;
    transition: all ease-in-out .3s;
        
}
a:hover{
  color: #0CF;
}
header{
    text-align: center;
    margin: 2% 0 0;
    
}
h1{
    font-size: 3.2rem;

}
button{
  background: #186f8f;
  border: 0px;
  color: #FFF;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  padding: 0 20px;
  text-transform: uppercase;
  transition: all ease-in-out .3s;
}

main{
  max-width: 960px;
  margin: 0 auto;
}
.grid{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 2% 2%;
  text-align: center;
}
.grid li{
  box-sizing: border-box;
  padding: 1rem;
  min-width: 1%;
  max-width: 420px;
}
.grid li img{
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transform: translateX(0);
  -webkit-transform: translateX(0);
}

@media screen and (max-width: 667px) {
  h1{
    font-size: 1.4rem;
  }
  header p{
    font-size: .8rem;
    text-transform: none;
  }
}
@media screen and (max-width: 480px) {
  a button{display: none;}
}

 Kết quả:

9 cách đơn giản để chỉnh sử hình ảnh trên trình duyệt.

Filter List.

Hãy nhìn vào các bộ lọc khác nhau và những gì chúng ta có thể sử dụng cho mọi trang web của mọi lĩnh vực như thiết kế website bất động sản, thiết kế web công ty, thiết kế web giới thiệu .

Blur:

Cú pháp như sau:

filter: blur( length );

Bộ lọc này được áp dụng theo kiểu hiệu ứng Gaussian blur.  Giá trị length có đơn vị là px, quyết định số điểm ảnh mà hình ảnh pha trộn với nhau, nếu để giá trị 0 nghĩa là không có filter.

.blur{
  filter: blur(5px);
   -webkit-filter: blur(5px);
}

 Brightness

Cú pháp:

filter: brightness( number or percent );

Để điều chỉnh độ sáng tối cho hình ảnh ta sử dụng brightness, đơn vị của thuộc tính này là %. Với 0% là màu đen, 1 hoặc 100% là bản gốc.

Nếu bạn muốn hình ảnh tối hình ảnh gốc hãy sử dụng cú pháp của .darken.

.darken {
    filter: brightness(.5);
    -webkit-filter: brightness(.5);
}

 Để hình ảnh nhẹ hơn.

.lighten {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}

 Contrast – độ tương phản.

filter: contrast( number or percent );

Muốn tăng độ tương phản cho hình ảnh có hai cách theo giá trị số hoặc theo tỉ lệ.

.contrast {
    filter: contrast(2);
      -webkit-filter: contrast(2);
}

 

.contrast {
    filter: contrast(50%);
      -webkit-filter: contrast(50%);
}

 Grayscale – Làm cho  màu xám hơn.

filter: grayscale( number or percent );

Các bộ lọc CSS sử dụng phổ biến nhất, màu xám đơn giản là loại bỏ màu sắc cho hình ảnh của bạn. Giá trị là tỷ lệ tương phản mà bạn muốn, định dạng thành một giá trị phần trăm hoặc decicmal, trong đó 0% hoặc 0 là không có sự thay đổi, và 1 hoặc 100% sẽ tạo ra một hình ảnh hoàn toàn màu xám.

.greyscale{
  filter: grayscale(1);
    -webkit-filter: grayscale(1);    
}

 Hue-rotate.

Cú pháp:

filter: hue-rotate( angle );

Các bộ lọc màu sắc rotate làm việc tương tự như điều chỉnh Hue/Saturation trong Photoshop. Giống như hình ảnh của bạn đặt dưới một vòng tròn tỏng suốt, angle là giá trị xác định màu xung quanh, bằng 0 là không thay đổi, 360 là độ thay đổi tối đa.

Invert – đảo ngược.

filter: invert( number or percent );

Bộ invert này sẽ có chức năng đảo  ngược đối tượng ảnh, màu đen sẽ trở thành màu trắng, mà cam trở thành màu xanh. Trong đó 0% hoặc 0 là không có sự đảo ngược, 1 -100% là từng mức độ đảo ngược ít và tạo thành một hình ảnh đảo ngược hoàn toàn.

.invert {
    filter: invert(.8);
      -webkit-filter: invert(.8);
}

 Saturate- sự bão hòa.

filter: saturate( number or percent );

Saturate sẽ làm tăng giá trị của hình ảnh kém chất lượng. Gía trị đều chạy từ 0 -100% tương tự như các bộ lọc khác.

.saturate{
    filter: saturate(1.5);
      -webkit-filter: saturate(1.5);
}

 Sepia:

.sepia{
  filter: sepia(100%);
    -webkit-filter: sepia(1);  
}

 Opacity – Tính mờ.

Opacity có thể ứng dụng phổ biến nhất trong các ngành thiết kế để pha trộn  một hình ảnh và màu nền hoặc mô hình, tạo các hiệu ứng giao diện người dùng đơn giản hoặc một yếu tố xuất hiện hoặc biến mất. Về cơ bản, opacity làm cho một yếu tố ít nhiều trong suốt hoặc mờ dần đi. Gía trị của opactiy cũng chạy từ 0 đến 100%.

button:hover{
   filter: opacity(.7);
      -webkit-filter: opacity(.7);
}

 Kết hợp các Filter lại với nhau:

Bạn có thể kết hợp nhiều bộ lọc lại với nhau để tạo ra hiệu ứng riêng của mình.

Ví dụ: Tạo ra một hiệu ứng cổ điển tinh tế.

 

.all-the-things {
    filter: contrast(1.4) saturate(1.8) sepia(.6);
      -webkit-filter: contrast(1.4) saturate(1.8) sepia(.6);
}

 Image Filters on Hover – Lọc hình ảnh khi Hover.

Để thêm một  bộ lọc lúc di chuột:

.grid li img{
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
  transform: translateX(0);
   -webkit-transform: translateX(0);
}

Sử dụng transform để ngăn các hình ảnh từ jittering hoặc chuyển khi hiệu ứng được áp dụng.

.grid li img:hover {
    filter: brightness(.5);
    -webkit-filter: brightness(.5);
}

Muốn loại bỏ một bộ  lọc – filter thì chỉ cần để giá trị mặc định là none.

img:hover{
  filter: none;
  -webkit-filter: none;
}

Với các cách điều chỉnh hình ảnh bằng filter CSS trên, thiết kế web OTVINA hi vọng sẽ giúp bạn có một mẫu giao diện đẹp với những hình ảnh hấp dẫn.

Cảm ơn và trân trọng.