CSS veya jQuery ile Açılan/Kapanan Div

Gelişen ve yenilenen web tasarımı dilleri sayesinde Toggle, yani fareyle etkileşim kurulduğunda gözüken, etkileşim kesildiğinde kaybolan elemanlar hazırlamak fazlasıyla kolay. Artık, eskiden olduğu gibi bu işlemi yapmak için sayfalarca JavaScript veya Action Script yazmamıza da gerek kalmıyor.

Bu makalemizde Adobewordpress ailesi olarak size iki adet açılıp/kapanan div örneği hazırlayacağız. Bunlardan birisi sadece CSS ile çalışacak, diğeri ise jQuery desteği ile işleyecek.

CSS mi kullanmalı yoksa jQuery mi?

Tercihi yapacak olan sizlersiniz. Kullanıcı kitlenize veya tasarımınıza göre bu seçimi yapabilirsiniz.

CSS ile yapmanızın avantajları/dezavantajları

• jQuery’e ihtiyaç duymadığı için web sayfanızın dosya boyutunda ve açılış hızında düşme olacaktır.


• Hazırlanması kısmen daha kolaydır.


• IE’nin eski versiyonlarında sorun yaratır.


• Gizlenecek ve gösterilecek eleman, ana elemanın etiketleri içerisinde olmalı. Aksi halde tasarım işlemez. Bu da CSS mantığının en büyük handikabı olarak dikkat çekiyor.

jQuery ile yapmanızın avantajları/dezavantajları

• jQuery kütüphanesi neredeyse her sitede kullandığını için size ek bir yük oluşturmayacaktır.


• Hazırlanışı kısmen daha zordur. Sadece CSS değil, birkaç satır JS kodu da yazmanız gerekir.


• Tüm tarayıcılarda kusursuz çalışır.


• Gizlenecek ve gösterilecek eleman, body tagı içerisinde nerede olursa olsun tasarım işler. Bu da jQuery kullanmanız için yeterli bir sebep olarak gösterilebilir.

Üzerine gelince gözüken div nasıl yapılır?

Yukarıda da belirttiğimiz gibi iki ayrı yol üzerinden bu tasarımı oluşturacağız. En sonunda ise Codepen desteğiyle canlı bir örnek paylaşacağız.

CSS ile Yapımı

İlk olarak HTML kodlarımız ile başlayalım.

<div class="css-toggle">CSS ile Gizle/Göster
 <span>Bu eleman <b>.css-toogle</b>'ın içerisinde olması gerek</span>
</div>

Görebileceğiniz gibi yukarıdaki kodlarda span elemanımız css-toogle içerisinde. Böyle de olmak zorunda. Aksi halde çalışmaz.

.css-toggle
 color:white;
 background-color:tomato;

.css-toggle:hover spandisplay:block;

.css-toggle span
 display:none;
 color:#111;

Bu kadar. Sırada jQuery ile yapımı var.

jQuery ile Yapımı

İlk olarak jQuery kütüphanesini sitemize ekleyelim. İster head elemanı içerine ekleyin, istersenizde sitenizin en altında işlemi yapın.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Sırasıyla HTML, CSS ve JS kodlarımızı yazalım.

<div class="js-toggle">jQuery ile Gizle/Göster
 <span>Bu elemanın nerede olduğunun önemi yok.</span>
</div>

Yukarıdaki span elemanı js-toogle içerisinde olmak zorunda değil. Sayfanın neresine koyarsanız koyun, çalışacaktır.

.js-toggle
 color:white;
 background-color:CornflowerBlue;


.js-toggle span
 display:none;
 color:#111;

Ve son olarak JS kodlarımızı ekleyelim.

 $(".js-toggle, .js-toggle span").on("mouseenter", function() 
 $(".js-toggle span").css( "display", "block" );
 ).on("mouseleave", function() 
 $(".js-toggle span").css( "display", "none" );
 );

İşlem tamam! Şimdi sonucu görüntüleyelim.

Kapanış

Google’da her gün yüzlerce kez aranan bir konu tasarımalrdaki Toggle mantığı. Geçtiğimiz hafta sadece bu konuyla alakalı iki adet elektronik posta tarafımıza gönderildiği için sizlere hızlıca bu makaleyi hazırladık.

Sonuç

CSS veya jQuery ile Açılan/Kapanan Div

Görsellerinize Pinterest (Pin it) butonunu ekleyin

Pinterest günümüz internetinin en büyük sosyal ağlarından birisi. Eğer doğru kullanılırsa bu ağ sayesinde web sayfanıza inanılmaz büyük bir trafik oluşturabilirsiniz. Görselleri bol olan bir web sayfasına sahipseniz, özellikle fotoğraf ve portfolio konularını işliyorsanız Pinterest’e dahil olmanız kaçınılmaz.

Bu makalemizde WordPress sitemizdeki görsellere kolay bir şekilde “Pin it” butonu ekleyeceğiz.

jQuery Pin It Button for Images

Bu uygulamayı yapan onlarca eklenti var. Geçtiğimiz günlerde en popüler 5 eklentiyi kurup inceledik. Bir kısmı görsellerin linklerini bozuyor, bir kısmı da görsellerin sağına veya soluna yazılmış metinleri aşağı satıra atıyor. Fakat aralarından bir tanesi gayet kolay bir şekilde kuruluyor ve çalışıyor.

Bu eklenti sayesinde kapsamlı kontrol paneline sahip “Pin it” buttonlarını görsellerimize ekliyoruz. İlk olarak kurulum hakkında konuşalım. Daha sonra eklentiyi biraz tanıyalım.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : jQuery Pin It Button For Images

Detaylar

Eklentiyi Wp-admin‘de Ayarlar > jQuery Pin It Button For Images Options alanından yönetebiliyoruz. Selection, Visual ve Advanced olmak üzere 3 ayar tabımız mevcut. Bu alanlardaki özellikleri teker teker tanıyalım.

Selection

• Image selector : jQuery selector ile hangi classlara “Pin it” butonu ekleneceğini seçiyoruz.


• Disabled classes : Hangi classlarda “Pin it” butonu gösterilmeyeceğini seçiyoruz.


• Enabled classes : “Pin it” butonunu dahil etmek istediğimiz ek CSS classlarını tanımlıyoruz.


• On which pages the “Pin it” button should be shown : Hangi sayfalarda “Pin it” gözüksün.


• Minimum resolution that should trigger the “Pin it” button to show up : Hangi boyutlardan büyük görsellerde “Pin it” gözüksün.

Visual

• Mode : Dinamik ve statik olmak üzere iki seçeneğimiz var. Statik görsel üzerine div katmanı atayarak farklı kaydedilmesini de engelliyor. Dinamik ise bu işlemi yapmıyor. Önerimiz dinamik yapıyı kullanmanız.


• Description source : Paylaşımda kullanılacak Pin’in başlığı.


• Transparency value : Görsellerin üzerine gelince uygulanacak şeffaflık oranı.


• Custom “Pin It” button : Kendi “Pin it” butonunu eklememizi sağlıyor.


• “Pin it” button position : Butonun gözükeceği pozisyonu belirlememizi sağlıyor.


• “Pin it” button margins : Butonun margin değerlerini belirlememizi sağlıyor.


• Retina friendly : Retine dostu butonlar eklememizi sağlıyor.

Advanced

• Debug : Eklentinin gelişimine katkıda bulunmamızı ve sorunları bildirmemizi sağlıyor.


• Container selector : Makaleyi çevreleyen konteynırı belirtmemizi sağlıyor.

Kapanış

Pinterest, Türkiye’de artık fazlasıyla popüler. Bu büyüklükte bir sosyal ağın dışında kalmak istemezsiniz. Geç kalmadan tüm görsellerinize “Pin it” butonu ekleyin ve Pinterest üzerinde de yerinizi alın.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

Görsellerinize Pinterest (Pin it) butonunu ekleyin

CSS ile Şık Bildirimler

Web sayfanız için özel bildiri kutucukları hazırladınız mı? Cevabınız hayır ise doğru yerdesiniz.

Bugün 4 klasik uyarı için bildiri kutucuğu tasarlayacağız. Hata, uyarı, bilgi ve başarı bildirimleriniz artık daha şık ve kontrol edilebilir olacaklar.

Ekleyeceğimiz inline JavaScript kodları da bu kutucukların kapatılabilir olmasını sağlayacak. Tasarımı daha ilgi çekici hale getirmek için de CSS-transition kullanacağız.

Nasıl yapılır?

Uyarı pencerelerini blockquote elemanı üzerinden tasarlayacağız. İlk olarak genel tanımlamalarımızı yapalım. Biz font tercihimizi Open Sans’dan yana kullandık. O yüzden ilk olarak bu fontu Google Web Fonts‘dan çekelim.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Şimdi genel CSS tanımlamalarımızı ekleyelim.

blockquote
-webkit-transition: all 500ms ease-out ;
-moz-transition: all 500ms ease-out ;
-o-transition: all 500ms ease-out ;
transition: all 500ms ease-out ;
font:16px 'Open Sans';
padding:15px;

Ayrıca bildirim başlıklarımız ve kapatma düğmesini de ekleyelim.

blockquote spanfont-weight:600;
blockquote #closefloat:right; color:inherit; text-decoration:none;

Taslaklarımız hazır. Şimdi biraz daha detaylandıralım.

Bildiri 1 : Dikkat

CSS Kodları

blockquote#danger
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;

HTML Kodları

<blockquote id="danger">
<a id="close" title="Close" href="#" onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Dikkat!</span> Bu bir hata mesajıdır.
</blockquote>

Bildiri 2 : Uyarı

CSS Kodları

blockquote#warning
background-color:#ecdfb0;
border-left:7px #e5c693 solid;
color:#6b6d31;

HTML Kodları

<blockquote id="warning">
<a id="close" title="Close" href="#" onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Uyarı!</span> Bu bir uyarı mesajıdır.
</blockquote>

Bildiri 3 : Bilgi

CSS Kodları

blockquote#info
background-color:#bde9f7;
border-left:7px #8bdaf4 solid;
color:#3c7e94;

HTML Kodları

<blockquote id="info">
<a id="close" title="Close" href="#" onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Bilgi!</span> Bu bir bilgi mesajıdır.
</blockquote>

Bildiri 4 : Başarı

CSS Kodları

blockquote#success
background-color:#cee0cf;
border-left:7px #8eb589 solid;
color:#296829;

HTML Kodları

<blockquote id="success">
<a id="close" title="Close" href="#" onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a>
<span>Tebrikler!</span> Bu bir onay mesajıdır.
</blockquote>

Kapanış

CSS ve az biraz JavaScript ile bildiri kutucuklarını yeniden tasarlamak bu kadar basit!

Bir sonraki dersimizde görüşmek üzere, iyi çalışmalar.

CSS ile Şık Bildirimler

CSS3 ile Odaklanma

Tolkien, Yüzüklerin Efendisi ve Hobbit filmlerine, hatta oyunlarına ilgi duyan herkesin hoşuna gideceğini düşündüğümüz bir tasarım ile sizlerleyiz. Bu dersimizde CSS3‘ün transform elemanıyla jQuery‘nin gücünü birleştirip etkileyici bir sunum hazırlayacağız. Bu yüzden okumakta olduğunuz makale aynı zamanda da “İlham Verenler” kategorisinde yerini alıyor.

Nasıl yapılır?

Tasarımın hazırlamasında kullandığımız CSS, HTML ve JS kodlarını teker teker inceleyelim.

HTML Kodları

Birçok makalemizin aksine bu sefer işin HTML kısmıyla başlayalım. İlk olarak 3 adet katmanımızı ekleyelim. Bu rakamı kod satırlarını çoğaltarak arttırabilirsiniz de.

<div class="katmanlar">
<img src="http://i.imgur.com/ePE90Yv.png" class="mordor">
<img src="http://i.imgur.com/BamhAMD.png" class="patlama">
<img src="http://i.imgur.com/SCLnCIg.png" class="angmar">
</div>

3 adet görselimizi ekledik. Hiyerarşi açısından en altta mordor, bir üstünde patlama ve en üstte de angmar class tanımlamalı görsel yer alacak.

JavaScript ve jQuery Tanımlamaları

İlk olarak inline JS kodlarımızı ekleyelim. İster <head></head> elemanı içerisine, isterseniz de yukarıda eklediğimiz 3 görsel kodunun altına bu satırları ekliyoruz.

<script type="text/javascript">
var mouseY = 0;

getBlur = function(depth)
 var result = Math.abs(depth-mouseY/50);
 return result;
;

getZoom = function(depth)
 var result = 1+(getBlur(depth/2)*0.03);
 return result;
;

$(document).ready(function() 
 $(window).mousemove(function(e)
 mouseY = e.pageY;
 /*'-webkit-transform: scale('+ getZoom(2)+') perspective(100px);*/
 $('.mordor').attr('style','-webkit-filter:blur('+getBlur(2)+'px);');
 $('.patlama').attr('style','-webkit-filter:blur('+getBlur(3)+'px);');
 $('.angmar').attr('style','-webkit-filter:blur('+getBlur(5)+'px);');
 );

);
</script>

Şimdi de jQuery dosyasını sayfamıza ekleyelim. <head></head> içerisine jQuery tanımlamasını yapıyoruz. Örneği hazırlarken 1.10.1.min versiyonunu kullanmıştık, burada da onu paylaşmakta fayda var.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

CSS Kodları

Fark ettiğiniz gibi hazırladığımız örnek tam ekran olarak çalışmakta. Yani responsive, makalede de aynı tasarımı uygulayacağız. O halde aşağıdaki kodları CSS dosyanıza ekleyerek işlemi tamamlayabilirsiniz.

body,html 
	height: 100%;
	margin:0;
	background-color:black;

.katmanlar 
	position:absolute;
 margin: 0 auto;
 height: 100%;
 width:100%;
 overflow:hidden;
 	-webkit-transform-style: preserve-3d;

img 
 -webkit-transform: translate3d(0, 0, 0);
 width:100%;
 height:100%;

.katmanlar .angmar 
 position:absolute;
 top:0px;
 left:0px;


.katmanlar .patlama 
 position:absolute;
 top:0px;
 left:0px;

Kapanış

Bu tip tasarımlar daha çok ürün tanıtımında kullanılmakta. CodePen üzerinde görüp sizlerle Türkçe olarak paylaştığımız bu ders aslında kod temelli tasarımın ne kadar hızlı geliştiğini açıkça göstermekte. Adobewordpress ailesi olarak bu yenilikleri sık sık gündeme getirmeye devam edeceğiz.

Bir sonraki dersimizde görüşmek üzere, iyi çalışmalar.

CSS3 ile Odaklanma

Kullanımı kolay ve işlevsel slider : Fotorama!

Merhaba arkadaşlar. Yayınladığımız slider konulu makalelere gösterdiğiniz alaka sebebiyle aynı konuyu tekrar işlemeye karar verdik. Bugün sizlere kolay kullanımı ve gelişmiş özellikleriyle Fotorama Slider‘ı tanıtacağız. Yapımcıların yorumu şöyle :

“Basit, şaşırtıcı, jQuery ile hazırlanmış gülçlü bir resim galerisi.”

Nasıl kullanılır? Siteme nasıl slider eklerim?

Fotorama‘nın en büyük özelliği kolay kurulabilir ve değiştirilebilir olması. Sadece 51KB boyutundaki jQuery, Fotorama.JS ve Fotorama.CSS dosyalarını kodlarınıza eklemeniz yeterli. Eklemeniz gereken javascript ve css kodları :

<!-- jQuery (1.8 veya sonrası), -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script> <!-- 15 KB -->

Şimdi de sliderı göstermek istediğimiz yere resimlerimizi ekliyoruz.

<div class="fotorama" data-autoplay="true">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Bu kadar!

Eğer sliderın boyut, geçiş veya mobil uyumu gibi özelliklerini değiştirmek istiyorsanız makaleyi okumaya devam edin.

Özellikler

Fotorama onlarca değiştirilebilir özelliğe sahip. Sizler için en çok ihtiyaç duyacağınız özelliklerini belirledik ve detaylı bir şekilde anlattık.

Boyutlandırma

Fotorama boyutlandırılması gayet basit bir slider. Yapımcılar bize boyut ölçeği, yükseklik ve genişlik değerlerini tanımlama şansı tanıyor. İster sabit boyutlarda bir sunum yapıyoruz, ister responsive, içerisinde bulunduğu öğeye göre şekil alan bir sunum yapıyoruz. Aşağıdaki tanımlamaları class=”fotorama” tanımlaması yaptığınız div öğesine ekleyin.

Aşağıdaki kod içerisinde bulunan data-height ve data-width sayesinde sliderın boyutlarını piksel bazında değiştirebilirsiniz.

<div class="fotorama" data-width="800" data-height="600">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Responsive Slider

Eğer her tip ekran çözünürlüğe uyum sağlayıp içerisinde bulunduğu öğeye göre kısalıp uzayabilen bir slider yapmak istiyorsanız kullanacağınız ölçü birimi piksel değil, yüzdeler ve ölçekler olmalı.

<div class="fotorama" data-width="100%" data-ratio="800/600">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Bunların yanısıra CSS’in max-min width ve height değerlerini de kullanabiliyoruz : data-maxwidth, data-maxheight, data-minwidth, data-minheight…

100% genişlik ve yükseklikte slider

Tüm sayfayı hem dikey hem de yatay olarak kaplayan bir slider eklemek istiyorsanız da body elemanınıza margin:0 tanımlaması yapmanız, beraberinde de her iki çözünürlüğü de 100%‘e eşitlemeniz gerekiyor.

<body style="margin: 0;">
 <div class="fotorama" data-width="100%" data-height="100%">
 <img src="1.jpg">
 <img src="2.jpg">
 </div>
</body>

Auto-play

Görsellerin kendiliğinden değişmesini istiyorsanız da auto-play elemanını true olarak değiştirmeniz gerekiyor. Örnek verecek olursak :

<div class="fotorama" data-autoplay="true">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Bittikten sonra yeniden başlaması

Slide içerisinde bulunan tüm görseller bittikten sonra tekrar başa sarmasını istiyorsanız data-loop elemanını true olarak değiştirmeniz gerekiyor. Örnek verecek olursak :

<div class="fotorama" data-loop="true">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Bu işlem 3 veya üstü görsel olursa çalışır.

Sırayla oynatmasın

Eğer slidera eklediğiniz görsellerin belirli bir sıraya göre değişmesini istemiyorsanız data-shuffle tanımlamasını true olarak değiştirmeniz gerekiyor. Örnek verecek olursak :

<div class="fotorama" data-shuffle="true">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Geçiş efekti

Slider iki tip geçiş efektini kullanmanızı mümkün kılıyor. Birincisi ve varsayılan olanı “slide”, diğeri ise “crossfade” olarak tanımlanıyor. Tanımlama elemanımız ise data-transition. Örnek bir çalışma yapalım ve crossfade geçişini kullanalım.

<div class="fotorama" data-transition="crossfade">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Video kullanma

Slider içerisinde sadece resimler değil, videolar da döndürmek istiyorsanız yapmanız gereken işlem gayet basit. A href tanımlamasıyla istediğiniz videoyu ekleyebilirsiniz.

<div class="fotorama">
 <a href="http://www.youtube.com/watch?v=Uwnzu3_aobo">Karakalem Efekti</a>
 <a href="http://www.youtube.com/watch?v=V9MKWGMZago">Çift Yüz İllüzyonu</a>
</div>

Fullscreen

Sliderınıza “tam ekran göster” buttonu koymak istiyorsanız yapmanız gereken data- tanımlamasını true olarak döndürmek.

<div class="fotorama" data-="true">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Kapanış

Bu makalemizde kullanım kolaylığıyla büyük avantaj sağlayan Fotorama Slider’ı inceledik. Yazılımın tüm önemli detaylarına değinmeye çalıştık. Atladığımız veya az değindiğimiz şeyler olursa yorum alanından belirtirseniz seviniriz. Ayrıca Fotorama’nın internet sitesine buradan erişebilirsiniz.

Bir sonraki makalemizde görüşmek üzere, iyi çalışmalar.

Kullanımı kolay ve işlevsel slider : Fotorama!

CSS Renk İsimleri

Web tasarımında hex, rgb veya kelime bazlı renk tanımlamaları yapabiliyoruz. Özellikle işin CSS kısmında color, background-color, border-color, text-shadow ve türevi onlarca tanımlama içerisinde bu renk kalıplarını kullanabiliyoruz. Bu makalemizde tüm renk tanımlamalarını kod satırlarıyla birlikte paylaşacağız.

17 standartlaşmış renk tanımlaması, 123 sonradan eklenen olmak üzere toplam 140 adet renk tanımlamamız mevcut. Söz konusu standart tanımlamalar şu şekilde : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Birlikte listeyi genişletelim.

CSS Renk Tanımlamaları

Color Name	Renk Kodu	Örnek
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

Kapanış

CSS’in renk isimlendirmelerini böylece tanımış olduk. Bu makalenin kaynağı tahmin edebileceğiniz gibi w3schools. Geçtiğimiz günlerde tomato ve white renk tanımlamalarıyla yapılmış bir tasarımın, şahsım adına ilgisi çekmesi sebebiyle tüm renklendirmeleri araştırdım ve paylaşma gereği duydum.

İyi çalışmalar.

CSS Renk İsimleri

Responsive menü nasıl yapılır?

HTML5 ve CSS3 teknolojileriyle her türlü ekran çözünürlüğüne farklı tepki veren tasarımlar oluşturmak mümkün. Özellikle menü ve navigasyon öğeleri için bu tekniği kullanmak neredeyse zorunlu. Daha önce üzerine konuştuğumuz CSS’in @media öğesi sayesinde bu işlem sandığımızdan da kolay.

Bu makalemizde ekran çözünürlüğüne göre 3 farklı şekil alabilen bir navigasyon örneği hazırlayacağız. Örneği görüntüleyerek başlayabilirsiniz.

Nasıl yapılır?

İlk olarak CSS3′ün Media Queries desteğini tanıyarak başlayalım. “CSS3 @Media” isimli makaleyi okuyarak başlayabilirsiniz. Sonrasında ise buradaki örneği görüntüleyerek öğrendiklerinizi pekiştirebilirsiniz. Eğer bütün bu bilgilere zaten hakimim diyorsanız bir adım daha ilerleyelim.

Hazırlayacağımız menü örneğini daha ilgi çekici kılmak için Entypo ikon setini kullanacağız. Bu uygulamayı daha önce buradaki makalemizde de kullanmıştık. Kısaca yapmamız gereken işlem CSS kodlarımızın en üstüne aşağıdaki gibi bir tanımlama yapmak.

@import url(http://weloveiconfonts.com/api/?family=entypo);

Ayrıca çalışmada PT Sans Narrow isimli Google Web Font’u da kullanacağız. Tabi işin bu kısmı opsiyonel. Eğer kullanmak isterseniz entypo kodunun hemen altına aşağıdaki satırı eklemelisiniz.

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

Eğer bu tasarımı web sayfanıza ekleyecekseniz class ve id tanımlamaları yapmanızı öneririz. Biz örneğin devamında CSS atamalarını ul, li, nav veya select gibi genel eleman tiplerine yapacağız. Artık yavaş yavaş CSS kodlarımızın kalanını yazabiliriz.

CSS Kodları

İlk olarak box-sizing ile başlıyoruz. Böylece boyutlandırma ilgili oluşabilecek her türden sorunun önüne geçiyor, li öğelerimizi rahatlıkla sağa sola yatırılabilir hale getiriyoruz.

* 
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

Şimdi body elemanı için eklediğimiz fontu atayalım. Ayrıca nav elemanı için arkaplan ve select elemanı içinde boyutlandırma değerlerini atayalım. Fark edebileceğiniz gibi Select’i başlangıç için display:none, yani görünmez kılıyoruz.

body
margin:0;
font:1.5em 'PT Sans Narrow', sans-serif;


nav
background-color:#2e62e6;
text-align:center
;

select
display:none;
background-color: inherit;
border:0; color:white;
width:100%;
padding:2%;
font-size:150%;

Şimdi entypo için div tasarımımızı tamamlayalım.

div
font:1.4em/50px 'entypo', sans-serif;

Yüksek çözünürlük için ul ve li elemanlarımız değer atayalım.

ul
display: table;
text-align:center;
list-style:none;
padding:0;


ul li
display:inline-block;
color:white;
padding:1em;
-webkit-transition: 0.8s ease;
-moz-transition: 0.8s ease;
-o-transition: 0.8s ease;
transition: 0.8s ease;

Table içerisinde inline-block tanımlaması öğelerimizin ortalanmasını sağlıyor. Ayrıca transition elemanı sayesinde geçişlerimizi daha ilgi çekici hale getirdik. Şimdi de li elemanlarının üzerine gelince oluşacak tasarımı belirleyelim.

ul li:hover 
background-color:white;
color:#2e62e6;

Sırada 900 piksel altı için özel yapacağımız media tanımlamaları var.

@media (max-width:900px)
ul width: 100%; font-weight: normal; 
ul li width: 50%; float: left; text-align: center; 
ul li:nth-of-type(odd) a border-right: 1px solid #ccc; 
ul li a padding: 8px 0px; border-bottom: 1px solid #ccc; display: block;

Ve son olarak 600 piksel altı çözünürlükler için Select’i görünür kılıyoruz.

@media (max-width:600px)
uldisplay:none;
selectdisplay:block;

CSS kodlarımız burada bitiyor. Sırada HTML kodlarımız var.

HTML Kodları

İlk olarak bir navigasyon oluşturalım.

<nav>ALAN</nav>

Aşağıdaki tüm eklemeler ALAN diye vurguladığımız kısma gelecek.

Şimdi de geniş ve orta çözünürlük için ul tanımlamalarımızı ekleyelim.

<ul>
<li><div class="entypo-attach"></div>Menu 1</li>
<li><div class="entypo-star"></div>Menu 2</li>
<li><div class="entypo-database"></div>Menu 3</li>
<li><div class="entypo-droplet"></div>Menu 4</li>
<li><div class="entypo-key"></div>Menu 5</li>
<li><div class="entypo-folder"></div>Menu 6</li>
</ul>

Üstte yazdığımız CSS koduna göre bu ul 900 pikselin altında bir ekranda satırlara ayrılacak. Şimdi gelelim 600 pikselin altı için select form öğesi eklemeye. Ul elemanını kapattığımız yerden devam ediyoruz.

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
 <option value="#">MENU</option>
 <optgroup></optgroup>
 <option value="#">Menu 1</option>
 <option value="#">Menu 2</option>
 <option value="#">Menu 3</option>
 <option value="#">Menu 4</option>
 <option value="#">Menu 5</option>
</select>

Onhange’e tanımladığımız JS kodu sayesinde # value değerlerine herhangi URL girebilirsiniz. Böylece menü öğesi seçildiğinde belirttiğiniz adrese sayfa yönlenmekte. Üstteki Select kodunu da ekledikten sonra işlem tamamlanıyor. Olası bir karışıklığın önüne geçmek için HTML kodlarını toplu olarak tekrar paylaşalım.

Tüm HTML kodları :

<nav>
<ul>
<li><div class="entypo-attach"></div>Menu 1</li>
<li><div class="entypo-star"></div>Menu 2</li>
<li><div class="entypo-database"></div>Menu 3</li>
<li><div class="entypo-droplet"></div>Menu 4</li>
<li><div class="entypo-key"></div>Menu 5</li>
<li><div class="entypo-folder"></div>Menu 6</li>
</ul>
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
 <option value="#">MENU</option>
 <optgroup></optgroup>
 <option value="#">Menu 1</option>
 <option value="#">Menu 2</option>
 <option value="#">Menu 3</option>
 <option value="#">Menu 4</option>
 <option value="#">Menu 5</option>
</select>
</nav>

Kapanış

Mobil cihazların popülerliği arttıkça bu tip duyarlı tasarımlar oluşturmak zorunlu hale geliyor. Ne kadar 1080p çözünürlük hala popüleritesini korusa da iyi bir web sayfası her türden cihazda kusursuzca görüntülenmelidir.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

Responsive menü nasıl yapılır?