İlginizi Çekebilir
HTML Tooltip Örnekleri
16 Ağustos 2022
HTML Tooltip Örnekleri – 3 Adet Örnek
  1. Ana Sayfa
  2. CSS

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

Mustafa BÜKÜLMEZ tarafından
10 Ocak 2018 06 Cum, 2020 9:49 tarihinde düzenlendi 877 kez okundu Okuma süresi: 12dk, 11sn
Web Site Tasarımcısı Mısınız? O Zaman Bu Yazıyı Kesin Görmeniz Lazım!
+ - 0

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… :D 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! :D

/* 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. ;)

Bu yazıya tepkiniz ne oldu?

Benzer Yazılar

CSS İle Ögeleri Pasif Yapmak
21 Ağustos 2022 525

CSS İle Ögeleri Pasif Yapmak

Merhaba, bu yazımda CSS İle Ögeleri Pasif Yapmak konusunda bakacağız.  Sitemizde herhangi bir input olsun, link olsun , button olsun fare ile tıklanmasını engellemek için…

Mustafa BÜKÜLMEZ
Devamını Oku
CSS Hover ile Nesneleri Büyütmek ve Küçültmek
29 Temmuz 2022 428

CSS Hover ile Nesneleri Büyütmek ve Küçültmek

Merhaba, bu yazımda CSS Hover ile Nesneleri Büyütmek ve Küçültmek konusunda değineceğiz. Bir kaç farklı büyüme şekli ile bu yazıyı bitireceğiz. Yaptığım bir çok sitede işime…

Mustafa BÜKÜLMEZ
Devamını Oku
HTML Tooltip Örnekleri
16 Ağustos 2022 228

HTML Tooltip Örnekleri – 3 Adet Örnek

Merhaba, bu yazımda HTML Tooltip Örnekleri konusuna bakacağız. Burada HTML'in varsayılan tooltipleri değil kendi yaptıklarımız olacak. HTML Tooltip Örnekleri Fazla açıklama yapmaya gerek duymadan…

Mustafa BÜKÜLMEZ
Devamını Oku
Wordpress-Child-Theme-Nedir-Nasıl-Yapılır-3
8 Şubat 2024 97

Wordpress Child Theme Nedir Nasıl Yapılır?

Merhabalar, bu yazımda Wordpress Child Theme Nedir Nasıl Yapılır? konusuna bakacağız. Türkçesi çocuk teması ama alt tema da diyebiliriz. WordPress alt teması, WordPress temanızın kodunu özelleştirmeniz…

Mustafa BÜKÜLMEZ
Devamını Oku

Yazar Hakkında

Mustafa BÜKÜLMEZ

Lise Ağ Sistemleri ve Yönetimi bölümü, üniversite Bilgisayar Programcılığı bölümü Ön Lisans, Yönetim Bilişim Sistemleri Lisans öğrenimi aldım. Askerlik görevimi tamamladım. Uzmanlık alanım; C# ve SQL Programlama dilleri ile müşteri odaklı, kullanıcı dostu ERP ve CRM gibi sistemleri geliştirmektir. Ayrıca şuanda PHP ve MYSQL alanında projeler geliştirmekteyim. C++, Phyton, Xamarin, MVC gibi konuları öğrenmek ve kendimi geliştirme çabası içerisindeyim. Discord için: https://discord.gg/FBxZeHu9

Değerli yorumlarınızı bekliyorum. :)