Bugün de Emmanuel Pacamalan tarafından hazırlanmış Instagram konseptini sizlerle paylaşıyor olacağız.
Başlamadan önce Material Design ile ilgili daha fazla şey öğrenmek isterseniz;
İşte Emmanuel’in hazırladığı konsept ;
SeeFolio bireysel kullanımlar için uygun bir ücretsiz web teması. HTML5 ve CSS3 ile hazırlanmış bu responsive tasarım flat renklerle süslenmiş.
Ayrıca Bootstrap ile hazırlanmış olması da kolay yönetilebilir ve değiştirilebilir olmasını sağlıyor.
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.
Bugün sizlere Nikon d750 ile 6016×4016 piksel (240ppi) çözünürlükte Carlos Martínez tarafından çekilmiş ve hazırlanmış mockupları ücretsiz paylaşacağız.
Mockup PSD’lerini aşağıdan önizleyebilirsiniz :
MacBook Pro ve Akıllı Telefon fotoğraflarını içeren bu PSD dosyalarını kendi ekranlarınıza uyarlamanız için katmanlardaki Smart Objectleri kendi öğeleriniz ile değiştirmeniz yeterli.
Dosyaları indirmek için Carlos’un Google Drive hesabına erişebilirsiniz.
Dergi ve gazetelerin bilmece sayfalarında yer alan ve fazlasıyla dikkat isteyen “İki resim arasındaki 7 farkı bulun” türü bulmacaları hatırlar mısınız? Genellikle kısa bir göz gezdirmeyle 6 fark bulunur ancak her halükarda sonuncusu biraz uğraştırırdı.
Psikoloji bilimi bu bulmacaları, özellikle çocuklarda dikkat ve algıyı yönetme açısından faydalı göstermekte.
Bu makalemizde, seçtiğimiz iki resim arasındaki farkları JavaScript ile saniyeler içerisinde bulan bir kod öbeği paylaşacağız.
İşin büyük bir kısmı pure JavaScript ile yapılsa da bu yapının özellikle input öğelerindeki değişimler jQuery ile anlık olarak takip edilebilmekte. O yüzden Adobewordpress kategorileri arasındaki en uygun yeri jQuery kategorisi diye düşündük.
Bu kodlama Jonas Grumann tarafından 22 Ekim 2014 tarihinde hazırlandı.
Hazırsanız başlayalım.
İki adet upload inputuna ihtiyacımız olacak. Beraberinde de sonuçları göstereceğimiz alanları da hazırlayalım.
<div class="uploaders">
<h2>Resim Yükle</h2>
<div class="inputs">
<input type="file" id="original" /><br/>
<input type="file" id="modified" />
</div>
</div>
<div class="output">
<h2>Çıktılar</h2>
<div class="canvases">
</div>
</div>
Ö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>
Jonas tarafından hazırlanan JavaScript kodları şöyle :
var FindDifferences = function()
var original_canvas, modified_canvas, original_ctx, modified_ctx;
var has_original_image = false;
var has_modified_image = false;
this.init = function()
var self = this;
$("#original").change(function()
self.upload(this, 'original');
);
$("#modified").change(function()
self.upload(this, 'modified');
);
this.upload = function(input, canvas_name)
var self = this;
if (input.files && input.files[0])
var reader = new FileReader();
var image_width = 0;
var image_height = 0;
reader.onload = function (e)
//$('#blah').attr('src', e.target.result);
var image = new Image();
image.src = e.target.result;
image.onload = function()
image_width = this.width;
image_height = this.height;
if (canvas_name == 'original')
var id = "original_canvas";
original_canvas = document.createElement('canvas');
original_canvas.id = "original_canvas";
original_canvas.width = image_width;
original_canvas.height = image_height;
original_ctx = original_canvas.getContext("2d");
original_ctx.drawImage(image, 0, 0);
document.querySelectorAll(".canvases")[0].appendChild(original_canvas);
has_original_image = true;
else
modified_canvas = document.createElement('canvas');
modified_canvas.id = "modified_canvas";
modified_canvas.width = image_width;
modified_canvas.height = image_height;
modified_ctx = modified_canvas.getContext("2d");
modified_ctx.drawImage(image, 0, 0);
modified_ctx.fillStyle = "red";
document.querySelectorAll(".canvases")[0].appendChild(modified_canvas);
has_modified_image = true;
if (has_original_image && has_modified_image)
self.go();
reader.readAsDataURL(input.files[0]);
this.go = function()
var original_data = original_ctx.getImageData(0, 0, original_canvas.width, original_canvas.height).data;
var modified_data = modified_ctx.getImageData(0, 0, original_canvas.width, original_canvas.height).data;
var errors = this.checkData(original_data, modified_data);
this.drawErrors(errors);
this.checkData = function(arr_1, arr_2)
var errors = [];
for (var i=0, l=arr_1.length; i < l; i+=4)
return errors;
this.drawErrors = function( errors )
for (var i = 0, l = errors.length; i < l; i++)
var ce = errors[i] / 4;
var posX = ce % original_canvas.width;
var posY = (Math.floor(ce / original_canvas.width) * original_canvas.width) / original_canvas.width;
modified_ctx.fillRect(posX, posY, 1, 1);
this.init();
var finDifferences = new FindDifferences();
Adobewordpress olarak eğlenceli konuları da ele almayı, yapılmış uygulamaları sizlerle paylaşmayı arzuluyoruz. Bu yüzden ilginizi çekebileceğini düşündüğümüz her türden web yazılımını makalelerimizde ele almaktayız. Eğer sizlerin de önerdiği, beğendiği veya bir şekilde Adobewordpress’te görmek istediği yazılımlar varsa bunları bizimle yorum alanında paylaşabilirsiniz.
İyi çalışmalar.
Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.
HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.
Akordiyon tasarımlar genellikle uzun makaleleri küçük bir alanda sunmak için kullanılmakta. Google’ın Material Design‘ı da bu yapıya benzer tasarımlarla UX tarafında devrimler yaşatıyorken biz de konuya değinmek istedik.
Çok önceleri bu konuya benzer, sadece görsel sunumu yapabileceğiniz bir tasarımı da sizlerle paylaşmıştık.
Hazırsanız başlayalım.
İlk olarak bütün öğeleri çevreleyecek bir section oluşturalım. Bu öğeye de web sayfanızdaki diğer sectionlarla karışmasını önlemek için .aw-accordion classını verelim. İçerisine de one, two, three ve four olmak üzere 4 adet akordiyon ekleyelim. Daha sonra bu alanların hepsini CSS ve jQuery ile yönetiyor olacağız.
Tüm HTML kodlarımız şunlar :
<section class="aw-accordion">
<div class="one">
<h1>1.Başlık</h1>
<span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
</div>
<div class="two">
<h1>2.Başlık</h1>
<span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
</div>
<div class="three">
<h1>3.Başlık</h1>
<span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
</div>
<div class="four">
<h1>4.Başlık</h1>
<span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
</div>
</section>
Şimdi işe biraz stil katalım.
Başlangıç için .aw-accordion classını tanımladığımız sectionı düzenleyelim. Aslına bakarsanız section yapısının aşağıdaki genişlik tanımına ihtiyacı yok. Ancak hazırlayacağımız örneği özgünleştirirken alttaki kodu zaten yazacağınızı bildiğimiz için ekleme gereği duyduk.
section.aw-accordion
width:100%;
Şimdi akordiyonun 4 panelinde ortak olan özellikleri ekleyelim. Örneğin 23%’lük genişliği 1%’lik padding ile birleştirerek her öğeye 25% oranında toplam genişlik katabiliriz. Böylece 25×4=100%, yani tam ekran genişliğine erişiriz. Bu küçük matematik hesaplarına daha sonra jQuery tarafında da değineceğiz.
Ayrıca güzel bir transition ekleyelim. Akordiyonun üzerine gelindiğinde imlecin text işaretçisine dönüşmesini engellemek için de bir cursor tanımı yapabiliriz.
section.aw-accordion .one,
section.aw-accordion .two,
section.aw-accordion .three,
section.aw-accordion .four
font-size:14px;
width:23%;
float:left;
height:230px;
display:inline-block;
z-index:1;
position:relative;
overflow:hidden;
padding:1%;
transition:all 200ms cubic-bezier(0.645, 0.575, 0.090, 1.000);
cursor: default;
Şimdi, muhtemelen herkesin merak ettiği geçişli yazı (text gradient) efektine geliyoruz. Bu konuyu daha önce bol bol konuştuk. Adobewordpress takipçileri yazılara gradient uygulamayı çok iyi biliyorlar. Yeniler veya bilmeyenler için :
CSS ile Yazı Arka Planı : text-fill-color
CSS ile Yazılara Gradient Efekti
Devam edelim. İşte kodlarımız :
section.aw-accordion .one span,
section.aw-accordion .two span,
section.aw-accordion .three span,
section.aw-accordion .four span
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
height:100%;
display:table;
Yazıların üzerlerine gelindiğinde gradient tasarımları gitmeli.
section.aw-accordion .one:hover span,
section.aw-accordion .two:hover span,
section.aw-accordion .three:hover span,
section.aw-accordion .four:hover span
background: -webkit-linear-gradient(left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Şimdi herbir akordiyon öğesinin rengini belirleyelim.
section.aw-accordion .one
background-color:#3498db;
border-radius:10px 0 0 10px;
section.aw-accordion .two
background-color:#e74c3c;
section.aw-accordion .three
background-color:#1abc9c;
section.aw-accordion .four
background-color:#f1c40f;
border-radius:0 10px 10px 0;
Üzerlerine gelindiğinde, eğer içerik uzunsa scroll gözükmeli.
section.aw-accordion .one:hover,
section.aw-accordion .two:hover,
section.aw-accordion .three:hover,
section.aw-accordion .four:hover
overflow-y: auto;
Şimdi de tasarımımıza özel bir scrollbar çubuğu hazırlayalım.
section.aw-accordion div::-webkit-scrollbar
width: 12px;
section.aw-accordion div::-webkit-scrollbar-track
background-color: rgba(1, 1, 1, .1);
section.aw-accordion div::-webkit-scrollbar-thumb
background-color: rgba(1, 1, 1, .2);
section.aw-accordion div::-webkit-scrollbar-thumb:hover
background-color: rgba(1, 1, 1, .3);
Akordiyon resimlerini ve başlıklarını düzeltelim.
section.aw-accordion div img
float:left;
margin:0 10px 0 0;
border:3px solid rgba(255, 255, 255, .2);
box-shadow:0 0 15px rgba(1, 1, 1, .1);
-webkit-box-shadow:0 0 15px rgba(1, 1, 1, .1);
-moz-box-shadow:0 0 15px rgba(1, 1, 1, .1);
width:150px;
section.aw-accordion div img,
section.aw-accordion div h1
opacity:.3;
transition:all .3s
section.aw-accordion div:hover img,
section.aw-accordion div:hover h1
opacity:1;
section.aw-accordion div h1
margin:0 0 5px;
font-weight:300;
color:white;
1024 ve 768 piksel altındaki cihazlara özel responsive tasarımlar oluşturalım.
@media (max-width:1024px)
section.aw-accordion .one,
section.aw-accordion .two,
section.aw-accordion .three,
section.aw-accordion .four
font-size:12px;
section.aw-accordion div img
width:100px;
section.aw-accordion div h1
font-size:120%
@media (max-width:768px)
section.aw-accordion div img
width:60px;
section.aw-accordion div h1
font-size:100%
Tasarımımız hazır. Şimdi işe biraz fonksiyonelite katalım.
İşin jQuery tarafında da farenin akordiyon üzerindeki hareketini takip edeceğiz. Genişlikleri de bu şekilde yöneteceğiz. Ayrıca hover edilen bir akordiyonun scroll ile aşağı inmesi halinde her mouseout aşamasında scrollTop konumunu işleyeceğiz. İşte jQuery kodlarımız.
$( "section.aw-accordion div" ).mouseover(function()
$(this).css('width','50%');
$(this).siblings('div').css('width','14%');
);
Üzerine gelinen öğeyi 50% genişliğe çekiyoruz. Sağ ve soldan 1% değerdeki padding bize toplamda 52% oranında genişlik vermekte. Geriye kalan 48% lik oranıda 16%(her biri 14% olan akordiyonları %2 şer padding ile büyütüyoruz) genişliğinde 3’e bölüyoruz.
Bu kadar!
Birçok Adobewordpress takipçisinden derslerde Türkçe terimler kullanmadığımız için tepkiler almaktayız. Yine benzer oranda yabancı takipçimiz de niye İngilizce hazırlamadığımız yönünde şikayetlerini bildirmekte. Özellikle video derslerimiz için.
İngilizce içerik üretmek gibi radikal kararı almayı henüz düşünmüyoruz. Ancak tanımlarımızın İngilizce olması, Adobe derslerinin İngilizce dili ayarlanmış programlarla sürdürülüyor olması herkesin faydasına. Hem sizlerin teknik dile aşina olmanızı hem de yabancı takipçilerimizin süreci anlamasını sağlıyor.
Bu makalemizde de yabancı terimler geçtiği için fikirlerimizi sizlerle paylaşmak istedik. Anlayışınız için teşekkürler.
Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.
Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.
Eğer hazırsanız başlayalım.
Hazırlayacağımız tasarım JavaScript içermiyor. Hatta ihtiyaç duyduğu CSS tanımları da çok fazla sayılmaz. Ancak clip-path ve transform-origin’in yanısıra :before ve :after tanımlarını içermekte. Bu yüzden dersin derecesini ‘zor’ olarak işaretlemeyi uygun gördük.
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.
Bir nav öğesi içerisine menümüzü hazırlayalım.
<nav class="material">
<div class="navicon">
<div></div>
</div>
<a>Home</a>
<a>Notifications</a>
<a>Messages</a>
<a>Profile</a>
<a>Settings</a>
</nav>
Material Design’ın ruhunu taşayan bir arkaplan ve yazıtipi kullanmanızı önermiştik. Mesela şöyle bir body tanımı işinizi kolaylaştırabilir.
body
font: 100% 'Roboto';
background: #303f9f;
Şimdi de nav öğemiz için kırpma işlemini yapıp genel önyüzü oluşturacak tanımları girelim.
nav.material
width: 300px;
background: white;
color: rgba(0, 0, 0, 0.87);
-webkit-clip-path: circle(24px at 30px 24px);
clip-path: circle(24px at 32px 24px);
-webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
Nav öğesi hover edildiğinde ne olacak?
nav.material:hover
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-duration: 0.75s;
transition-duration: 0.75s;
-webkit-clip-path: circle(390px at 225px 24px);
clip-path: circle(390px at 150px 24px);
Linklerimizi stilize edelim.
nav.material a
display: block;
line-height: 50px;
padding: 0 20px;
color: inherit;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
nav.material a:hover
background: #ffe082;
nav.material a:active
background: #ffca28;
Aç/kapa düğmemiz.
.navicon
padding: 23px 20px;
cursor: pointer;
-webkit-transform-origin: 32px 24px;
-ms-transform-origin: 32px 24px;
transform-origin: 32px 24px;
Ve yine aç/kapa düğmesinin detayları :
.navicon div
position: relative;
width: 20px;
height: 2px;
background: rgba(0, 0, 0, 0.87);
.navicon div:before, .navicon div:after
display: block;
content: "";
width: 20px;
height: 2px;
background: rgba(0, 0, 0, 0.87);
position: absolute;
.navicon div:before
top: -7px;
.navicon div:after
top: 7px;
Bu kadar.
Uzun bir süre minimalist yapıdaki tasarım öğelerini konuştuktan sonra bu yapıyı bol animasyonla süsleyen Material Design anakonumuz olur hale geldi.
Peki ya siz Material Design hakkında neler düşünüyorsunuz?
Bu hafta sizlerle Colorlib tarafından hazırlanan Dazzling temasını paylaşıyor olacağız. Türkçede göz ‘kamaştırıcı’ anlamına gelen Dazzling isminin hakkını veriyor.
Yeşil tonlamaların hakim olduğu tasarımda klasik bir blog yapısı Bootstrap altyapısıyla destekleniyor. Barındırdığı şık footer tasarımı da koyu tonlamalarıyla bütünlüğü koruyor.
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.
Günümüz web tasarımının en popüler HTML, CSS ve JS frameworklerinden biri olan Bootstrap bünyesinde yüzlerce class barındırmakta. Liste bu kadar uzun olunca hatırlanması da güçleşiyor.
Adobewordpress sizler için bu geniş listeyi tek ekranda topluyor.
Bootstrap’in en önemli yapı taşları kullandığı ızgaraları. İşte bu yapıyı destekleyen classlar :
| visible-xs | Öğeyi sadece 768px altı ekran genişliklerinde gösterir. |
| .visible-sm | Öğeyi sadece 768px ile 992px arasındaki altındaki ekran genişliklerinde gösterir. |
| .visible-md | Öğeyi sadece 992px ile 1200px arasındaki altındaki ekran genişliklerinde gösterir. |
| .visible-lg | Öğeyi sadece 1200px üstü ekran genişliklerinde gösterir. |
| .visible-#-block | Öğeyi belirteceğiniz ekran genişliğinde block yapıda gösterir. |
| .visible-#-inline | Öğeyi belirteceğiniz ekran genişliğinde inline yapıda gösterir. |
| .visible-#-inline-block | Öğeyi belirteceğiniz ekran genişliğinde inline-block yapıda gösterir. |
| .hidden-xs | Öğeyi sadece 768px altı ekran genişliklerinde gizler. |
| .hidden-sm | Öğeyi sadece 768px ile 992px arasındaki ekran genişliklerinde gizler. |
| .hidden-md | Öğeyi sadece 992px ile 1200px arasındaki ekran genişliklerinde gizler. |
| .hidden-lg | Öğeyi sadece 1200px üstü ekran genişliklerinde gizler. |
| .container | Sabit genişliğe sahip çerçeveyi ekler. Genellikle wrapper yapısı için kullanılır. |
| .container-fluid | 100% genişliğe sahip çerçeveyi ekler. Genellikle wrapper yapısı için kullanılır. |
| .row | Öğenin sağındaki ve solundaki marginleri temizler. |
| .col-xs-# | Öğenin 768px altındaki ekran genişliklerinde erişeceği grid genişliğini belirler. |
| .col-sm-# | Öğenin 768px ile 992px arasındaki ekran genişliklerinde erişeceği grid genişliğini belirler. |
| .col-md-# | Öğenin 992px ile 1200px arasındaki ekran genişliklerinde erişeceği grid genişliğini belirler. |
| .col-lg-# | Öğenin 1200px üstü ekran genişliklerinde erişeceği grid genişliğini belirler. |
| .col-xs-offset-# | Öğenin 768px altındaki ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler. |
| .col-sm-offset-# | Öğenin 768px ile 992px arasındaki ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler. |
| .col-md-offset-# | Öğenin 992px ile 1200px arasındaki ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler. |
| .col-lg-offset-# | Öğenin 1200px üstü ekran genişliklerinde sağından ve solundan kaç grid genişliğinde ittirileceğini belirler. |
Bootstrap ile tablolarınızı yönetmenizi sağlayan classlar da şöyle:
| table | Table öğelerinin temel yapısıdır. |
| .table-striped | Her tür öğesinin farklı renkte (taramalı) gözükmesini sağlar. |
| .table-hover | Tablodaki tr öğeleri üzerine gelince renk değiştirir. |
| .table-bordered | Tabloya border uygulanmasını sağlar. |
| .table-condensed | Tablonun hücre genişliklerini yarı yarıya daraltır. |
| .active | Tablo satırlarına hover olunca aldığı renk varsayılan olarak eklenir. |
| .success | Tablo satırlarına başarılı ve pozitif algı bırakan yeşil renk eklenir. |
| .info | Bilgi mesajları içeren tablo satırları için kullanılabilir. |
| .warning | Uyarı mesajları içeren tablo satırları için kullanılabilir. |
| .danger | Hata mesajları içeren tablo satırları için kullanılabilir. |
Bootstrap ile formlarınızı yönetmenizi sağlayan classlar da şöyle:
| .form-control | Input, textarea veya select gibi form öğelerini Bootstrap tasarımına çevirir. |
| .input-lg | Inputları büyük boyda gösterir. |
| .input-sm | Inputları orta boyda gösterir. |
| .form-group | Label ve input gibi form öğelerini kapsayan divisionlara verilebilecek class. |
| .form-inline | İçerisinde bulunan tüm öğeleri inline yapıya çeviren form classı. |
Bootstrap ile butonlarınızı yönetmenizi sağlayan classlar da şöyle:
| btn | Buton öğelerinin temel yapısıdır. |
| .btn-default | Klasik(gri) yapısındaki buton tasarımını gösterir. |
| .btn-primary | Birincil(mavi) yapısındaki buton tasarımını gösterir. |
| .btn-success | Başarılı(yeşil) yapısındaki buton tasarımını gösterir. |
| .btn-info | Bilgi(açık mavi) yapısındaki buton tasarımını gösterir. |
| .btn-warning | Uyarı(sarı) yapısındaki buton tasarımını gösterir. |
| .btn-danger | Hata(kırmızı) yapısındaki buton tasarımını gösterir. |
| .btn-link | Butonları link yapısına çevirir. |
| .btn-lg | Büyük boy butonlar oluşturur. |
| .btn-sm | Orta boy butonlar oluşturur. |
| .btn-xs | Küçük butonlar oluşturur. |
| .btn-block | Blok yapıda 100% genişlikte butonlar oluşturur. |
Yazılarınızı aşağıdaki classları kullanarak şekillendirebilirsiniz.
| text-left | Yazıları sola hizalar. |
| .text-center | Yazıları ortaya hizalar. |
| .text-right | Yazıları sağa hizalar. |
| .text-justify | Yazıları içerisindeki öğeyi kaplayacak şekilde hizalar. |
| .text-nowrap | Yazıların satır atlamasını engeller. |
| .text-lowercase | Yazıları küçük harflere çevir. |
| .text-uppercase | Yazıları büyük harflere çevir. |
| .text-capitalize | Yazıların ilk harfini büyütür. |
| .text-muted | Yazıları soluk(gri) renge çevirir. |
| .text-primary | Yazıları mavi renge çevirir. |
| .text-success | Yazıları yeşil renge çevirir. |
| .text-info | Yazıları koyu mavi renge çevirir. |
| .text-warning | Yazıları sarı renge çevirir. |
| .text-danger | Yazıları kırmızı renge çevirir. |
Bootstrap ile uyarılar ve hatırlatmalar vermenizi sağlayan alert yapısını kontrol etmenizi sağlayan classlar da şöyle:
| .alert | Alert öğelerinin temel yapısıdır. |
| .alert-success | Başarı mesajları gösterir. |
| .alert-danger | Hata mesajları gösterir. |
| .alert-warning | Uyarı mesajları gösterir. |
| .alert-info | Bilgi mesajları gösterir. |
Bootstrap ile resimlerinizi yönetmenizi sağlayan classlar da şöyle:
| .img-rounded | Resimlere köşelerini yuvarlar. |
| .img-circle | Resimleri tam border-radius tanımıyla yuvarlak hale getirir. |
| .img-thumbnail | Resimlere çerçeve ekler. |
| .img-responsive | Resimlerin tarayıcı boyutuna göre ölçülerinin değişmesini sağlıyor. |
Bootstrap ile arkaplanlarınızı yönetmenizi sağlayan classlar da şöyle:
| .bg-primary | Mavi arkaplan ekler. |
| .bg-success | Yeşil arkaplan ekler. |
| .bg-info | Açık mavi arkaplan ekler. |
| .bg-warning | Sarı arkaplan ekler. |
| .bg-danger | Kırmızı arkaplan ekler. |
Bootstrap ile listelerinizi yönetmenizi sağlayan classlar da şöyle:
| list-unstyled | İlgili listenin list-style tanımını none olarak değiştirir. |
| .list-inline | Listeyi inline yapıya büründürür. Ayrıca list-style tanımını da none olarak değiştirir. |
Bootstrap ile labellarınızı yönetmenizi sağlayan classlar da şöyle:
| label | Label öğelerinin temel yapısıdır. |
| .label-default | Klasik(gri) yapısındaki label tasarımını gösterir. |
| .label-primary | Birincil(mavi) yapısındaki label tasarımını gösterir. |
| .label-success | Başarılı(yeşil) yapısındaki label tasarımını gösterir. |
| .label-info | Bilgi(açık mavi) yapısındaki label tasarımını gösterir. |
| .label-warning | Uyarı(sarı) yapısındaki label tasarımını gösterir. |
| .label-danger | Hata(kırmızı) yapısındaki label tasarımını gösterir. |
Bootstrap ile panellerinizi yönetmenizi sağlayan classlar da şöyle:
| panel | Panel öğelerinin temel yapısıdır. |
| .panel-default | Klasik(gri) yapısındaki panel tasarımını gösterir. |
| .panel-primary | Birincil(mavi) yapısındaki panel tasarımını gösterir. |
| .panel-success | Başarılı(yeşil) yapısındaki panel tasarımını gösterir. |
| .panel-info | Bilgi(açık mavi) yapısındaki panel tasarımını gösterir. |
| .panel-warning | Uyarı(sarı) yapısındaki panel tasarımını gösterir. |
| .panel-danger | Hata(kırmızı) yapısındaki panel tasarımını gösterir. |
Bootstrap ile progress barlarınızı yönetmenizi sağlayan classlar da şöyle:
| progress | Progress öğelerinin temel yapısıdır. |
| .progress-bar | Progress öğelerinin stilize eden temel yapıdır. |
| .progress-bar-success | Başarılı(yeşil) yapısındaki yükleme çubuğu tasarımını gösterir. |
| .progress-bar-info | Bilgi(mavi) yapısındaki yükleme çubuğu tasarımını gösterir. |
| .progress-bar-warning | Uyarı(sarı) yapısındaki yükleme çubuğu tasarımını gösterir. |
| .progress-bar-danger | Hata(kırmızı) yapısındaki yükleme çubuğu tasarımını gösterir. |
| .progress-bar-striped | Yükleme çubuğu tasarımını çizgilerle süsler. |
| .active | Striped ile eklediğimiz çizgilerin sola doğru kaymasını sağlar. |
Üstteki kategorilere sığdıramadığımız Bootstrap classları:
| .pull-left | Öğeleri float:left tanımıyla sola yaslar. |
| .pull-right | Öğeleri float:right tanımıyla sağa yaslar. |
| .center-block | Öğeyi yatay pozisyonda ortaya taşır. |
| .clearfix | Öğenin başka öğelerle olan ilişkisini kaldırır. Böylece olası float sorunları çözülür. |
| .show | Öğeyi görünür kılar. |
| .hide | Öğeyi görünmez kılar. |
| .breadcrumb | Ol ve ul gibi yapıları ekmek kırıntıları gibi kullanmanızı sağlar. |
| .pagination | Ol ve ul gibi yapıları sayfalama gibi kullanmanızı sağlar. |
| .well | İçe gömülmüş havası veren yapılar oluşturmanızı sağlar. |
| .jumbotron | Basit yapılı ve flexible bir çerçeve oluşturmanızı sağlar. |
| .glyphicon | SVG yapılı iconları kullanmanızı sağlar. |
Bu liste, Bootstrap’e gelen güncellemelerle eş zamanlı olarak yenilenecektir.
Gördüğünüz eksik ve hataları yorum alanında bildirmeniz, daha doğru bir bilgi havuzuna erişmemizi sağlayacaktır. Bu konuda desteklerinizi beklemekteyiz.
İyi çalışmalar.
Web tasarımının klasikleşmiş popup yapıları yerlerini modallara bıraktılar. Sayfa değişimine gerek kalmadan ve yeni sekme açmadan çalışan modal öğeleri web kullanıcılarına büyük kolaylıklar sağlamakta.
İnternette karşılaştığımız neredeyse tüm modal tasarımları da jQuery desteğiyle hazırlanmakta. Ancak gelişen teknolojiler yeni teknikleri de beraberinde getirmekte.
CSS3‘ün :checked selector tanımı sayesinde hiçbir JavaScript kütüphanesine ihtiyaç duymadan hem basit hem de performanslı modal yapısı oluşturabilirsiniz.
Hazırlayacağımız tekniğin fonksiyonelitesini bir checkbox öğesi oluşturacak. Checkbox seçiliyken modal gözükecek, seçim kaldırıldığında da kaybolacak. Özetle işlem bu kadar. Tabii düzgün bir görüntü elde etmek için checkbox’ı kullanıcıdan gizleyeceğiz, onu tetikleyen bir label’i ön plana çıkaracağız.
İlk olarak checkbox öğesini ve onu tetikleyen label elemanını ekleyelim.
<label for="gizli-checkbox" class="modal-ac">Modal</label>
<input id="gizli-checkbox" type="checkbox"/>
Şimdi de açılacak modal yapısını oluşturalım.
<div class="cerceve">
<div class="modal">
<label for="gizli-checkbox" class="kapat">✖</label>
<h2>Modal Başlığı</h2>
<p>
Burası model içeriğinin olacağı yer.
</p>
</div>
</div>
Şimdi bu HTML kodlarını biraz stilize edelim.
Checkbox inputunu gizleyerek işe başlayalım.
input[type='checkbox']#gizli-checkbox
display:none;
Çerçeveyi bir perde gibi kullanmayı unutmayalım.
.cerceve
background: rgba(5, 10, 30, 0.5);
opacity:0;
visibility:hidden;
z-index: 99999;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
Sırada modal yapısının temelini tasarlamak var.
.modal
background-color:white;
width: 45%;
height: 60%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-radius:5px;
padding:10px 15px;
.modal .kapat
float:right;
color:#666;
cursor:pointer;
Şimdi de checkbox işaretlendiğinde tasarımın alacağı aksiyonu belirleyelim.
input[type='checkbox']#gizli-checkbox:checked ~ .cerceve
position:absolute;
z-index:9999;
top:0;bottom:0;left:0; right:0;
opacity:1;
visibility:visible;
Son olarak tasarımın responsive olması için küçük ekranlara özel media sorgularını ekleyelim.
@media (max-width:1280px).modalwidth:70%; height:70%;
@media (max-width:768px).modalwidth:90%; height:90%;
Bu kadar. Modalımız hazır.
Sadece CSS ile hazırlanmış modal yapılarına sıcak bakıyor musunuz?
Yorumlarınızı bekliyoruz.
CSS3PS, Photoshop‘un CS3 ve sonraki versiyonlarda çalışan, katmanları otomatik olarak CSS kodlamasına çeviren bir eklenti. Ücretsiz bir şekilde kullanabileceğiniz bu eklenti sayesinde PSD to CSS çeviri işlemleriniz fazlasıyla hız kazanacak!
Bu kullanışlı PSD to CSS eklentisini aşağıdan indirebilirsiniz.
Adobe Photoshop CS5, CS6 ve CC versiyonları için download et.
Adobe Photoshop CS3 ve CS4 versiyonları için download et.
Plugini indirdikten sonra Photoshop versiyonunuza göre aşağıdaki adımları izleyebilirsiniz.
Photoshop’ta CSS’e convert etmek istediğiniz katmanları seçtikten sonra File > Scripts > CSS3PS alanına gidiyoruz.
Photoshop’ta CSS’e convert etmek istediğiniz katmanları seçtikten sonra File > Scripts > Browse alanına gidiyoruz.
Açılan pencerede CSS3Ps.jsx dosyasını seçiyoruz.
Örnek teşkil etmesi için Photoshop ile bir elips çizip ilgili layerın üzerini sağ tıklıyoruz ve blending options seçimini yapıyoruz. Açılan pencereden gradient overlay ve drop shadow seçenekleriyle aşağıdaki örneğe benzer bir tasarım oluşturuyoruz.
Daha sonra CSS3PS aracılığıyla bu tasarımı CSS3’e convert ediyoruz.
Bu kadar basit.
Adobewordpress sizler için gücünü CSS‘den alan bir Tooltip yapısı hazırladı.
Karşınızda awTooltip
Birkaç küçük temel fonksiyonelitesini jQuery ile kuran yapı geriye kalan tüm işlerini CSS ile oluşturmakta. Bu da tasarımı anlaşılabilir, değiştirilebilir ve kolaylıkla geliştirilebilir bir hale getirmekte.
awtooltip classını verdiğimiz her HTML elemanı üzerinde çalışan eklenti birçok ek tanımlamasıyla da yönetilebilmekte.
Şimdi söz konusu tanımları teker teker tanıyalım.
awTooltip’in öğenin hangi tarafında çıkacağına karar verir. Alabileceği değerler : right, left, top, bottom
tooltip-position="right"
tooltip-position="left"
tooltip-position="top"
tooltip-position="bottom"
awTooltip’in göstereceği bilgiyi belirler.
awTooltip’in rengini, bir yandan da işlevini belirler. Mavi, sarı, kırmızı ve yeşil gibi alternatif renkleri içerir. Alabileceği değerler : primary, success, warning, danger
tooltip-type="primary"
tooltip-type="success"
tooltip-type="warning"
tooltip-type="danger"
İlgili HTML, CSS ve jQuery kodlarını ekleyerek awTooltip’i web sayfanıza ekleyebilirsiniz.
Kullanımı örneklendirecek olursak;
<a href="adobewordpress.com" class="awtooltip" tooltip-position="left" tooltip-type="success" tooltip="Bu bir örnektir.">Deneme</a>
awTooltip’in tüm yükünü jQuery’e değil CSS’e ekliyoruz.
.awtooltip
position: relative;
display: inline;
.awtooltip span
font:300 12px 'Open Sans', sans-serif;
position: absolute;
color: #FFFFFF;
background: #000000;
padding:5px 10px;
width:140px;
text-align: center;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
.awtooltip > span imgmax-width:140px;
.awtooltip[tooltip-position="top"] span
margin-left:10px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
.awtooltip[tooltip-position="bottom"] span
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
.awtooltip[tooltip-position="left"] span
margin-top:30px;
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
.awtooltip[tooltip-position="right"] span
margin-top:30px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
.awtooltip span:after
content: '';
position: absolute;
width: 0; height: 0;
.awtooltip[tooltip-position="top"] span:after
top: 100%;
left: 50%;
margin-left: -8px;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
.awtooltip[tooltip-position="bottom"] span:after
bottom: 100%;
left: 50%;
margin-left: -8px;
border-bottom: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
.awtooltip[tooltip-position="left"] span:after
top: 50%;
left: 100%;
margin-top: -8px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
.awtooltip[tooltip-position="right"] span:after
top: 50%;
right: 100%;
margin-top: -8px;
border-right: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
.awtooltip:hover span
visibility: visible;
opacity: 0.9;
z-index: 999;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
filter: alpha(opacity=90);
.awtooltip[tooltip-position="top"]:hover span
bottom: 30px;
left: 50%;
margin-left: -76px;
.awtooltip[tooltip-position="bottom"]:hover span
top: 30px;
left: 50%;
margin-left: -76px;
.awtooltip[tooltip-position="left"]:hover span
right: 100%;
top: 50%;
margin-top: -15px;
margin-right: 15px;
.awtooltip[tooltip-position="right"]:hover span
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
.awtooltip[tooltip-type="primary"] > span
background-color:#2980b9;
.awtooltip[tooltip-type="primary"][tooltip-position="top"] > span:after
border-top: 8px solid #2980b9;
.awtooltip[tooltip-type="primary"][tooltip-position="bottom"] > span:after
border-bottom: 8px solid #2980b9;
.awtooltip[tooltip-type="primary"][tooltip-position="left"] > span:after
border-left: 8px solid #2980b9;
.awtooltip[tooltip-type="primary"][tooltip-position="right"] > span:after
border-right: 8px solid #2980b9;
.awtooltip[tooltip-type="success"] > span
background-color:#27ae60;
.awtooltip[tooltip-type="success"][tooltip-position="top"] > span:after
border-top: 8px solid #27ae60;
.awtooltip[tooltip-type="success"][tooltip-position="bottom"] > span:after
border-bottom: 8px solid #27ae60;
.awtooltip[tooltip-type="success"][tooltip-position="left"] > span:after
border-left: 8px solid #27ae60;
.awtooltip[tooltip-type="success"][tooltip-position="right"] > span:after
border-right: 8px solid #27ae60;
.awtooltip[tooltip-type="warning"] > span
background-color:#f39c12;
.awtooltip[tooltip-type="warning"][tooltip-position="top"] > span:after
border-top: 8px solid #f39c12;
.awtooltip[tooltip-type="warning"][tooltip-position="bottom"] > span:after
border-bottom: 8px solid #f39c12;
.awtooltip[tooltip-type="warning"][tooltip-position="left"] > span:after
border-left: 8px solid #f39c12;
.awtooltip[tooltip-type="warning"][tooltip-position="right"] > span:after
border-right: 8px solid #f39c12;
.awtooltip[tooltip-type="danger"] > span
background-color:#c0392b;
.awtooltip[tooltip-type="danger"][tooltip-position="top"] > span:after
border-top: 8px solid #c0392b;
.awtooltip[tooltip-type="danger"][tooltip-position="bottom"] > span:after
border-bottom: 8px solid #c0392b;
.awtooltip[tooltip-type="danger"][tooltip-position="left"] > span:after
border-left: 8px solid #c0392b;
.awtooltip[tooltip-type="danger"][tooltip-position="right"] > span:after
border-right: 8px solid #c0392b;
Sırada jQuery kodlarımız var.
Ö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>
Hemen altına da aşağıdaki kodları eklemeniz awTooltip’in çalışması için yeterli olacaktır.
$('.awtooltip').append("<span></span>");
$('.awtooltip:not([tooltip-position])').attr('tooltip-position','bottom');
$(".awtooltip").mouseenter(function()
$(this).find('span').empty().append($(this).attr('tooltip'));
);
awTooltip geliştirilmeye devam etmekte. Bu yüzden eklentiyle ilgili küçük çaplı problemler yaşamanız muhtemel. Önerilerinizi yorum bölümünde beklemekteyiz.
Seriyi bozmuyoruz ve yine HTML5 up tarafından hazırlanmış şık bir temayla sizlerle buluşuyoruz : Aerial
600 MB’dan oluşuyor olması sizleri şaşırtmasın, geçişli bir arkaplana sahip bu tema tek bir ekrandan oluşmakta. Özellikle kişisel kullanım için uygun bu tasarım Font Awesome ile sosyal ağ ikonlarını anasayfanıza eklemenizi sağlıyor.
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.
Adobewordpress alarak bir süre önce “Sticky Header” yapımı üzerine detaylı bir makale hazırlamıştık. Bugün de yine benzer bir yapı kullanarak kaydırma çubuğu yukarı sürüklendiğinde beliren bir header tasarlayacağız.
Kaydırma çubuğu yukarı sürüklendiğinde gözüken header temelinde kullanıcı deneyimini hedef almaktadır. Eski tasarım trendlerinde, üst kısımdaki headera erişmek için sayfanın en üstüne çıkardık. Bu algı zamanla benliklerimizde yer etti. Sticky headerın da popülerleşmesiyle birlikte bazı tasarımcılar bu algıyı kullanarak sadece yukarı scroll edildiğinde gözüken headerlar tasarlamaya başladı. Böylece hem mobilde sürekli ekranı takip eden bir jQuery yükünü sırtlamamış oldular hem de özgün bir tasarım meydana çıkardılar. Özetle scroll-to-top (yukarı çık) geleneğini bitirdiler.
Peki bu tasarım nasıl hazırlanır?
HTML ve CSS‘in yanısıra jQuery desteğine de ihtiyacımız olacak. İlk olarak HTML kodlarımız ile başlayalım.
Web sayfanızdaki header öğesine yapiskan classını eklemeniz yeterli.
<header class="yapiskan">STICKY HEADER</header>
Şimdi de yapiskan tanımını detaylandıralım. İlk olarak fixed pozisyonlama yaptığımız öğeyi left ve top tanımlamalarıyla üste yerleştirelim. CSS transition ile de giriş ve çıkışlardaki animasyon geçişlerini oluşturalım.
.yapiskan
position: fixed;
left:0;
top:0;
width:100%;
transition: top .5s;
Şimdi de yukarı scroll edilmesi halinde aktif edilecek classları ekleyelim.
.gizle
top: -89px;
.sabit
top:0;
z-index: 9999;
Sırada işlevselliği katacak jQuery kodlarımız var.
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere,
Sadece CSS3‘ün geçiş efektlerini ve Font Awesome’ın şık ikonlarını kullarak etkileyici butonlar tasarlamak mümkün. Adobewordpress, üzerlerine gelince istediğiniz yönde animasyon geçişleri yapan bu butonları olabildiğince basit ve performanslı olarak sizler için hazırladı.
Font Awesome ikon setini yükleyelim. Bu kodları head elemanı içerisine ekleyebilirsiniz.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" >
Biz yukarıda Font Awesome’ı kendi sunucusu üzerinden çağırdık. Önerimiz bu CSS dosyasını download edip kendi sunucunuz üzerinde yayımlamanız yönünde.
Şimdi de genel ve her türden butonumuz için ihtiyaç duyacağımız CSS kodlarımız ile başlayalım.
.buton
position: relative;
border: 0;
font:300 14px 'Open Sans';
color: #FFFFFF;
padding: 10px 15px;
border-radius:3px;
display: inline-block;
margin: 5px;
cursor: pointer;
overflow: hidden;
outline:none;
background: -webkit-linear-gradient(left, #2a83be 40px, #3498db 0);
.buton > span > i.fa
margin-right:20px;
.buton > *
position: relative;
z-index: 5;
.buton-saga:after, .buton-sola:after, .buton-yukari:after, .buton-asagi:after
position: absolute;
background: #2a83be;
width: 100%;
height: 100%;
content: "";
-webkit-transition: 1s cubic-bezier(0.165, 0.85, 0.45, 1);
transition: 1s cubic-bezier(0.165, 0.85, 0.45, 1);
İskeletimiz, geçiş animasyonlarımız, boyutlandırmalarımız ve benzeri tüm stillerimiz artık hazır. Artık animasyon ve geçiş yönlerini belirtelim.
.buton-saga:hover:after
left: 0;
.buton-saga:after
top: 0;
left: -100%;
.buton-sola:hover:after
right: 0;
.buton-sola:after
top: 0;
right: -100%;
.buton-yukari:hover:after
bottom: 0;
.buton-yukari:after
bottom: -100%;
left: 0;
.buton-asagi:hover:after
top: 0;
.buton-asagi:after
top: -100%;
left: 0;
CSS tarafındaki son yapmamız gereken de renklendirmeleri eklemek :
.buton-kirmizi
background: -webkit-linear-gradient(left, #c0392b 40px, #e74c3c 0);
.buton-kirmizi:after
background-color:#c0392b;
.buton-yesil
background: -webkit-linear-gradient(left, #27ae60 40px, #2ecc71 0);
.buton-yesil:after
background-color:#27ae60;
.buton-sari
background: -webkit-linear-gradient(left, #e67e22 40px, #f39c12 0);
.buton-sari:after
background-color:#e67e22;
Tasarımlarımız hazır. Şimdi HTML ile butonlarımıza hayat verelim!
Biz 7 adet butonun HTML kodlarını paylaşacağız. Ancak basit CSS kodlarımız sayesinde farklı renk ve boyutlarda, hatta yeni animasyonlarda butonlar hazırlayabilirsiniz.
<button class='buton buton-sola'>
<span><i class="fa fa-chevron-left"></i> .buton .buton-sola</span>
</button>
<button class='buton buton-saga'>
<span><i class="fa fa-chevron-right"></i> .buton .buton-saga</span>
</button>
<button class='buton buton-yukari'>
<span><i class="fa fa-chevron-up"></i> .buton .buton-yukari</span>
</button>
<button class='buton buton-asagi'>
<span><i class="fa fa-chevron-down"></i> .buton .buton-asagi</span>
</button>
Aynı Bootstrap’in yaptığı gibi disabled, warning, danger, success ve primary tanımlamalarına uygun renklendirmeler hazırladık.
<button class='buton buton-sola buton-sari'>
<span><i class="fa fa-bolt"></i> .buton-sari</span>
</button>
<button class='buton buton-yukari buton-yesil'>
<span><i class="fa fa-search"></i> .buton-yesil</span>
</button>
<button class='buton buton-asagi buton-kirmizi'>
<span><i class="fa fa-check"></i> .buton-kirmizi</span>
</button>
<button class='buton buton-saga buton-gri'>
<span><i class="fa fa-adjust"></i> .buton-gri</span>
</button>
Artık JPG, GIF ve PNG gibi formatlarda hazırlanan resim butonların devri kapandı. Daha performanslı ve SEO uyumlu CSS butonlar her yerde görmek mümkün. Hal böyleyken bizlerde buton tasarımı konularımıza bir yenisini eklemek istedik.
Yorumlarınızı bekliyoruz.
Büyük emekler harcayarak hazırladığınız içerikler ikinci sayfaya düştüğünde unutulup gidiyor mu? Dert etmeyin.
WordPress‘in Revive Old Post isimli eklentisi sayesinde unutulmaya yüz tutmuş konularınızı Twitter, Facebook ve LinkedIn hesaplarınızda otomatik paylaşarak takipçilerinize tekrar ve tekrar servis edebilirsiniz.
Hem de ücretsiz!
Slider türü sunumların web tarafındaki temeli eski ve önemli olduğu düşünülen içerikleri sürekli ziyaretçinin gözünün önünde tutmaktır. Adobewordpress’in de Öne Çıkanlar kategorisinin amacı önemli içerikleri kolay erişilebilir kılmaktı. Ancak sosyal medyadaki interaktivitenin artmasıyla bu sorunu başka yollarla çözer olduk.
Biz bu makaleyi yazarken ilgili eklenti sayesinde sosyal ağlarımızda üstteki bildiri dönmekte.
Eklentinin kurulumuna geçmeden önce size bir sürprizimiz daha var.
Türkçeleştirme dosyaları yakın zamanda resmileşerek eklenti sayfasında da bildirilecektir. Ancak beklemek istemiyorsanız Türkçeleştirme dosyalarını aşağıdan indirebilirsiniz.
Eklenti tamamıyla ücretsiz.
WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.
Download Adresi : Tweet Old Post
Eklenti içerisine hazırladığımız Türkçe paketin yakın zaman içerisinde dahil edilmesini umuyoruz. Ancak o zamana kadar bu işlemi manuel yapmanız gerekmekte. Aşağıdaki adımları izleyerek Tweet Old Post’u Türkçeye çevirebilirsiniz.
Türkçe Paket : tweet-old-post-tr.zip
Eklentiyi aktif ettikten sonra wp-admin menüsüne Revive Old Post isimli bir alan eklenmekte. Bu alandan yine Revive Old Post alanını seçerek eklentinin genel ayarlarını yaptığımız ekrana geliyoruz.
Bu alanda en çok dikkat çeken seçeneklerden biri de tekrar paylaşıma sunulan içeriğin yükselişini Google Analytics ile takip edebiliyor olmanız. Bu seçenek eklentiyi rakiplerinin bir adım önüne taşımakta.
Ayarların herbiri basit ve anlaşılır şekilde hazırlanmış. Eklentiyi hiç bilmediğiniz bir dilde kullanıyor olsanız bile süreci kavramanız yine de mümkün. Özellikle sizler için hazırladığımız Türkçe paketi de kurduysanız kafanızdaki tüm soru işaretleri yok olacaktır.
Tüm ayarlamalarınızı yaptıysanız “Paylaşmaya Başla” düğmesine basın ve eklentiyi çalışır hale getirin.
Eklenti hakkında fikirlerinizi yorum bölümünde bekliyoruz.
İyi çalışmalar.
Makale yazmak zor zanaat. Fakat bir makaleyi hazırlamak için 20 dakikadan fazla vakit harcamak birçoğumuz için lüks. Özellikle iş hayatının yoğunluğu içerisinde bu derece zaman kaybı pek akıl kârı da değil.
Kabul ediyoruz. İnternet gücünü içerikten almakta. Ve bu yarışta sadece güncel ve özgün makalelere sahip olanlar ayakta kalabiliyor. Ancak 2000 kelimelik detaylı makaleler yayımlamak da her yiğitin harcı değil. Hal böyleyken iyi ve bir o kadar da seri bir makale yazarı olmak için yapmanız gerekenleri hızlıca hatırlayalım. Unutmadan, hızlı makale yazmak kaliteden ödün vermek anlamına gelmiyor.
İşte size daha verimli makale yazmak için 8 kritik öneri :
Hazırsanız başlayalım :
Kendinizi zorlayarak hakim olmadığınız bir konuda aceleyle yazacağınız makaleler pişmanlıkları da beraberinde getirir. Konuyu ve aklınızdaki başlığı not alın. Ve bu makaleyi şimdilik yazmayıverin. Fikirlerinizin oluşmasına, bilginizin güçlenmesine müsade edin. İlgili konuya tam olarak hakim olduğunuz da zihniniz size o konuya başka perspektiflerle bakma imkanı da tanıyacaktır. İşte o zaman yaratıcı ve özgün olabilirsiniz.
Makaleyi yazmaya başladığınızda işin kronolojik sıralamasının hazır olması size zaman kazandırır. Böylece makaleyi yazarken tekrar ve tekrar düşünmenize gerek kalmaz. Bunun içinde üzerine yazmak istediğiniz konuları küçük bir word belgesi veya not defterinde kayıt altında tutun.
Birçok yazar için makale konusunu belirlemek sürecin yarısını oluşturmakta. Fikirlerinizden oluşacak bir liste oluşturmak bu süreyi minimize etmekte.
Örneğin şans yüzünüze güldü ve makaleniz için birden fazla konu buldunuz. Arasından en iyisini seçin. Ancak arta kalanları da not almayı unutmayın. Çünkü ileride aynı konuyu tekrar keşfetmek için belki de saatler kaybedeceksiniz.
Güzel bir makaleye başladınız. Ancak bir süre sonra etrafınızda uçuşan ilham perileri kayboluverdi. Ne yapacaksınız?
Gayet basit. İlk olarak makaleyi kaydedin. Daha sonra konuyla tamamıyla alakasız şeylerle uğraşın. Biraz müzik dinleyin, oyun oynayın ya da çıkın dışarı ve hava alın. Hatta başka bir konudaki makaleniz ile bile meşgul olabilirsiniz. İlham perileri tekrar etrafınıza toplanır gibi mi oldu? Dokümanı tekrar açın ve yazmaya devam edin.
Önünüzde tıkanmış bir makale ile beklemeniz size sandığınızdan da fazla zaman kaybettirebilir. O yüzden bu küçük araları kendinize çok görmeyin.
Makalelerinizi detaylandırın. Ancak konu dışına doğru çıkan alt başlıklarınızı daha yazıya dökmeden kırpın. Makalenizin ana konusunu desteklemeyen içerikleriniz hakkında acımasız olmalısınız. Ancak vur dediysek öldürmeyin. Kırptığınız bu alt başlıkları da not alın. Kimbilir ileride bu bilgileri harmanlayarak yeni bir makale oluşturabilirsiniz.
Uzun ve kendi içerisinde parçalara ayrılmamış makaleler kullanıcı gözünde okunabilirliğini yitirir. Bu yüzden sunumlarınızı parçalayarak yapmanız odağı ve dikkati korumanızı sağlar.
Örneğin “Web Tasarımında 5 Popüler Trend” isimli makalemizin daha başlığında, yazı dahilinde bizi 5 ayrı alt başlığın beklediğini görüyoruz. Bu yapıdaki listelemeler okuyucuların ilgisini çeker, gözle takibi kolay kılar.
Hakkaten 20 dakikadan kısa sürede makaleler yazmak gibi bir kaygınız varsa “kısa kesin”, 600 kelimenin üzerine çıkmayın. Korkmayın, kısa makaleler yazıyorsunuz diye içeriğinizden ödün veriyor sayılmazsınız. Bu makale de 600 kelimeden oluşuyor ancak faydalı bilgiler içeriyor.
Üzerine makale hazırlayabilecek konularınıza bakarken yazımı kolay olanları ileri bir tarihe ertelemeyin. Bugün basit diye nitelendirebileceğiniz bir konu yarın sizin için daha meşakkatli bir yapıya bürünebilir. Sizin amacınız zaman kazanmak ve bunu şimdi yapmak. O zaman bu tip ‘çantada keklik’ makaleleri ertelemeyin. Aklınızda yazıya dökülecek fikirler hazırken makalenizi yazın.
Üzerine çalıştığınız bir makaleyle aynı içeriği konu almış başka makaleler olması gayet normal.
Bir konu hakkında birden fazla yazarın fikirlerini okumak size daha geniş bir açıdan bakma imkanı tanır. Bu yüzden makale yazmadan önce aynı konuyu ele almış başka yazılara da göz atın. Bunu yapmak için illa bilgisayar başına oturmanıza gerek yok. Otobüs beklerken, uyumadan önce veya tuvallette bu işe zaman ayırabilirsiniz. Akıllı telefonlar bu yüzden var.
Bu adımları izleyerek makale yazımında harcadığınız eforu ve zamanı oldukça düşürebilirsiniz. Ancak atalarımızın da dediği gibi ‘her yiğidin yoğurt yiyişi farklıdır’.
Peki ya doğru ve verimli makale yazımı için siz neler önerirsiniz? Yorumlarınızı bekliyoruz.
Bu makalemizde klasik bir listeleme (ul) yapısını Facebook’un spinner öğesine çevireceğiz ve bütün bu işlemi sadece birkaç satır CSS kodu ile yapacağız.
Facebook, loading öğesinde 3 adet dikdörtgeni hem pozisyonel hem de ölçüsel olarak stilize ederek bir animasyon döngüsü oluşturuyor. Bu tip kısa süreli ve loop yapısındaki görseller de kullanıcıda yükleme işlemi olduğu izlenimi veriyor. Yani işin kullanıcı deneyimi tarafında Facebook’un yaptığı bu tasarım gayet başarılı.
Peki bu spinner nasıl hazırlanır?
Sıradan bir ul li yapısı bizim için yeterli olacaktır. Facebook’un yaptığı gibi 3 dikdörtgeni animasyona dahil edeceğimiz için 3 adet li kullanalım.
<ul class="yukleniyor">
<li></li>
<li></li>
<li></li>
</ul>
Şimdi bu öğeyi CSS ile tasarlayalım.
İlk olarak ul üzerinden ilerleyelim. Öğeyi tablo yapısına büründürerek çerçevenin sadece ihtiyaç alanı kadar genişlemesini sağlayalım. Beraberinde de list-style-type tanımı ile li elemanlarındaki sıralama görsellerini yok edelim.
ul.yukleniyor
display:table;
list-style-type:none;
Şimdi herbir li öğesi için boyutlandırma ve animasyon atama işlemlerini yapalım.
ul.yukleniyor li
height: 50px;
width: 15px;
margin:3px;
display: inline-block;
-webkit-animation: fbAnimasyon 1s linear infinite;
-moz-animation: fbAnimasyon 1s linear infinite;
animation: fbAnimasyon 1s linear infinite;
Sonra da birinci, ikinci ve üçüncü dikdörtgen için sahneye giriş ve çıkış sürelerini belirtelim. Beraberinde reklendirme işlemini de yapalım.
ul.yukleniyor li:nth-child(1)
-webkit-animation-delay:.4s;
-moz-animation-delay:.4s;
animation-delay:.4s;
background-color: #d6e2ef;
box-shadow: inset 0 0 0 1px rgba(20, 60, 110, 0.1);
ul.yukleniyor li:nth-child(2)
-webkit-animation-delay:.5s;
-moz-animation-delay:.5s;
animation-delay:.5s;
background-color: #5a8abe;
box-shadow: inset 0 0 0 1px rgba(20, 60, 110, 0.4);
ul.yukleniyor li:nth-child(3)
-webkit-animation-delay:.65s;
-moz-animation-delay:.65s;
animation-delay:.65s;
background-color: #3671b0;
box-shadow: inset 0 0 0 1px rgba(20, 60, 110, 0.7);
Son olarak da cross-browser yapıdaki animasyonumuzu kodlarımıza ekleyelim.
@-webkit-keyframes fbAnimasyon
0%
-webkit-transform:scale(1.2);
opacity:1
100%
-webkit-transform:scale(0.7);
opacity:0.1
@-moz-keyframes fbAnimasyon
0%
-moz-transform:scale(1.2);
opacity:1
100%
-moz-transform:scale(0.7);
opacity:0.1
@keyframes fbAnimasyon
0%
transform:scale(1.2);
opacity:1
100%
transform:scale(0.7);
opacity:0.1
Facebook’un ‘yükleniyor’ animasyonunu hazırlamak bu kadar basit. Belki ilginizi çeker diye buna benzer bir diğer örneğimizi de paylaşmak isteriz.
Bu makale ile alakalı fikir ve önerilerinizi aşağıya bekliyoruz.
İyi çalışmalar.
Birkaç hünerli ve hileli CSS satırı ile web sayfanızdaki yazıların üzerini resim ile kaplayabilirsiniz. Daha önce paylaştığımız “CSS ile Yazı Arka Planı : text-fill-color” isimli makalede bu işlemi yapmıştık.
Gelin şimdi bu örneği biraz daha şık hale getirelim. İşin içerisine birkaç satır jQuery kodu ekleyerek yazıya kapladığımız arkaplanın fare imlecini takip etmesini sağlayabiliriz.
İşin CSS tarafında -webkit-background-clip tanımı yardımımıza yetişecek. Geriye kalan kısmı ise jQuery’nin dinamik yapısı halledecek. Hazırsanız başlayalım.
Bir çerçeveye ve onun içerisindeki metin division öğesine ihtiyacımız olacak.
<div class="cerceve">
<div class="metin">ADOBEWORDPRESS</div>
</div>
Şimdi bu kodları CSS ile stilize edelim.
Çerçevemizi sayfanın ortasına çekelim. Böylece tüm ekrandaki fare hareketlerini takip edebilsin. Bu adım atlanabilir ya da değiştirilebilir. Tercih sizin.
.cerceve
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
Şimdi de metin için atayacağımız arkaplanı ve yazı tipini belirtelim.
.metin
color: transparent;
font: 800 100px sans-serif;
background: url("resim.jpg") repeat;
-webkit-background-clip: text;
Sırada işe biraz dinamizm katmak için jQuery kodlarımız var.
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, </body> 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 de bu satırın hemen altına imleci izleme fonksiyonunu ekleyelim.
$(document).ready(function()
var fareX, fareY;
var yatay, dikey;
$(document).mousemove(function(e)
fareX = e.pageX;
fareY = e.pageY;
yatay = ((4 * fareX) / 400) + 40;
dikey = ((4 * fareY) / 400) + 50;
$(".metin").css("background-position": yatay + "%" + dikey + "%");
);
);
Bu kod sayesinde de farenin sayfa üzerindeki hareketi izleyerek metin classlı öğeye background-position atıyoruz.
Yorumlar alanında belirtin, yardımcı olalım.
İyi çalışmalar.
