Sexy CSS3 Buttons

by tarabaskara on Apr 06, 2011 | 3 Comments
sexy_button

Creating buttons using a CSS3-based method becomes easier. I read a great tutorial at ZURB who made super awesome CSS3 buttons. I have taken their example and tweaked a bit to make this tutorial.

The Button
This is the main structure of my button set. It made by a border, border-radius, box-shadow, and text-shadow. Here’s the CSS code:

[CC lang="CSS"]
.button{
position: relative;
padding: 6px 8px;
color: #FFFFFF;
font-family: Helvetica;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.3);
cursor: pointer
}
[/CC]

 

The Sizes
After we made the .button class, we can setup some instances of size. In this tutorial I have set the classes .small, .medium, and .large.

[CC lang="CSS"]
.large{
padding: 8px 14px;
font-size: 24px;
}
.medium{
font-size: 18px;
}
.small{
font-size: 12px;
}
[/CC]

 

The Colors
The final step is to add some colors.
[CC lang="CSS"]
.red{
background: -webkit-gradient(linear, left top, left bottom, from(#FF0012), to(#E50010));
background: -moz-linear-gradient(top, #FF0012, #E50010);
}
.red:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#E50010), to(#BC000D));
background: -moz-linear-gradient(top, #E50010, #BC000D);
}
[/CC]

 

And there you have it. A sexy button using CSS3-based method. You can download the final coded example here.

Back to top

Adobe Photoshop Tutorial – Bleach Bypass

by tarabaskara on Feb 25, 2011 | 0 Comment
Bleach Bypass

Have you ever seen Se7en, Saving Private Ryan, or Batman Begins? Do you know the similarity of these films? Maybe not everyone knows that these three films using the same technique commonly called Bleach bypass. From wikipedia Bleach bypass, also known as skip bleach or silver retention, is an optical effect which entails either the partial or complete skipping of the bleaching function during the processing of a color film.

By doing this, the silver is retained in the emulsion along with the color dyes. The result is a black and white image over a color image. The images usually would have reduced saturation and exposure latitude, along with increased contrast and graininess. It usually is used to maximal effect in conjunction with a one-stop underexposure.

Here is quick tutorial for achieving a Bleach bypass technique in Photoshop:

1. Open your image in Photoshop

2. Duplicate layer

Then, give name to this new layer with anything you want

3. Set blending mode of your duplicate layer to “overlay” to preserves the highlights and shadows of the base color

4. Now, we are going to desaturate image a little bit by using Hue and Saturation

Use this adjustment layer to desaturate. Mine is -55.

5. Our image seems pretty dark, and needs brightness. So, we are going to enlighten the image with Curves.

Here’s what my slider looks like

6. Here’s my final image


Back to top