Web Site Tasarımcısı Mısınız? O Zaman Bu Yazıyı Kesin Görmeniz Lazım!

Web Site Tasarımcısı Mısınız? O Zaman Bu Yazıyı Kesin Görmeniz Lazım!

10 Ocak 2018 0 Yazar: Mustafa BÜKÜLMEZ
Toplam Görüntülenme : 544
Yaklaşık okuma süresi : 14 DK
Web Site Tasarımcısı Mısınız? O Zaman Bu Yazıyı Kesin Görmeniz Lazım!
5 (100%) 4 Oy

Web Site Tasarımcısı Mısınız? O Zaman Bu Yazıyı Kesin Görmeniz Lazım! Evet! Bu yazı tamamen web tasarımcıları için hazırlanıştır. Her web tasarımcısının alet çantasında olması gereken ve web tasarımcıların bilmesi gerekenler bazı şeylere bu yazıda değinmek istedim.

HTML kategorisine ait diğer yazılarım için tıklayınız.

CSS kategorisine ait diğer yazılarım için tıklayınız.

Web tasarımcılarının genel sorunlarından birisidir Sosyal Medya ikonları.. Aynı türde tüm ikonları bulmak yada renkleri doğru olanları bulmak. Bu konu hep sıkıntı olmuştur. Şimdi sizlere, popüler sosyal medya ikonlarını ve logolarının renk kodlarını vereceğim. Öyle ki bu ikonlar bir “image” dosyası değil vektör dosyasıdır. Yani istediğiniz kadar büyütün küçültün ikonlar piksel piksel olmayacaktır. Web tasarım araçlarınıza bunları kaydetmeyi unutmayın. 😉

Sosyal Medya Renk Hex ve RGB Kodları

web tasarımcıları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;
}

 

web tasarımcılar forumTwitter
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;
}

web tasarımcıların bilmesi gerekenlerGoogle+
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;
}

 

web tasarımcılarYouTube
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;
}

 

web tasarım araçları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;
}

web tasarım aşamaları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;
}

 

web tasarım bölümü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;
}

 

web tasarımcıları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;
}

 

web tasarımcılar forumSnapchat
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;
}

 

web tasarımcıların bilmesi gerekenlerQuora
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;
}

 

web tasarımcılarFlickr
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;
}

 

web tasarım araçları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;
}

 

web tasarım aşamaları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;
}

 

web tasarım bölümü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;
}

 

web tasarımcıları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 bu kodları ekledikten sonra projenize font-awesome font dosyasını da ekleyin. Logoları oradan alacağız. Font diyoruz ama aslında gerçek bir font değil. Vektörel logolar dosyası desek daha doğru olur çünkü bu dosyada sadece sosyal medya logoları değil envai çeşit ikon bulunmaktadır. Bu sayede sosyal medya ikonlarını bulmakla yada tek dosyada hepsini içeren img dosyalarında pikseller ile uğraşmayacağız. Şimdi de size font-awesome.css dosyasındaki sosyal medya ikonlarını göstermenizi sağlayacak kodları veriyorum.

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

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

Nasıl göründüklerinin ekran görüntüsünü de şuraya bırakayım.

web tasarımcılar forum

 

Buraya kadar ki konumuz sosyal medya ile ilgiliydi. Sıra geldi diğer konulara…


Flat Tasarımlar İçin Renkler

Son zamanlarda flat tasarımlar moda oldu. Herşeye ütü basılmış gibi… 😀 Tabi sadece tasarımlar ütülenmedi, flat tasarımlar için daha soğuk ve mat renkler de ortaya çıktı. Peki her rengin soğuk ve mat halini nereden bulacaksınız?. Telaşa gerek yok.. Bu iş açılmış bir site vereceğim size. Bu sitede her renk için flat tonlar bulunmaktadır.

Sitemizin URL’si : http://www.flatuicolorpicker.com/

Şöyle de bir ekran görüntüsü bırakayım..

 


Backgraound Generator

Evet!. Devam edelim.. Sırada sitelerimiz için güzel bg’ler oluşturabileceğimiz bir siteyi de vereyim.

Site URL’si: http://bg.siteorigin.com/

Siteye giriyorsunuz, sol taraftaki menüyü kullanarak istediğiniz renk ve desende bg’nizi oluşturuyorsunuz. Size küçük bir img dosyası veriyor. Bu img dosyasını da background-image olarak ve repeat olarak veriyorsunuz. İşte bu kadar.


Hazır Script

Ya bana hazır scriptler de lazım oluyor diyorsanız bu site tam size göre…

Site URL’si: http://scripti.org/


Flat Tasarımlar İçin Renkler

Flat renkleri anında site üzerinde deneyip, renk hakkında inanılmaz bilgileri görmek istiyorsanız bu site de tam size göre.

Site URL’si: http://www.color-hex.com

 


Web sitesi yaparken div’e gölge vereyim gibi şeyler diyorsanız ozaman bu siteyi mutlaka deneyin. 😉

Tabi bu sitedeki tek şey gölge oluşturmak değil… 😉

Site URL’si: https://www.cssmatic.com/box-shadow


Bootstrap Button ve Label

Bootstrap ile uğraşanlar hazır butonları bilirler. Ya dostum beni beni uğraştırma sadece butonlar labeller var mı diyorsanız ozaman buyrunnn! 😀

/* 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;
}
<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>
.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;
}
<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

 

Evet dostlar şimdilik bu kadar elime böyle doneler geçtikçe bu yazımı da güncellerim. Her web tasarımcılar forumlarında böyle şeyleri bir arada bulamazsınız. 🙂

HTML kategorisine ait diğer yazılarım için tıklayınız.

CSS kategorisine ait diğer yazılarım için tıklayınız.


Zamanla sağlam bir makale olur. Sağlıcakla ve takipte kalın. 😉