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ü

Material Design Iconları

Material Design ile birlikte kullanılan iconlar “Material Design Iconic Font” isimli proje altında bir araya getirildi. Toplamda 744 adet icon vektörel formatta, web tasarımında kullanabileceğiniz şekilde sizleri beklemekte. Diğer popüler icon setleri Glyphicon ve Font Awesome’dan farklı bir ruha sahip bu icon tasarımları günden güne daha da popülerleşecek gibi.

Sergey Kupletsky tarafından hazırlanan bu icon setini ücretsiz bir şekilde kullanabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl kullanılır?

Material Design Iconic Font v1.0.1’i aşağıdaki bağlantıyı tıklayarak indirebilirsiniz.

DOSYAYI İNDİR

ZIP dosyası içerisinden çıkan css ve fonts klasörlerini web sayfanızın dizini içerisine atın. Daha sonra da web sitenizin <head></head> tanımları arasına aşağıdaki kodu ekleyin.

<link rel="stylesheet" href="css/material-design-iconic-font.min.css">

Artık kullanıma hazır!

Örnek

Bir çiçek iconu ekleyerek başlayalım

<i class="md md-local-florist"></i>

---

Çiçeği farklı boyutlarda tekrar ekrana yazdıralım.

<i class="md-local-florist md-lg"></i> md-lg
<i class="md-local-florist md-2x"></i> md-2x
<i class="md-local-florist md-3x"></i> md-3x
<i class="md-local-florist md-4x"></i> md-4x
<i class="md-local-florist md-5x"></i> md-5x

---

Spinner (yükleniyor) yapıları için dönen animasyonlar oluşturalım.

<i class="md md-rotate-right md-spin"></i>
<i class="md md-settings md-spin"></i>
<i class="md md-rotate-left md-spin-reverse"></i>
<i class="md md-replay md-spin-reverse"></i>
<i class="md md-loop md-spin-reverse"></i>

---

İconlara takla attıralım veya çevirelim.

<i class="md md-invert-colors"></i> normal<br>
<i class="md md-invert-colors md-rotate-90"></i> md-rotate-90<br>

Daha fazla icon örneği için sizler için hazırladığımız demo ekranına göz atmayı unutmayın.

Material Design Iconları

Haftanın Ücretsiz Web Teması #9

Strafa, HTML5up tarafından hazırlanmış şık ve minimalist bir tema. HTML5 ve CSS3 teknolojilerini kullanan Strafa beraberinde parallax scrolling trendini de içeriyor.

Bu hafta pastel renklerden oluşan responsive yapıdaki Strafa temasını sizlerle paylaşacağız.

Ücretsiz Web Teması #9 : Strafa

Özellikler

1. Responsive


2. HTML5 ve CSS3 ile hazırlanmış


3. Kolaylıkla değiştirilebilir


4. 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ı #9

Yıldızlarla Yükleniyor Animasyonu (Spinner)

Web sayfanızdaki yüklenme işlemlerinizin uçuşan yıldızlardan oluşan bir animasyonla süslenmesini ister misiniz? Georgi tarafından hazırlanan bu şık tasarım sayesinde bir canvas öğesini JavaScript ile süsleyebilir, bu yapıyı oluşturabilirsiniz.

Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.

ÖRNEĞİ GÖRÜNTÜLE

JavaScript ile Yıldızlı Yükleniyor Animasyonu (Spinner)

Birbirinin kopyası yıldızların koordinatlarını yöneterek, perdeye giren ve bir süre sonra çıkan oyuncular misali görünürlükleriyle oynayarak, klasik canvas yapısını etkileyici bir şekilde kullanıyor Georgi’nin JavaScript kodları. Anlaşılır bir şekilde temiz ve sade olarak yazılmış kodlar, bizlere de tasarımı özgünleştirme şansı tanıyor.

Şimdi bu yapıyı oluşturmaya başlıyoruz.

HTML ve CSS Kodları

İhtiyaç duyacağımız içi boş bir canvas tanımı.

<canvas></canvas>

Beraberinde de bu canvas öğesini ekrana düzgün bir şekilde basmamızı sağlayacak CSS tanımları da şöyle :

body,htmlmargin:0; padding:0;
canvas position:absolute; display: block; top:0;left:0;

Şimdi sırada JavaScript kodları var.

JavaScript Kodları

Eğer Georgi’nin tasarımında

1. yıldızların rengini değiştirmek isterseniz ctx.fillStyle = “#ffeb3b”;


2. yıldızlara border eklemek isterseniz ctx.strokeStyle = ‘rgba(0,0,0,0)';


3. tasarımın arkaplanını değiştirmek isterseniz ctx.fillStyle = ‘#e91e63′;

alanlarını değiştirmeniz gerekmektedir.

İşte kodlar :

function Circle (x, y, radius) 
 this.x = x;
 this.y = y;
 this.radius = radius;
 this.angle = 0;


function Star (x, y, rotation) 
 this.x = x;
 this.y = y;
 this.length = 15;
 this.scaleX = .1;
 this.scaleY = .1;
 this.rotation = rotation;
 this.angle = Math.random() * 360;
 this.vx = 0;
 this.vy = 0;
 this.alpha = 1;


Star.prototype.draw = function(ctx) 
 ctx.save();
 ctx.globalAlpha = this.alpha;
 ctx.translate(this.x, this.y);
 ctx.rotate(this.rotation * Math.PI / 180);
 ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(24,0);
 ctx.lineTo(24,24);
 ctx.lineTo(0,24);
 ctx.closePath();
 ctx.scale(this.scaleX, this.scaleY);
 ctx.strokeStyle = 'rgba(0,0,0,0)';
 ctx.lineCap = 'butt';
 ctx.lineJoin = 'miter';
 ctx.miterLimit = 4;
 ctx.save();
 ctx.fillStyle = "#ffeb3b";
 ctx.beginPath();
 ctx.moveTo(12,0.89);
 ctx.lineTo(15.609,8.204);
 ctx.lineTo(23.682,9.377);
 ctx.lineTo(17.842,15.071);
 ctx.lineTo(19.22,23.11);
 ctx.lineTo(12,19.315);
 ctx.lineTo(4.78,23.11);
 ctx.lineTo(6.159,15.071);
 ctx.lineTo(0.318,9.377);
 ctx.lineTo(8.39,8.204);
 ctx.lineTo(12,0.89);
 ctx.closePath();
 ctx.fill();
 ctx.stroke();
 ctx.restore();
 ctx.restore();
;

function Square(x, y) 
 this.x = x;
 this.y = y;


var canvas = document.querySelector('canvas'),
 ctx = canvas.getContext('2d'),
 W = canvas.width = window.innerWidth,
 H = canvas.height = window.innerHeight,
 stars = [],
 circle = new Circle(W / 2, H / 2, 110),
 square = new Square(W / 2, H / 2);

function animateRect(square) 
 var star, counter = 0;
 square.x = W / 2 + (circle.radius * Math.cos(circle.angle * .047));
 square.y = H / 2 + (circle.radius * Math.sin(circle.angle * .047));
 circle.angle++;
 stars.push(new Star(square.x, square.y, Math.random() * 360));


function moveStars() 
 for (var i = 0; i < stars.length; i++) 
 var star = stars[i];
 if (star.scaleX <= 1) 
 star.scaleX += .05;
 star.scaleY += .05;
 
 if (star.alpha >= .05) 
 star.alpha -= .015;
 else if (star.alpha < .1) 
 stars.splice(stars[i], 1);
 
 star.vx = Math.sin(star.angle) * .5;
 star.vy = Math.cos(star.angle) * .5;
 star.angle += .1;
 star.x += star.vx;
 star.y += star.vy;
 star.draw(ctx);
 


(function drawFrame()
 window.requestAnimationFrame(drawFrame, canvas);
 ctx.fillStyle = '#e91e63';
 ctx.fillRect(0, 0, W, H);
 animateRect(square);
 moveStars();
());

Yorumlarınız?

Bu şık spinner ile ilgili yorumlarınızı bekliyoruz.

Yıldızlarla Yükleniyor Animasyonu (Spinner)

Haftanın Ücretsiz Web Teması #8

Flex, Templatemo tarafından hazırlanmış, şık ve büyük bir slider ile başlayıp minimalist yapıda devam eden responsive bir web şablonu. Trial, portfolio, our team ve contact gibi alanları da barındıran tasarım flat renkleri başarıyla taşıyor. Bootstrap’le de desteklenmiş olması, biz tasarımcıların yapacağı revizyonları hızlandırıyor.

Bu hafta scrollspy ve sticky header gibi güncel tasarım trendlerini başarılı bir şekilde uygulayan Flex isimli temayı sizler için inceliyor olacağız.

Aradığınız şık ve kullanışlı bir tasarım ise Agency sizin için doğru tercih olabilir!

Ücretsiz Web Teması #7 : Agency

Özellikler

1. Bootstrap


2. Responsive


3. HTML5 ve CSS3 ile hazırlanmış


4. Kolaylıkla değiştirilebilir


5. 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ı #8

CSS ile Responsive Dropdown Menu

Sadece CSS kodlarıyla açılabilir (dropdown) ve mobil uyumlu menü hazırlanabilir mi? Birkaç sene öncesine kadar bu işi JavaScript desteği olmadan yapmak hayalden öteye geçemezdi. Ancak bugün, CSS3’ün gelişen tanımlarıyla web tarafında neredeyse herşey mümkün!

Ayrıca aç/kapa düğmesiyle bu menüyü taşınabilir cihazlara özel stilize de edebiliyoruz. Evet, yanlış duymadınız. Aç/kapa işlemini bile sıradan bir checkbox öğesini selector gibi kullanarak CSS ile hazırlıyoruz.

Bu makalemizde sadece CSS kodları yazarak responsive yapıda bir dropdown menü hazırlayacağız. Sadece kod tarafında değil, önyüzde de basitliğe yönelerek bu tasarımı yapacağız.

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

ÖRNEĞİ GÖRÜNTÜLE

CSS Responsive Dropdown Menü

HTML tarafında ihtiyaç duyacağımız kodları yazdıktan sonra menünün genel taslağını oluşturacağız. Klasik ul yapısı öyle bir stilize edilmeli ki mobil cihazlarda da sorunsuz çalışmalı. Öyleyse bir aç/kapa düğmesine, yani jQuery kodlarına ihtiyaç duymaz mıydık?

Burada da sıradan bir checkbox öğesini, değerine göre selector ile yakalanabilir hale getirip aç/kapa düğmesi olarak kullanacağız. Ve en sonunda da bütün bu yapıyı responsive, yani mobil uyumlu hale getireceğiz.

HTML kodlarımız ile başlayalım.

HTML Kodları

İlk olarak mobil tarafta aç/kapa işlemini yapacak checkbox öğesini ekleyelim.

<label class='showMenu' for='hiddenInput'>&#9776;</label>
<input id='hiddenInput' type='checkbox' value='0'/>

Şimdi de menünün kendisini ekleyelim. Yapımız gayet basit. Klasik bir ul menüsü oluşturalım.

<ul class="cssMenu">
 <li>Anasayfa</li>
 <li>Web Tasarımı <span class="downarrow"></span>
 <ul>
 <li>HTML5</li>
 <li>CSS3</li>
 <li>jQuery</li>
 </ul>
 </li>
 <li>İletişim</li>
</ul>

Şimdi bütün fonksiyoneliteyi ve tasarımı CSS ile ekleyelim.

CSS Kodları

Başlangıç için menüyü klasik ul yapısından çıkaralım. Renkler ve yazı tipleri atayalım.

ul.cssMenu 
 list-style-type: none;
 padding:0;
 background-color: #00bcd4;


ul.cssMenu li 
 font:300 16px sans-serif;
 color: #333;
 display: inline-block;
 padding: 15px;
 position: relative;

Menü öğelerinin üzerine gelindiğinde nasıl bir aksiyon alınacak?

ul.cssMenu > li:hover 
 cursor: pointer;
 background-color: #ffeb3b;
 box-shadow:0 0 15px rgba(0,0,0,.6);

Aşağıya doğru açılan, sub menü barındıran öğelerin yanına koyacağımız oku tasarlayalım.

ul.cssMenu .downarrow 
 border: 4px solid transparent;
 border-top-color: #000;
 display:inline-block;

Alt menüleri detaylı bir şekilde elden geçirelim.

ul.cssMenu li ul 
 display: none;
 padding:0;


ul.cssMenu li:hover ul 
 display: table;
 margin-top: 15px;
 min-width: 250px;
 left: 0;
 position: absolute;

ul.cssMenu li:hover ul li 
 background-color: white;
 display: block;

ul.cssMenu li:hover ul li:hover 
 background-color: #e91e63;
 color:white;

Şimdi son olarak checkbox öğesini görünmez yapalım ve mobil taraf için menüyü göster hamburger ikonunu tasarlayalım.

input[type='checkbox']#hiddenInput
 display:none;


.showMenu
 display:none;
 color:white;
 font-size:30px;
 position:absolute;
 right:0px;
 top:0px;
 padding:8px 15px 10px 15px;
 background-color:#e91e63;
 border-radius:100%;
 z-index:1;
 border:5px solid #212121;
 cursor:pointer;

Sırada responsive yapımız var.

@media (max-width: 992px)
 ul.cssMenu,ul.cssMenu .downarrow
 display:none;
 
 
 input[type='checkbox']#hiddenInput:checked ~ ul.cssMenu,.showMenu
 display:block;
 
 
 ul.cssMenu li 
 display: block;
 text-align:center;
 padding:15px 0;
 border-bottom:1px solid rgba(1,1,1,.1);
 
 
 ul.cssMenu li:hover 
 box-shadow:0 0 0;
 
 
 ul.cssMenu li ul 
 display: block;
 background-color: white;
 margin:15px 0 -15px 0;
 
 
 ul.cssMenu li ul li 
 font-size:80%;
 padding:10px;
 
 
 ul.cssMenu li:hover ul 
 width: 100%;
 position: relative;
 

Bu kadar.

---

Nasıl buldunuz?

Sadece CSS kodları ile hazırlanmış bu responsive dropdown menü örneğini nasıl buldunuz? Yorumlarınızı bekliyoruz.

CSS ile Responsive Dropdown Menu

HTML5 ile Resimlere Before/After

HTML5 ile resimlerinizin önceki ve sonraki hallerini gösterebilirsiniz. Bu işlemi range inputuyla süsleyerek kaydırma çubuğuyla before/after işlemi uygulayabiliyoruz.

Özellikle fotoğrafçılık ve fotoğraf manipülasyonu üzerine yayın yapan blog yazarları, bu makalemiz sizleri hedef alıyor. Makalenin devamına göz atmadan önce örneği görüntülemenizi öneririz.

ÖRNEĞİ GÖRÜNTÜLE

HTML5 ile Resimlerin Önceki ve Sonraki Halleri

Hazırlayacağımız yapı bir çerçevenin içerisine 2 adet fotoğraf veya resim yükleyerek, bunları hiyerarşik olarak sıralayıp, yeri geldiğinde kapatıp açabilecek. Bu yüzden bol bol pozisyonlama da yapmış olacağız. Özetle işin büyük bir kısmı yine CSS3 tarafında ilerleyecek.

HTML Kodları

İlk olarak .karsilastirma isimli tablo yapıda bir division oluşturalım. İçerisine de birinci görseli eklemek için figure, ikinci görseli eklemek için de #ikincil ismindeki division öğesini ekleyelim. Altına da range inputumuzu ekleyerek kaydırma işleminin temelini oluşturalım.

<div class="karsilastirma">
 <figure>
 <figcaption>After</figcaption>
 <img src="http://www.adobewordpress.com/wp-content/uploads/2014/11/natalie-portman-nonStatue.jpg">
 <div id="ikincil">
 <figcaption>Before</figcaption>
 <img src="http://www.adobewordpress.com/wp-content/uploads/2014/11/natalie-portman-Statue.jpg"></div>
 </figure>
 <input type="range" min="0" max="100" value="50" id="slide" oninput="kaydirma()">
</div>

Şimdi bu yapıya biraz stil katalım.

CSS Kodları

İlk olarak çerçevemizi tablo yapısına sokarak içerisindeki öğeler kadar büyümesini sağlayalım.

div.karsilastirma display:table;margin:auto;

Birinci görselimizi barındıracak figure ile devam edelim.

div.karsilastirma figure 
 position: relative;
 font-size: 0;
 margin: 0; 
 overflow:hidden;
 z-index:1;


div.karsilastirma figure > img position: relative; width: 100%;

Şimdi de 50% genişlikte başlayacak ikinci görselin çerçevesini ekleyelim.

div.karsilastirma figure div 
 position: absolute;
 width: 50%; 
 overflow: hidden; 
 bottom: 0; 
 height: 100%;
 z-index:4;

Şimdi de before ve after yazılarını ekleyelim.

div.karsilastirma figure > div > figcaption , 
div.karsilastirma figure > figcaption 
 position:absolute; 
 bottom:4px; 
 font: 300 18px sans-serif; 
 color:white;


div.karsilastirma figure > img position: relative; width: 100%;
div.karsilastirma figure > div > figcaption left:8px; z-index:2;
div.karsilastirma figure > figcaption right:8px; z-index:3;

Son olarak range inputumuzu stilize edelim.

input[type=range]
 -webkit-appearance:none;
 -moz-appearance:none;
 position: relative;
 top: -30px; 
 left: -.4%;
 width: 100%;
 background-color: rgba(1,1,1,.1);
 z-index:5;


input[type=range]:focus outline: none;
input[type=range]:active outline: none;

input[type=range]::-moz-range-track 
	 -moz-appearance:none;
 width: 98%;
 background-color: rgba(1,1,1,.1); 
 position: relative;
 outline: none; 
 

input[type=range]::active border: none; outline: none;
input[type=range]::-webkit-slider-thumb 
 -webkit-appearance:none;
 position: relative;border-radius:100%;
 width: 25px; height: 25px; background:white;
 border-radius:100%;

input[type=range]:focus::-webkit-slider-thumb 
 background: rgba(255,255,255,.5);

input[type=range]:focus::-moz-range-thumb 
 background: rgba(255,255,255,.5);

JavaScript Kodları

Son olarak ikinci öğenin genişliğini takip edecek ve sliderı bu yapıyla ilişkilendirecek bir JavaScript koduna ihtiyaç duyuyoruz.

function kaydirma() 
 document.getElementById("ikincil").style.width = document.getElementById("slide").value+"%";

Yorumlarınız

HTML5 ve CSS3 ile hazırlayıp JavaScript ile fonksiyonel hale getirdiğimiz Before/After yapısıyla ilgili neler düşünüyorsunuz?

HTML5 ile Resimlere Before/After

Bootstrap Material Design

Google’ın yeni nesil kullanıcı dostu tasarım prensipleri ile Twitter’ın CSS kütüphanesini bir arada kullanmaya ne dersiniz?

Material Design‘ı mobil ortamda yeni yeni görmeye başlamışken web tarafında işler daha hızlı ilerliyor. Web geliştiricileri günden güne yeni Material Design elemanları paylaşırken şimdi de Bootstrap tarafında hareketlenmeler yaşanmaya başladı. FezVrasta, GitHub sayfasında paylaştığı bu web önyüzüyle son günlerde fazlasıyla popüler.

Bootstrap Material Design

Bootstrap Material temasının detaylarını GitHub sayfasından takip edebilirsiniz. Download etmek veya önizlemek için de aşağıdaki bağlantıları kullanabilirsiniz.

DEMO  DOWNLOAD

Şimdi de yapıyı biraz tanıyalım.

Bootstrap Material Design : Navbar

Buttons

Bootstrap Material Design : Typography

Bootstrap Material Design : Icons

Bootstrap Material Design : Tables

Bootstrap Material Design : Forms

Bootstrap Material Design : Navs

Bootstrap Material Design : Indicators

Bootstrap Material Design : Progress bars

Bootstrap Material Design : Sliders (with noUiSlider)

Bootstrap Material Design : Containers

Bootstrap Material Design : Dialogs

Ne düşünüyorsunuz?

Bu etkileyici tasarım yapısı ve kütüphane birleşimi hakkında ne düşünüyorsunuz? Yorumlarınızı bekliyoruz.

Bootstrap Material Design