Biraz bilgi

Photoshop’ta aşağıda Şekil 1-a’da gördüğümüz butonu CSS ile nasıl yapacağımıza bakalım.

Şekil 1-a

Gördüğünüz gibi zeminde bir desenimiz ve üstünde de opasitesi düşürülmüş degrademiz var.

öncelike buton için HTML tarafında alanımızı açalım:

[html]<a href="#" class="but">Buton</a>[/html]

Öncelikle butonun stilini ayarlayalım:
.but {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 5px;
position: relative;
overflow: hidden;
color: #fff;
float: left;
background-image: url(/images/back.png);
}

Degrade eklemek için internet üzerinde sitelerden faydalanabilirsiniz. Degrade oluşturmak için şu linkten
http://www.colorzilla.com/gradient-editor/
faydalandım.
Buton üzerine degrademizi aşağıdaki stil ile ekliyoruz.

.but:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(252,252,252,0.2) 1%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(252,252,252,0.2) 1%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(252,252,252,0.2) 1%,rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#33ffffff’, endColorstr=’#33000000′,GradientType=0 );
}

İlla “:before” kullanmanız gerekmiyor. “:after” da kullanabilirsiniz. Böylece şekil-1-a’daki butonumuzu elde etmiş olduk.

İngilizce isteyenler için:

Creating transparent gradients over background image with CSS.

We want to create button like this:

1. Create a button:

[html]<a href="#" class="but">Buton</a>[/html]

2. Add style for button:

.but {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 5px;
position: relative;
overflow: hidden;
color: #fff;
float: left;
background-image: url(/images/back.png);
}

Background image is ready with this class

3. Add gradient overlay:

You can use sites for create gradients. I used:
http://www.colorzilla.com/gradient-editor/

for gradient overlay we will use css pseudo element. You can use “:before” or “:after”
and the final style is:

.but:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(252,252,252,0.2) 1%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(252,252,252,0.2) 1%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(252,252,252,0.2) 1%,rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#33ffffff’, endColorstr=’#33000000′,GradientType=0 );
}

Our button is ready for use.