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

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

Bu yazıda sosyal medya, renkler ve tasarım ile ilgili çok ihtiyaç duyabileceğiniz şeylere bir göz atalım.

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.

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

 

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

 

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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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

 

.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;

<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

Mustafa BÜKÜLMEZ
Hazırladığım ve yüklediğim tüm dersleri deneyip çalıştığını onayladıktan sonra ekliyorum. Çalışmayan kodlar deneyimli kişiler için sorun olmayabilir ama yeni başlayanlar için problemdir. Hem yazılıma gönül vermiş sevgili arkadaşlarıma yardımcı olmak hem daha sonra lazım olduğunda arama süremi kısaltmak için paylaşıyorum.. -- *Bilgi paylaştıkça çoğalır. *Bir mum diğer mumu yakmakla ışığından bir şey kaybetmez. Aksine birlikte etrafı daha çok aydınlatırız. -- Lisede Ağ sistemleri ve Yönetimi bölümü Üniversitede de Bilgisayar Programcılığı okudum. Şuanda da Kahramanmaraş'ta olan Gemciler Güven Metal Sanayi ve Ticaret A.Ş firmasında Bilgi İşlem Müdürü olarak çalışmaktayım. Yaptığım işe ek olarak yine Kahramanmaraş'ta olan 1453 Yazılım firmasının kurucu ortaklarından biriyim. ----- Kişisel Bloğum : https://csharpiledundenbugune.blogspot.com.tr/
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git