Web siteniz için CSS3 Facebook Butonu yapmak 0

Facebook butonlarını web sitenizde uygulayın.

https://4.bp.blogspot.com/-NGuGK2BLXm0/T0yWabTRPUI/AAAAAAAAFSo/SXeqrygZU24/s1600/CSS3_Facebook_Buttons.jpg

CSS3 Facebook Button

Style.css kodunu altta veriyorum. Alttaki linkte’de hangi kodu eklediğinizde hangi butonun çıktığının detaylı anlatımı var. Oradan inceleyerek butonları web sitenize yerleştirin. Css kodunu ekledikten sonra zaten bir tek class’ları bilmeniz gerekiyor.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
/* ------------------------------------------------------------------------------------------------------------- BUTTON */
 
.uibutton {
    position: relative;
    z-index: 1;
    overflow: visible;
    display: inline-block;
    padding: 0.3em 0.6em 0.375em;
    border: 1px solid #999;
    border-bottom-color: #888;
    margin: 0;
    text-decoration: none;
    text-align: center;
    font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    /* outline: none; */
    color: #333;
    background-color: #eee;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
    background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: linear-gradient(#f5f6f6, #e4e4e3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}
 
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
    border-color: #777 #777 #666;
}
 
.uibutton:active {
    border-color: #aaa;
    background: #ddd;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
 
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
    padding: 0;
    border: 0;
}
 
/* ............................................................................................................. Icons */
 
.uibutton.icon:before {
    content: "";
    position: relative;
    top: 1px;
    float:left;
    width: 10px;
    height: 12px;
    margin: 0 0.5em 0 0;
    background: url(fb-icons.png) 99px 99px no-repeat;
}
 
.uibutton.edit:before { background-position: 0 0; }
.uibutton.add:before { background-position: -10px 0; }
.uibutton.secure:before { background-position: -20px 0; }
.uibutton.prev:before { background-position: -30px 0; }
.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
 
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
 
/* ............................................................................................................. Large */
 
.uibutton.large {
    font-size: 13px;
}
 
/* ............................................................................................................. Submit, etc */
 
.uibutton.confirm {
    border-color: #29447e #29447e #1a356e;
    color: #fff;
    background-color: #5B74A8;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
    background-image: -moz-linear-gradient(#637bad, #5872a7);
    background-image: -o-linear-gradient(#637bad, #5872a7);
    background-image: linear-gradient(#637bad, #5872a7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
 
.uibutton.confirm:active {
    border-color: #29447E;
    background: #4F6AA3;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
 
/* ............................................................................................................. Special */
 
.uibutton.special {
    border-color: #3b6e22 #3b6e22 #2c5115;
    color: #fff;
    background-color: #69a74e;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
    background-image: -moz-linear-gradient(#75ae5c, #67a54b);
    background-image: -o-linear-gradient(#75ae5c, #67a54b);
    background-image: linear-gradient(#75ae5c, #67a54b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
}
 
.uibutton.special:active {
    border-color: #3b6e22;
    background: #609946;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
 
/* ............................................................................................................. Disable */
 
.uibutton.disable {
    z-index: 0;
    border-color: #c8c8c8;
    color: #b8b8b8;
    background: #f2f2f2;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
 
.uibutton.confirm.disable {
    color: #fff;
    border-color: #94a2bf;
    background: #adbad4;
}
 
.uibutton.special.disable {
    color: #fff;
    border-color: #9db791;
    background: #b4d3a7;
}
 
.uibutton.disable.icon:before,
.uibutton.disable.icon:after {
    opacity: 0.5;
}
 
/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
 
.uibutton-group {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}
 
.uibutton + .uibutton,
.uibutton + .uibutton-group,
.uibutton-group + .uibutton,
.uibutton-group + .uibutton-group {
    margin-left: 3px;
}
 
.uibutton-group li {
    float: left;
    padding: 0;
    margin: 0;
}
 
.uibutton-group .uibutton {
    float: left;
    margin-left: -1px;
}
 
.uibutton-group .uibutton:hover,
.uibutton-group .uibutton:focus,
.uibutton-group .uibutton:active {
    z-index:2;
}
 
.uibutton-group > .uibutton:first-child,
.uibutton-group li:first-child .uibutton {
    margin-left: 0;
}
 
/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
/* For mixing buttons and button groups, e.g., in a navigation bar */
 
.uibutton-toolbar {
    padding: 6px;
    border-top: 1px solid #ccc;
    background: #f2f2f2;
}
 
.uibutton-toolbar .uibutton,
.uibutton-toolbar .uibutton-group {
    vertical-align: bottom;
}

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Esnek Genişlikli Tablolar (Responsive) 0

Esnek Genişlikli tablolar her zaman istediğimiz bir özelliktir yada aradığımız özelliktir. Artık cep telefonları, tabletler populer olmaya başladı yeni web site tasarımları olsun, web uygulamalarınız olsun hem tablete hemde telefona uyumlu olması lazım. Bu yüzden bu tarz esnek tasarımları iyi kullanmanızı öneririm.

https://3.bp.blogspot.com/--Hjc9zd2hYU/USvhh0amq6I/AAAAAAAAQKY/syOCQFZbK0I/s1600/esnek-genislik-tablolar.jpg

Demo: Esnek Genişlikli Tablo (Mobil Tablo)

Better Responsive Data Tables

Farklı farklı tablo örnekleri var yani neden yapıldığına dair örnek resimlerde var gerçi benim yazımdan anlamış olmanız gerekiyor 🙂

Demo: http://www.greepit.com/Better-Responsive-Table/ResponsiveTable.html

Download: http://www.greepit.com/Better-Responsive-Table/ResponsiveTable.zip

Ücretsiz olduğu için rahatlıkla indirip kullanabilirsiniz.

Kaynak: Better Responsive Data Tables

7 Farklı Online Html/Css/jQuery Editör Uygulaması 0

Merhaba arkadaşlar. Sizler için internet üzerinde online olarak kullanabileceğimiz editörleri listeledim. Başlıkta jQuery yerine javascript yazmalıydım ama ben jquery yazmayı tercih ettim bilginize sonra bakın cahile demeyin 🙂

https://3.bp.blogspot.com/-zPXNPKhilhs/USEq-498D1I/AAAAAAAAQGg/-CIjnfMtHew/s1600/online-jquery-html-css-editor.png

JSFiddle

jQuery, Yui, Motools gibi bir çok kütüphane ekli hangi kütüphane ile çalışacaksanız seçmeniz yeterli. HTML / Javacript / Css kodları girebileceğiniz online editör sitesi. Ayrıca yaptıklarınızı çalıştırıp sonuçlarını görebilir sitenizede ekleyebilirsiniz.

https://3.bp.blogspot.com/-fZaWwz4AzSE/USErNPFsnrI/AAAAAAAAQGo/UQuLRjJMzuw/s1600/JSFiddle.png

CodePen

Buda JSFiddle ile aynı işi gören ancak ana sayfasında bazı populer tasarımları kodlamaları paylaşıyor.

https://2.bp.blogspot.com/-kyMBFPdGmXw/USEsHJAK30I/AAAAAAAAQGw/MbjXStzbPTI/s1600/codepen.png

CSS Deck

Tasarım olarak biraz daha iyi olan bir site editörlerin makalelerini ana sayfada görebiliyorsunuz.  Sol kısımdan “New” butonuna basarak kodlamaya başlayabilirsiniz.

https://3.bp.blogspot.com/-33csgml9FLQ/USEseYPtjxI/AAAAAAAAQG4/fRZfCd8TybI/s1600/css-deck.png

JS Bin

Farklı bir online uygulama daha ancak bunun diğerlerine göre farklı hem sade olması hemde consol olmasıdır. Javascript kodlarınızın çalışıp çalışmadığınızı hatalardan anlayabilirsiniz.

https://4.bp.blogspot.com/-emU2lyCigcw/USEudCHQTkI/AAAAAAAAQHA/74NY--8Rl3Y/s1600/js-bin.png

Dabblet

Biraz daha esnek kod üzerine geldiğinizde rengini vs. gösteriyor gene aynı tarz bir uygulama.

https://2.bp.blogspot.com/-1SBLkPtqJi8/USEuib8PLRI/AAAAAAAAQHI/SdAqPRFtKs0/s1600/dabbet.png

Tinkerbin

Tasarım olarak en güzeli bu tabi bu benim görüşüm sizinki diğerlerinden biri olabilir gene aynı işi yapan bir uygulama.

https://3.bp.blogspot.com/-Gcax9qBO29U/USEunvKRBoI/AAAAAAAAQHQ/38TjkcMKPlw/s1600/online-editor-uygulamasi-rooteto+(7).png

Liveweave

Bundada kütüphaneler yüklü ve yüklü kütüphaneyi ekleyerek çalışma yapabiliyorsunuz. Kodlama yapınızı dikey değilde yatay bir şekilde yapabiliyorsunuz.

https://4.bp.blogspot.com/-RoXHlktzmh0/USEusbIkSCI/AAAAAAAAQHY/YMk2r4k90m4/s1600/online-editor-uygulamasi-rooteto+(6).png

Most Popular Topics

Editor Picks