Haftanın Ücretsiz Web Teması #14

Magnetic, Pixelhint tarafından hazırlanmış responsive bir web teması. Tek sütunluk yapısıyla dikkat çeken tasarım HTML5 ve CSS3 kodlarıyla hazırlanmış. Oyun, eğlence veya fotoğraf türü içerikler için kusursuz bir sunum olan Magnetic’i ücretsiz olarak indirebilirsiniz.

Karşınızda Magnetic!

Ücretsiz Web Teması #14 : Magnetic

Özellikler

1. Responsive


2. Oyun, eğlence veya fotoğraf içerikleri için birebir


3. HTML5 ve CSS3 ile hazırlanmış


4. Anasayfa ve kontak sayfası bulunuyor


5. Kolaylıkla değiştirilebilir


6. Tamamen ücretsiz

 

DEMO  DOWNLOAD

---

Kullanım & Lisanslama

Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.

---

Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.

Önümüzdeki salı, yeni web temasıyla görüşmek üzere!

Haftanın Ücretsiz Web Teması #14

Photoshop'ta kendi fırçanızı oluşturun

Photoshop ile kendi fırçanızı oluşturmanız mümkün. Peki bu bizlere nasıl bir kolaylık sağlar?

Bir fotoğraf sanatçısı olduğunuzu varsayın. Her fotoğrafınızın üzerine imza atmak pek kolay olmasa gerek. Oysa ki Photoshop ile oluşturacağınız bir watermark (filigran) fırçası sayesinde saniyeler içerisinde tüm fotoğraflarınızı imzalayabilirsiniz.

Bu dersimizde Adobe Photoshop programında kendi fırçalarımızı oluşturacağız.

Photoshop’ta fırça nasıl oluşturulur?

Photoshop fırça oluşturma işlemi gayet basit. İlk olarak fırçanızın boyutunda bir çalışma alanı açın. Bu işlem için File > New alanına gidin ya da CTRL+N kısayol tuşlarına basın. Burada arkaplan renginin beyaz olmasına dikkat edin. Bu yüzden ‘Background Contents’ alanını ‘white’ olarak bırakıyoruz.

Daha sonra yeni bir layer () oluşturun. Oluşturduğunuz yeni layera da fırçaya çevirmek istediğiniz çizimi yapın.

Son olarak çizdiğiniz layer seçiliyken Edit > Define Brush Preset alanına gidin. Photoshop fırçanız için isim belirtmenizi isteyecektir.

Bu kadar.

Kapanış

Photoshop ile fırça oluşturmak bu kadar basit. Böylece aynı nesneleri tekrar kullanmamız gerektiğinde fırça aracı bize zaman kazandıracak.

İyi çalışmalar.

Photoshop'ta kendi fırçanızı oluşturun

Haftanın İlham Kaynakları #3

Haftaya ilham kaynakları ile başlıyoruz.

29.12.2014 için ilham kaynakları

İşte bu hafta sizin için seçtiğimiz şık çalışmalar.

From up North

---

evadedave

---

Thomas Bouillot

---

SIMC

---

From up North

---

evadedave

---

From up North

---

deskriptiv

---

thehommebody

---

dontlovemadafakaaa

Kullanım & Lisanslama

Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.

Haftanın İlham Kaynakları #3

Sitenizde Kar Yağsın

Koca bir yılın daha sonuna yaklaşıyoruz. Birçok şehrimiz bu yılbaşında da kar göremeyecek olsa da web sayfalarımızda bu sorunun önüne geçiyoruz.

Bu makalemizde JavaScript desteğiyle web sayfalarımızda kar yağdırıyoruz.

ÖRNEĞİ GÖRÜNTÜLE

JavaScript ile web sayfasında nasıl kar yağdırılır

Metodun kendisi sadece JavaScript kodlarından oluşmakta. Küçük kartaneleri oluşturup belirli aralık ve büyüklüklerde, yine belirli ivmede onları ekran üzerinde gezdireceğiz.

jQuery Kodları

Öncelikle sayfanızda Sketch.js tanımlı olmalı.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0.0/sketch.min.js"></script>

Sırada JavaScript kodlarımız var.

var s = Sketch.create(autoclear: false);
var particles = [];
var maxParticles = 300;
var particleIndex = 0;

function Particle()
 this.size = random(3); /* Kartanesi büyüklüğü */
 this.x = random(s.width);
 s.fillStyle = 'white'; /* Kartanesi rengi */
 this.y = 0;
 this.vx = 2; /* Rüzgar hızı */
 this.vy = random(2,3);
 this.life = 5;
 this.maxLife = 1000;
 this.index = particleIndex;
 particles[particleIndex] = this;
 particleIndex++;


Particle.prototype.update = function()
 if(this.x >= 0 && this.x <= s.width && this.y >= 0 && this.y <= s.height && this.life <= this.maxLife)
 this.x += this.vx;
 this.y += this.vy;
 this.life++;
 else 
 this.makeNew();
 
;

Particle.prototype.draw = function()
 
 s.fillRect(this.x, this.y, this.size, this.size);
;

Particle.prototype.makeNew = function()
 delete particles[this.index];
 particles.push(new Particle());
;

for(var i=0; i<maxParticles; i++)
 setTimeout(function()
 particles.push(new Particle());
 , 40 * i);


s.draw = function()
 for(var i in particles)
 particles[i].draw();
 
;

s.update = function()
 this.clearRect(0, 0, s.width, s.height);
 for(var i in particles)
 particles[i].update();
 

Yukarıdaki kodlar içerisinde kartanelerinin büyüklüğünü, renklerini ve yoğunluğunu düzenleyebileceğiniz alanlar yorum satırlarıyla belirtilmiştir. Ek olarak rüzgar hızını da ayarlayabilirsiniz.

Bu tasarımın orjinali Nate Wiley tarafından hazırlanmıştır.

Sitenizde Kar Yağsın

Haftanın Ücretsiz Web Teması #13

Miniport, HTML5 ve CSS3 ile hazırlanmış responsive bir web teması. Minimalist yapısı ve single page özelliği ile sunumlarınız için mükemmel bir tercih.

Bu hafta HTML5up tarafından hazırlanmış Miniport temasıyla sizlerleyiz.

Ücretsiz Web Teması #12 : Eshopper

Özellikler

1. Responsive


2. Minimalist


3. HTML5 ve CSS3 ile hazırlanmış


4. Tek sayfa tasarım


5. Kolaylıkla değiştirilebilir


6. Tamamen ücretsiz

 

DEMO  DOWNLOAD

---

Kullanım & Lisanslama

Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.

---

Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.

Önümüzdeki salı, yeni web temasıyla görüşmek üzere!

Haftanın Ücretsiz Web Teması #13

Haftanın İlham Kaynakları #2

Haftaya ilham kaynakları ile başlıyoruz.

22.12.2014 için ilham kaynakları

İşte bu hafta sizin için seçtiğimiz şık çalışmalar.

Rupert Webb

---

Bilbo’s Last Song

---

fiore rosso

---

bloodandchampagne

---

Solar System Necklace

---

brunotarsia

---

Dream Rustic Homes – Hometalk

---

Set Design by Sarah Parker

---

White Stars Garland – Arts Delight

---

blackandwhite by Jim Keaton

Kullanım & Lisanslama

Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.

Haftanın İlham Kaynakları #2

Google Material Design Menu #2

Google‘ın tasarım devrimi üzerine konuşmaya devam ediyoruz. Material Design’ın günden güne web tarafına uyarlanan örnekleri bizim makalelerimizde de yerini buluyor. Daha önce buradaki makalemizde şık bir Material Design menü örneği hazırlamıştık.

Şimdi de ekranın büyük bir kısmını kaplayan, daha büyük yapıdaki bir başka menü tasarımı konu edeceğiz. HTML5, CSS3 ve jQuery desteğiyle hazırlayacağımız bu tasarım soğuk renklerden oluşuyor.

Bu makalemizde üzerine tıklandığında büyük ölçülerde açılan ve içeriği aksi yöne ittiren şık bir menü tasarımı hazırlayacağız. İkinci Material Design menü örneğiyle sizlerleyiz!

ÖRNEĞİ GÖRÜNTÜLE

Material Design Tam Ekran Menu

Tahmin edeceğiniz gibi tekniğimiz, öğeleri gizleyip, belirli aralıklarla gözükür hale getirmek üzerine kurulur. Burada işin perde kısmını CSS, fonksiyonelitesini de jQuery oluşturuyor. İskelet üzerine HTML üzerine kurulu. Arjan Jassal tarafından hazırlanmış bu örnek kolay ve hızlı navigasyonu sağlıyor. İlk olarak HTML tarafında yapımızı oluşturalım.

---

HTML Kodları

İlk olarak menüyü oluşturacak kodları hazırlayalım.

<div class="material-menu-wrapper">
 <div class="material-menu">
 <div class="material-btn">
 <div class="material-hamburger">
 <div class="material-patty"></div>
 <div class="material-patty"></div>
 <div class="material-patty"></div>
 </div>
 </div>
 <div class="material-content">
 <nav>
 <ul>
 <li><a href="">Home</a></li>
 <li><a href="">About</a></li>
 <li><a href="">Work</a></li>
 <li><a href="">Contact</a></li>
 </ul>
 </nav>
 </div>
 </div>
</div>

Şimdi de main elemanı içerisine birkaç satır yazı ekleyelim.

<main>
 <span>The difference between a master and beginner is that the master has failed more times than the beginner has even tried. </span>
</main>

---

CSS Kodları

Google Material Design’ın kullandığı yazıtipi Roboto. Bu tasarımda da Roboto yazı tipi kullanılmakta.

Web sayfanıza Türkçe karakter destekli Roboto yazıtipini eklemek istiyorsanız CSS kodlarınızın en üstüne aşağıdaki satırı eklemeniz yeterli.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext);

Daha sonra da aşağıdaki şekilde fontu kullanabilirsiniz.

font-family: 'Roboto', sans-serif;

Şimdi gelelim bu menü örneğinin nasıl hazırlandığına.

İlk olarak box-sizing tanımlamamız ile başlıyoruz. Böylece ölçeklendirme ile ilgili her türden sorunu engelliyoruz.

* 
 box-sizing: border-box;

Şimdi de arkaplan için soğuk bir renk belirtelim. Overflow tanımı ile de scroll öğelerini gizliyoruz.

body 
 font-family: 'Roboto', 'Arial', sans-serif;
 height: 100vh;
 background: #03a9f4;
 overflow: hidden;

Geriye kalan menü tanımlamalarımız ile devam edelim.

.material-menu-wrapper 
 position: absolute;
 bottom: 0;
 right: 0;
 height: 100vh;
 width: 40vw;
 overflow: hidden;


.material-menu 
 position: relative;
 z-index: 1;
 width: 100%;
 height: 100%;
 background: transparent;


.material-btn 
 will-change: transform;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 position: absolute;
 z-index: 1;
 bottom: 20px;
 right: 20px;
 width: 75px;
 height: 75px;
 background: transparent;
 cursor: pointer;

.material-btn.active:before 
 transform: scale(18);

@media (min-height: 800px) 
 .material-btn.active:before 
 transform: scale(25);
 

.material-btn:active:before 
 opacity: 0.75;

.material-btn:before 
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 75px;
 height: 75px;
 background: white;
 border-radius: 50%;
 box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
 cursor: pointer;
 transform-origin: center 70%;
 transform: scale(1);
 transition: all 0.35s ease-out;


.material-content 
 padding: 10% 15%;
 position: absolute;
 z-index: 3;
 top: 0;
 right: 0;

Icon tıklandığında açılacak navigasyonu stilize edelim.

nav ul 
 list-style-type: none;
 padding: 0;
 text-align: right;

nav li 
 will-change: transform, opacity;
 margin: 20px 0;
 transform: translateY(100px);
 opacity: 0;
 transition: all 0.4s ease-out;

nav li.active 
 transform: translateY(0);
 opacity: 1;

nav li:nth-child(1) 
 transition-delay: 0.1s;

nav li:nth-child(2) 
 transition-delay: 0.2s;

nav li:nth-child(3) 
 transition-delay: 0.3s;

nav li:nth-child(4) 
 transition-delay: 0.4s;

nav a 
 text-decoration: none;
 font-size: 5vw;
 color: #03a9f4;
 font-weight: 300;

Material Design’ın hamburger iconunu hazırlayalım.

.material-hamburger 
 transition: all .3s ease-out;

.material-hamburger .material-patty 
 will-change: transform, opacity;
 width: 32px;
 height: 3px;
 margin: 0 0 6px 0;
 background: #333333;
 opacity: 1;
 transform: translate(0) rotate(0deg);
 transition: all .2s ease-out;

.material-hamburger .material-patty:last-child 
 margin-bottom: 0;

.material-hamburger.material-close 
 transform: rotate(-180deg);

.material-hamburger.material-close .material-patty:nth-child(1) 
 transform: translate(-10px, 4px) rotate(-45deg) scale(0.5, 1);

.material-hamburger.material-close .material-patty:nth-child(3) 
 transform: translate(-10px, -4px) rotate(45deg) scale(0.5, 1);

Sol tarafa atadığımız içeriği şekillendirelim.

main 
 will-change: transform, opacity;
 width: 80vw;
 height: 100vw;
 padding: 10vw;
 overflow: hidden;
 transition: all .35s ease-out;

main.active 
 opacity: .2;
 transform: translate(-300px, 0px);

main span 
 color: rgba(255, 255, 255, 0.6);
 text-transform: uppercase;
 font-size: 4vw;

---

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Son olarak menüye jQuery tanımlarımızı ekleyelim. openMenu ve closeMenu fonksiyonlarıyla başlayalım.

var circle = $('.material-btn');
var link = $('.material-content').find('li');
var ham = $('.material-hamburger');
var main = $('main');
var win = $(window);

function openMenu() 
 circle.toggleClass('active');
 link.toggleClass('active');
 ham.toggleClass('material-close');
 main.toggleClass('active');
 
 return false;


function closeMenu() 
 circle.removeClass('active');
 link.removeClass('active');
 ham.removeClass('material-close');
 main.removeClass('active');


circle.on('click', openMenu);
win.on('click', closeMenu)

Bu kadar.

---

Yorumlarınız

Bu şık Material Design menü tasarımı hakkında ne düşünüyorsunuz?

Google Material Design Menu #2

Haftanın Ücretsiz Web Teması #12

Eshopper, HTML5 ve CSS3 ile hazırlanmış bir alışveriş sitesi teması. Fonksiyonelitesini Bootstrap kütüphanesinden alan tema responsive yapısıyla da göz dolduruyor.

Bu hafta bir değişiklik yapıp sizlerle şık bir alışveriş teması paylaşıyoruz.

Ücretsiz Web Teması #12 : Eshopper

Özellikler

1. Bootstrap


2. Responsive


3. Minimalist


4. HTML5 ve CSS3 ile hazırlanmış


5. Kolaylıkla değiştirilebilir


6. Tamamen ücretsiz

 

DEMO  DOWNLOAD

---

Kullanım & Lisanslama

Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.

---

Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.

Önümüzdeki salı, yeni web temasıyla görüşmek üzere!

Haftanın Ücretsiz Web Teması #12

Haftanın İlham Kaynakları #1

Beynimiz, çalışma prensibinden ötürü milyonlarca fotoğrafı hafızasında barındırır. Bu görsel öğeler bir düzen içerisinde harmanlanır, belirli yerlerde kullanılmak üzere istiflenir. Bu kişi bir sanatçı, bankacı, ev hanımı, madenci, yazar veya astronot olabilir. O fotoğraflar bir şekilde kişinin ürettiklerinde yer alacaklardır. Bir yazısında, söylevinde, resminde veya bir tutumunda…

15.12.2014 tarihi itibariyle her pazartesi günü, yepyeni ilham kaynaklarıyla sizlerle olacağız. Haftaya birlikte merhaba demek ve ilk iş gününü biraz daha çekilir kılmak için gözünüz burada olsun.

15.12.2014 için ilham kaynakları

Snobfashion

---

Ivan Moreale

---

Jeremy Tourvieille

---

Fabian De Lange

---

Morgan Sterns

---

Marcus Stiller

---

Marcus Stiller 2

---

Ian Norman

---

Ian Norman 2

---

Ian Norman 3

Kullanım & Lisanslama

Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.

Haftanın İlham Kaynakları #1

Mobil Uygulama Tasarımı

Mobil uygulamalar için tasarım hazırlarken nelere dikkat etmeli? Hangi programlar elimizin altında bulunmalı? Hangi boyutlarda çalışılmalı? Hangi renklerden kaçınılmalı? Yeni trendler neler?

Uzun bir aradan sonra video dersleri ile yine sizlerleyiz. Karşınızda uzun soluklu bir mobil uygulama tasarımı rehberi.

Photoshop ve Illustrator ile Mobil Uygulama Tasarımı

Mobil Tasarım Örneği

Derste hazırladığımız tasarım örneğini bilgisayarınıza indirebilirsiniz.

DOSYAYI İNDİR

Dosyayı yukarıdan indirebilirsiniz.

Mobil Uygulama Tasarımı

Haftanın Ücretsiz Web Teması #11

Squadfree, sırtını Bootstrap’e yaşlamış şık bir single page web teması. Scrollspy ile de süslenmiş yapışkan menü yapısına sahip tema HTML5 ve CSS3’ün birçok yeniliğini içeriyor.

Bu hafta modern ve animetif tasarımıyla dikkat çeken Squadfree temasını inceliyoruz..

Ücretsiz Web Teması #11 : Squadfree

Özellikler

1. Bootstrap


2. Responsive


3. Minimalist


4. HTML5 ve CSS3 ile hazırlanmış


5. Kolaylıkla değiştirilebilir


6. Tamamen ücretsiz

 

DEMO  DOWNLOAD

---

Kullanım & Lisanslama

Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.

---

Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.

Önümüzdeki salı, yeni web temasıyla görüşmek üzere!

Haftanın Ücretsiz Web Teması #11

Material Design Text Input

Material Design odaklı tasarımlar üzerine konuşmaya devam ediyoruz. Bugün hazırlayacağımız örnekte statik yapıdaki text inputlarını animatif hale çevireceğiz. CSS3 ve jQuery‘nin hünerlerinden yararlanarak hazırlayacağımız bu şık tasarım sıkıcı hale dönüşebilen formlarınıza renk katacak!

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Material Design Text Input

Yapacağımız işlem temelinde çok basit. Input öğelerinin focus ve focusout prosedürleri için ayrı senaryolar oluşturacağız. Ek olarak klasik label yapısını absolute pozisyonlama ile inputun üzerine taşıyacağız. Burada akıllara şu soru gelebilir : “Input’un üzerine konulmuş absolute bir diğer öğe bu yapının çalışmamasına sebep olmaz mı?”

Tabii olur. Ancak CSS’de bunun da çözümü var. Kullanacağımız pointer-events tanımıyla label’in altındaki inputu ezmemiş olacağız. Hazırsanız tasarımı oluşturmaya başlayalım.

HTML Kodları

Bir adet input çerçevesi oluşturalım. İçerisine de label ve inputumuzu yerleştirelim.

<div class="inputmd">
 <input type="text">
 <label>Adınız</label>
</div>

Bu kadar. Şimdi bu kodu stilize edelim.

CSS Kodları

Örnekte Roboto isimli fontu kullanıyoruz. Eğer sizler de Roboto’yu kullanmak isterseniz aşağıdaki kodu CSS dosyanızın en üstüne ekleyin.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext);

İlk olarak .inputmd şeklinde niteliklendirdiğimiz div öğesine relative bir yapı atıyalım.

.inputmd 
 position: relative;
 font-weight:300;
 font-family:'Roboto', sans-serif;

Sırada input öğelerimizi tasarlamak var. HTML’in inputlara atadığı klasik CSS tanımlarını sıfırlayalım. İlerisi için de birkaç transition tanımlaması yapalım.

.inputmd input
 font-size: 16px;
 padding: 10px 5% 10px 5%;
 margin:0;
 color: #795548;
 width: 90%;
 border: none;border-radius:0;
 border-bottom:1px solid #9e9e9e;
 transition:background .5s ease,border-bottom .5s ease,color .5s ease;

Şimdi de inputlara odaklanıldığında alınacak aksiyonu belirleyelim.

.inputmd input:focus 
 outline: none;
 background: #795548;
 border-bottom: 1px solid transparent;
 color: white;

Label öğelerimizi hazırlarken yukarıda da söylediğimiz gibi absolute bir yapı kullanacağız. Böylece istediğimiz gibi pozisyonlama değişikliği yapabileceğiz.

.inputmd label 
	color: #795548; 
	font-size: 18px;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: all .5s ease;

Şimdi de inputlara focus olunduğunda ve inputlara vdata classı eklendiğinde alınacak aksiyonu belirliyoruz. Buradaki vdata’yı biraz tanıyalım. Bu classı seçilip içi dolu bir şekilde bırakılan inputlara jQuery ile atıyoruz.

.inputmd input:focus ~ label, 
.inputmd input.vdata ~ label 
 top: -20px;
 font-size:12px;
 color: #9e9e9e;

Önyüz tarafında hazırız. Şimdi biraz da jQuery’nin fonksiyonelitesini kullanacağız.

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Yapmamız gereken tek bir işlem var. Dikkat ederseniz inputlara focus olunca label öğesi hareketleniyor. Örneğin bir inputa focus olun ve içerisine hiçbir şey yazmadan başka bir yere tıklayın. Label yerine geri dönecektir. İşte aşağıdaki jQuery kodları olmazsa, inputun içi dolu olduğu halde üzerine label binecek, özetle yazı üzerine yazı gelecektir.

Bunun kontrolü için de seçilen input öğesinin value değerini kontrol edelim. Klasik bir if else döngüsüne ihtiyacımız var.

$('input').blur(function() 
 if ($(this).val())$(this).addClass('vdata');
 else$(this).removeClass('vdata');
);

Hazırız!

Bu tasarım hakkında ne düşünüyorsunuz?

Yorumlarınızı bekliyoruz..

Material Design Text Input

Haftanın Ücretsiz Web Teması #10

Start Bootstrap, adından da belli olduğu gibi Bootstrap altyapısını kullanan sade bir web teması. LESS ve sıkıştırılmış CSS dosyalarından oluşan tema kodlama tarafından da simplicity mantığından çıkmıyor.

Bu hafta renklerini Bootswatch’in Flatly temasından alan Start Bootstrap temasını inceliyoruz.

Ücretsiz Web Teması #10 : Start Bootstrap

Tema birçok yeni tasarım trendini destekliyor. Sticky header bunlardan birisi. Ayrıca scrollspy ile de görüntülenen içeriğe ait menü adı öne çıkarılıyor. Bootstrap’in grid yapısı sayesinde tüm bu özellikler responsive olarak sizlere sunuluyor. Ayrıca contact form alanı için de PHP dosyası barındırıyor.

Özellikler

1. Bootstrap


2. Responsive


3. Minimalist


4. HTML5 ve CSS3 ile hazırlanmış


5. Kolaylıkla değiştirilebilir


6. Tamamen ücretsiz

 

DEMO  DOWNLOAD

---

Kullanım & Lisanslama

Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.

---

Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.

Önümüzdeki salı, yeni web temasıyla görüşmek üzere!

Haftanın Ücretsiz Web Teması #10

CSS ile File Input Tasarımı

Webkit devreye girmeden önce ne yazık ki işin CSS tarafında file inputlarına müdahale edemiyorduk. Bu yüzden birçok tasarımcı, perdeleme yöntemiyle file inputun üzerine şık bir tasarım koyup asıl çalışan fonksiyonu altta gizliyordu. Ancak pseudo seçicileri sayesinde artık bu mümkün. Birçok güncel tarayıcının desteklediği bu selector tanımları Internet Explorer tarafında desteği 9+ versiyonlarda buluyor.

Bu makalemizde -webkit-file-upload-button ve -ms-browse tanımları sayesinde input[type=file] bir öğeye stil atayacağız.

ÖRNEĞİ GÖRÜNTÜLE

File Input CSS

Bu tip bir input yapısına tanımlanan CSS sadece açıklama metnine etki etmekte. Buton bu stillerden etkilenmemekte. İşte burada devreye -webkit-file-upload-button ve -ms-browse giriyor. İşte klasik bir file inputuyla stilize edilmiş halinin farkı:

Nasıl çalışır?

Öncelikle işin HTML tarafında bir file inputu oluşturalım.

<input type="file">

Şimdi de CSS kodlarımızı ekleyelim.

input[type="file"] 
 cursor: pointer !Important;
 font: 300 14px sans-serif;
 color:#9e9e9e;

input[type="file"]::-webkit-file-upload-button

 font: 300 14px sans-serif;
 background: #009688;
 border: 0;
 padding: 12px 25px;
 cursor: pointer;
 color: #fff;
 text-transform: uppercase;


input[type="file"]::-ms-browse 
 font: 300 14px 'Roboto', sans-serif;
 background: #009688;
 border: 0;
 padding: 12px 25px;
 cursor: pointer;
 color: #fff;
 text-transform: uppercase;

Böylece perdeleme tekniği kullanmadan file inputunu stilize etmiş olduk.

Bitirmeden önce..

Buradaki dikkat çeken unsur, her iki öğenin aynı tanımlara sahip olması ve birleştirilemez olması. Normalde CSS tanımlarını virgül ile duplicate edip, aynı kodları birden fazla kez yazma işinden kurtuluyorduk. Ancak bu yapıda çalışmıyor. Belki yorum alanında bu konuda bizi aydınlatmak istersiniz.

İyi çalışmalar.

CSS ile File Input Tasarımı

jQuery ile Farenin Sağ Tuşuyla Açılan Menü

Bildiğiniz gibi web sitelerinde farenin sağ tuşuna bastığımızda contextmenu denilen bir menü açılıyor. jQuery ile de bu menüyü kapatıp yerine başka bir tanımlama yapabiliyoruz. CSS3 desteğiyle hazırlayacağımız modern bir tasarımı bu menüye giydirebiliriz.

Örneği görüntüleyerek başlayabilirsiniz.

Bu makalemizde şık bir menü tasarımı hazırlayıp, yapıyı sağ tuş ile tetiklenebilir hale getireceğiz.

ÖRNEĞİ GÖRÜNTÜLE

jQuery ile Sağ Tuşla Açılan Menü

Hazırlayacağımız kod ilk başta jQuery’nin preventDefault tanımıyla klasik contextmenu taslağını kapatacak. Daha sonra da birlikte hazırlayacağımız ul yapısını görüntülenebilir hale getirecek. Özetle iskelet için HTML, makyaj için CSS ve fonksiyonelite için jQuery tanımlarına ihtiyaç duyacağız. HTML kodlarımız ile başlayalım.

HTML Kodları

Font Awesome iconlarını kullanmak için <head></head> taglarının içerisine aşağıdaki tanımlamayı yapın.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Şimdi sağ tuşla açılan menü örneğinin temelini klasik ul yapısına dayandıralım. Menüyü .contextMenu şeklinde isimlendiriyoruz.

<ul class="contextMenu" hidden>
 <li><a href="#"><i class="fa fa-home"></i> Homepage</a></li>
 <li><a href="#"><i class="fa fa-sitemap"></i> Sitemap</a></li>
 <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
 <li>
 <a class="fa fa-facebook" href="#"></a>
 <a class="fa fa-twitter" href="#"></a>
 <a class="fa fa-google-plus" href="#"></a>
 <a class="fa fa-linkedin" href="#"></a>
 </li>
</ul>

Sırada menüyü şekillendirmek var.

CSS Kodları

Örnekte Roboto isimli fontu kullanıyoruz. Eğer sizler de Roboto’yu kullanmak isterseniz aşağıdaki kodu CSS dosyanızın en üstüne ekleyin.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext);

Yukarıdaki Google Web Fonts bağlantısı orjinalinde HTTP yapıda. Ancak gördüğünüz gibi sizlerle paylaştığımız kod HTTPS tanımlı. Çoğu iş yerinde HTTP yapıda çalışmadığı için sizlere de HTTPS yapısını önermekteyiz. Özellikle Mac bilgisayarlarda HTTPS yapısı daha verimli çalışıyor.

Menünün iskelet yapısını stilize ederek başlayalım.

ul.contextMenu
 list-style:none; 
 margin:0;padding:0;
 font: 300 15px 'Roboto', sans-serif;
 position: absolute;
 color: #333;
 box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
 

Tüm menüde gerçekleşecek renk geçişlerine efekt atayalım.

ul.contextMenu *
 transition:color .4s, background .4s;
 

Şimdi de menü itemlarımızı tanımlayalım.

ul.contextMenu li
 min-width:150px;
 overflow: hidden;
 white-space: nowrap;
 padding: 12px 15px;
 background-color: #fff;
 border-bottom:1px solid #ecf0f1;


ul.contextMenu li a
 color:#333;
 text-decoration:none;


ul.contextMenu li:hover
 background-color: #ecf0f1;


ul.contextMenu li:first-child
 border-radius: 5px 5px 0 0;


ul li:last-child
 background:#ecf0f1;
 border-bottom:0;
 border-radius: 0 0 5px 5px


ul.contextMenu li:last-child awidth:26%;
ul.contextMenu li:last-child:hover acolor:#2c3e50
ul.contextMenu li:last-child:hover a:hovercolor:#2980b9 

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi sağ tuşla açılan orjinal menüyü kilitleyip kendi menümüzü tetikleyebiliriz.

$(document).bind("contextmenu", function(event) 
 event.preventDefault();
 $("ul.contextMenu")
 .show()
 .css(top: event.pageY + 15, left: event.pageX + 10);
);
$(document).click(function() 
 isHovered = $("ul.contextMenu").is(":hover");
 if (isHovered == false)
 $("ul.contextMenu").fadeOut("fast");
 
);

Sağ tuşla açılan menü tasarımımız hazır.

Mobil cihazlarda bu tasarım çalışmakta. Ekranın boş bir yerine basılı tutarak görüntülenmesini sağlayabilirsiniz.

Bitirmeden önce..

Bu tip menü tasarımları kullanıcın sağ tuşla eriştiği kısayolları bloke edebilir. İşin UX tarafında bu tip menüleri önermiyoruz. Özellikle son kullanıcı profesyonel bir bilgisayar kullanıcısı değilse.

Yorumlarınızı bekliyoruz.

jQuery ile Farenin Sağ Tuşuyla Açılan Menü