Gibberish

Archive for the ‘Computer Graphic’ Category

Fresh and cool CSS techniques stored!

4 Uber Cool Css Techniques For Links
50+ Awesome CSS3 Techniques for Better Designs

Silence is golden artworks

I create it to test my skill of coloring and arranging objects in a picture. It looks good, and give me some good feelings.

The first one is the simpler work, the second, I added some lighting effects and curves under the text to make it more glamourous.

PS

Silence is golden typo ver 1

PS

Silence is golden typo ver 2

Newest concept: Colorful heart.

30' artwork

@Sweet: Later the PSD file.

Tut: Blend màu tập trung

Không biết kĩ thuật này tên gọi của dân trong ngành gọi là gì, nhưng thôi tên gì cũng được miễn là hiểu.

Blend màu tập trung là cho tất cả những màu của phông nền về trắng đen, chỉ duy nhất chủ thể có màu thôi, có thể xem ví dụ sau để hiểu về kiểu blend màu này:

Dutoone

Blend màu tập trung

Như chúng ta có thể dễ dàng thấy, nền lan can phía sau và nền gạch đã được đưa về trắng đen, chỉ có cái bình vòi sen và lá trầu bà còn là màu xanh. Tác dụng của kiểu blend màu này là để nhấn mạnh vào cái mà người blend muốn nhấn, cụ thể trong bức hình trên là cái bình và cái cây.

Blend kiểu này có dễ không? Rất dễ với PS. Thực ra có hai cách để có ảnh dạng này, một là chức năng có sẵn trong máy ảnh, hai là phải động đến PS. Ta sẽ nói chức năng trong máy ảnh trước.

Trong máy ảnh có chức năng chụp Color Accent, chức năng này cho phép chụp toàn bộ bức ảnh màu trắng đen, chỉ hiển thị đúng một loại màu mà chúng ta chọn. Ví dụ tôi chọn màu đỏ là màu được hiển thị (tùy dòng máy, vd G10 thì chỉ khung chọn vào vùng có màu đỏ rồi nhấn nút Disp) thì khi chụp, tất cả tấm hình sẽ có màu trắng đen, chỉ có những vật có màu đỏ mới hiển thị, vậy nếu chọn màu đỏ trong chế độ Color Accent, thì ta sẽ có một bức ảnh bao gồm màu: trắng, đen, đỏ. Cách này khá đơn giản với những vùng màu đồng nhất và phông nền không quá phức tạp. Từ đó có thể suy ra nhược điểm: đó là chỉ chọn được một màu để nhấn mạnh, và nếu hình ảnh quá phức tạp (ví dụ, có quá nhiều vùng màu đỏ nằm rải rác trong tấm ảnh) thì chụp thế rất mất công sửa.

Trong PS thì đơn giản hơn, ta chỉ cần chụp một tấm full màu.

Trình tự như sau:

Mở hình bằng PS, duplicate layer lên, cho layer phía trên thành màu trắng đen bằng cách nhấn Ctrl+Shift+U.

Dùng Eraser Tool (E) thực thi trên tấm trắng đen: xóa hết những phần trắng đen của chủ thể, như vậy nó sẽ hiện ra phần màu của layer ở dưới.

Xong!

Note: Lưu ý đây là technique về chụp ảnh (photography) chứ không phải là blend màu thực sự, gọi là blend cho nó ngắn gọn thôi.

Understanding of text-shadow in CSS

CSS give us a cool way to make text more “pop” in the browser rather than pure HTML.

A syntax of a text-shadow is:

text-shadow: 2px 2px 2px #000

In this line, I’ll explain the syntax of the code.

There are three “2px” and a color name after the colon.

The 1st “2px” means the shadow is located on the right of the text and the distance is 2px. If you want to move it to the left, try out “-2px”

Example of 2px and -2px:

1st 2px 1st -2px

The color of the text is maroon, the shadow is black, you can see the exact position of the shadow when I use different parameters.

The following “2px” means nearly the same as the 1st one, but vertically instead of horizontally. It means when you use 2px, the shadow will be laid 2px lower from the main text, the distance will be 2px. If you want to make the shadow go up, just use the sign “-“: “-2px” and the shadow will jump up. This is quite easy to try so I pause the example.

The last “2px” mean the “blur level” of the text, this is hard to explain: the blur radial, so try yourselves. I just give a notive that if you leave it 0px, the shadow will be look exacly the same form as the main text.

The final attribute: color. Easy to understand, it’s the color of the shadow, not like Photoshop (which the color can be adjust the opacity, blending mode …), color of shadow in CSS is only normal as blend mode and 100% as opacity.

Use it wisely, you can make your post looks lively. But don’t get abused.

There’re many ways to use the text-shadow, you can find out yourselves, I just hint you that: popping, neon glow, grave text. Each style can only be used effectively of particular background, so be careful!

Some tips you should know:

-IE8 and newer version don’t support text-shadow.
-To leave a comment in your CSS code, put the comment between /* and */
-I’ll translate this post into VN since I can’t find any sites who teach Vietnamese CSS.

Tag Cloud

%d bloggers like this: