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.

 

/* ------------------------------------------------------------------------------------------------------------- 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