Web ile Uğraşanlar için Sosyal Medya, Renkler ve Tasarım Hakkında Bazı Doneler

Ekim 28, 2016 Mustafa BÜKÜLMEZ 0 Yorum

Selam arkadaşlar

Valla bu ders için nasıl bir başklık yazsam diye 10 dakika düşündüm

Sonunda bu başlığı yazdım.

Web ile uğraşanlar sosyal medya konusunda renkte olsun ikonda olsun genelde sorun yaşarlar. Bende bu konuda bir nebze olsun kolaylık ve katkı sağlaması için ve takım çantasında yer alacak birşeyler hazırlamak istedim. Umarım faydasını görürsünüz.

Yukarıdaki Button, Label ve Badge leri Bootstrap'dan bilirsiniz. Bilmeyen arkadaşlarımız için yada projesinde Bootstrap kullanmayan arkadaşlarımız için css kodlarını veriyorum.

CSS

/* Buttons için */
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
}

.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: #333333;
  background-color: #ebebeb;
  border-color: #adadad;
}

.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #ffffff;
  border-color: #cccccc;
}

.btn-default .badge {
  color: #ffffff;
  background-color: #fff;
}

.btn-primary {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #428bca;
  border-color: #357ebd;
}

.btn-primary .badge {
  color: #428bca;
  background-color: #fff;
}

.btn-warning {
  color: #ffffff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #ffffff;
  background-color: #ed9c28;
  border-color: #d58512;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}

.btn-danger {
  color: #ffffff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  color: #ffffff;
  background-color: #d2322d;
  border-color: #ac2925;
}

.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}

.btn-success {
  color: #ffffff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: #ffffff;
  background-color: #47a447;
  border-color: #398439;
}

.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}

.btn-info {
  color: #ffffff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  color: #ffffff;
  background-color: #39b3d7;
  border-color: #269abc;
}

.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}

.btn-link {
  font-weight: normal;
  color: #428bca;
  cursor: pointer;
  border-radius: 0;
}

.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
  color: #2a6496;
  text-decoration: underline;
  background-color: transparent;
}

.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #999999;
  text-decoration: none;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

CSS

/* Labels için */

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
.label[href]:hover,
.label[href]:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.label:empty {
  display: none;
}

.btn .label {
  position: relative;
  top: -1px;
}

.label-default {
  background-color: #999999;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #808080;
}

.label-primary {
  background-color: #428bca;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #3071a9;
}

.label-success {
  background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}

.label-info {
  background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}

.label-warning {
  background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}

.label-danger {
  background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

CSS

/* Badges için */

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #999999;
  border-radius: 10px;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

a.badge:hover,
a.badge:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #428bca;
  background-color: #ffffff;
}

.nav-pills > li > a > .badge {
  margin-left: 3px;
}
.btn-default .badge {
  color: #ffffff;
  background-color: #fff;
}
.btn-primary .badge {
  color: #428bca;
  background-color: #fff;
}
.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}
.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}
.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}

Sosyal Medya Renk Hex ve RGB Kodları

Facebook
Hex: #3b5998
RGB: 59, 89, 152

CSS

.btn-Facebook {
    color: #ffffff;
    background-color: #3b5998;
    border-color: #3b5998;
    width: 100px;
    height: 23px;
}
.label-Facebook {
    background-color: #3b5998;
}
.badge-Facebook {
    background-color: #3b5998;
    color: #ffffff;
}

Twitter
Hex: #00aced
RGB: 0, 172, 237

CSS

.btn-Twitter {
    color: #ffffff;
    background-color: #00aced;
    border-color: #00aced;
    width: 100px;
    height: 23px;
}
.label-Twitter {
    background-color: #00aced;
}
.badge-Twitter {
    background-color: #00aced;
    color: #ffffff;
}

Google+
Hex: #dd4b39
RGB: 221, 75, 57

CSS

.btn-GooglePlus {
    color: #ffffff;
    background-color: #dd4b39;
    border-color: #dd4b39;
    width: 100px;
    height: 23px;
}
.label-GooglePlus {
    background-color: #dd4b39;
}
.badge-GooglePlus {
    background-color: #dd4b39;
    color: #ffffff;
}

YouTube
Hex: #bb0000
RGB: 187, 0, 0

CSS

.btn-YouTube {
    color: #ffffff;
    background-color: #bb0000;
    border-color: #bb0000;
    width: 100px;
    height: 23px;
}
.label-YouTube {
    background-color: #bb0000;
}
.badge-YouTube {
    background-color: #bb0000;
    color: #ffffff;
}

Linkedin Blue
Hex: #007bb6
RGB: 0, 123, 182

CSS

.btn-LinkedinBlue {
    color: #ffffff;
    background-color: #007bb6;
    border-color: #007bb6;
    width: 100px;
    height: 23px;
}
.label-LinkedinBlue {
    background-color: #007bb6;
}
.badge-LinkedinBlue {
    background-color: #007bb6;
    color: #ffffff;
}

Instagram
Hex: #517fa4
RGB: 81, 127, 164

CSS

.btn-Instagram {
    color: #ffffff;
    background-color: #517fa4;
    border-color: #517fa4;
    width: 100px;
    height: 23px;
}
.label-Instagram {
    background-color: #517fa4;
}
.badge-Instagram {
    background-color: #517fa4;
    color: #ffffff;
}

Pinterest
Hex: #cb2027
RGB: 203, 32, 39

CSS

.btn-Pinterest {
    color: #ffffff;
    background-color: #cb2027;
    border-color: #cb2027;
    width: 100px;
    height: 23px;
}
.label-Instagram {
    background-color: #cb2027;
}
.badge-Instagram {
    background-color: #cb2027;
    color: #ffffff;
}

Vine
Hex: #00bf8f
RGB: 0, 191, 143

CSS

.btn-Vine {
    color: #ffffff;
    background-color: #00bf8f;
    border-color: #00bf8f;
    width: 100px;
    height: 23px;
}
.label-Vine {
    background-color: #00bf8f;
}
.badge-Vine {
    background-color: #00bf8f;
    color: #ffffff;
}

Snapchat
Hex: #fffc00
RGB: 255, 252, 0

CSS

.btn-Snapchat {
    color: #444;
    background-color: #fffc00;
    border-color: #fffc00;
    width: 100px;
    height: 23px;
}
.label-Snapchat {
    background-color: #fffc00;
}
.badge-Snapchat {
    background-color: #fffc00;
    color: #444;
}

Quora
Hex: #a82400
RGB: 168, 36, 0

CSS

.btn-Quora {
    color: #ffffff;
    background-color: #a82400;
    border-color: #a82400;
    width: 100px;
    height: 23px;
}
.label-Quora {
    background-color: #a82400;
}
.badge-Quora {
    background-color: #a82400;
    color: #ffffff;
}

Flickr
Hex: #ff0084
RGB: 255, 0, 132

CSS

.btn-Flickr {
    color: #ffffff;
    background-color: #ff0084;
    border-color: #ff0084;
    width: 100px;
    height: 23px;
}
.label-Flickr {
    background-color: #ff0084;
}
.badge-Flickr {
    background-color: #ff0084;
    color: #ffffff;
}

Tumblr
Hex: #32506d
RGB: 50, 80, 109

CSS

.btn-Tumblr {
    color: #ffffff;
    background-color: #32506d;
    border-color: #32506d;
    width: 100px;
    height: 23px;
}
.label-Tumblr {
    background-color: #32506d;
}
.badge-Tumblr {
    background-color: #32506d;
    color: #ffffff;
}

VK
Hex: #45668e
RGB: 69, 102, 142

CSS

.btn-VK {
    color: #ffffff;
    background-color: #45668e;
    border-color: #45668e;
    width: 100px;
    height: 23px;
}
.label-VK {
    background-color: #45668e;
}
.badge-VK {
    background-color: #45668e;
    color: #ffffff;
}

Vimeo
Hex: #aad450
RGB: 170, 212, 80

CSS

.btn-Vimeo {
    color: #ffffff;
    background-color: #aad450;
    border-color: #aad450;
    width: 100px;
    height: 23px;
}
.label-Vimeo {
    background-color: #aad450;
}
.badge-Vimeo {
    background-color: #aad450;
    color: #ffffff;
}

Foursquare
Hex: #0072b1
RGB: 0, 114, 177

CSS

.btn-Foursquare {
    color: #ffffff;
    background-color: #0072b1;
    border-color: #0072b1;
    width: 100px;
    height: 23px;
}
.label-Foursquare {
    background-color: #0072b1;
}
.badge-Foursquare {
    background-color: #0072b1;
    color: #ffffff;
}

CSS dosyanıza en üstteki CSS leri ekledikten sonra istediğiniz sosyal medyayı kendi rengi ile gösterebilirsiniz. Projenize font-awesome.css dosyasını da eklediğinizde sosyal medya ikonlarında ulaşabilirsiniz. Bu şekilde img ler ile uğraşmamış olur rahat bir şekilde sosyal medya ikonlarını gösterip şekillendirebilirsiniz.

NOT: font-awesome de yer alan bütün ikonlar font olarak tutulduğu için istediğiniz kadar büyültüp küçültün görüntü bozulmayacaktır yani piksel piksel bir görüntü ile karşılaşmazsınız çünkü fontlar vektörel olarak tutulmaktadır.

font-awesome.css dosyasındaki sosyal medya ikonları için;

Markup

<i class="fa fa-facebook "></i><span>facebook</span>
<i class="fa fa-facebook-square "></i><span>facebook Kare içinde</span>
<i class="fa fa-twitter "></i><span>twitter</span>
<i class="fa fa-twitter-square "></i><span>twitter Kare içinde</span>
<i class="fa fa-google-plus "></i><span>google-plus</span>
<i class="fa fa-google-plus-square "></i><span>google-plus Kare içinde</span>
<i class="fa fa-youtube "></i><span>youtube</span>
<i class="fa fa-youtube-play "></i><span>youtube oynat</span>
<i class="fa fa-youtube-square "></i><span>youtube Kare içinde</span>
<i class="fa fa-linkedin "></i><span>linkedin</span>
<i class="fa fa-linkedin-square "></i><span>linkedin Kare içinde</span>
<i class="fa fa-instagram "></i><span>instagram</span>
<i class="fa fa-pinterest "></i><span>pinterest</span>
<i class="fa fa-pinterest-square "></i><span>pinterest Kare içinde</span>
<i class="fa fa-flickr "></i><span>flickr</span>
<i class="fa fa-tumblr "></i><span>tumblr</span>
<i class="fa fa-tumblr-square "></i><span>tumblr Kare içinde</span>
<i class="fa fa-pinterest "></i><span>pinterest</span>
<i class="fa fa-pinterest-square "></i><span>pinterest Kare içinde</span>
<i class="fa fa-vk "></i><span>vk</span>                           
<i class="fa fa-vimeo-square "></i><span>vimeo Kare içinde</span>
<i class="fa fa-foursquare "></i><span>foursquare</span>                            

<%--Bonus--%>
<i class="fa fa-turkish-lira "></i><span>TL</span>

Şöyle göstermiş olalım ;)

Biliyorsunuz ki flat tasarımlar moda oldu. Flat tasarımlar için de Flat renkler lazım. Flat renkleri içeren bir siteyi de sizlerle paylaşmak isterim. Tasarımlarınızda çok yararı olacaktır.

http://www.flatuicolorpicker.com/

Sitelerinizde Background sorunu yaşıyorsanız buyrun buradan devam edelim ;)

http://bg.siteorigin.com/

Hazır scriptler için.

http://scripti.org/

Rengi site üzerinde nasıl göründüğünü deneyimleyip ve o renk hakkında inanılmaz bilgileri, analizleri ve örnekleri bulabileceğiniz bir site

http://www.color-hex.com

Edit - 1 : Box shadow oluşturucu - http://www.cssmatic.com/box-shadow - 27.10.2016

http://sanalkurs.net/web-ile-ugrasanlar-icin-sosyal-medya-renkler-ve-tasarim-hakkinda-bazi-doneler-10285.html