Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / HT M L5 ve CSS3 i l e Bu tto n Ö rn ekl eri
HTML5 ve CSS3 ile Button Örnekleri Vatanay Özbeyli tarafından 25 Kasım 2012 tarihinde yazıldı. ~ Yorum Yok + Değiştir
Daha önceki yazılarımda HTML5′in yeni elemanlarını tanımıştık. Şimdi onlardan birini, aside’ı kullanarak birkaç button hazırlayalım. Beraberinde CSS3 ile aramıza katılan çerçeve özgünleştirme özelliklerini de kullanacağız. Ve tabiki :before :after bölümleri ile objelerimizin sol ve sağ taraflarında farklı farklı stiller oluşturacağız.
Aside nasıl kullanılır? HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it. Yukarıda da anlatıldığı aside çeşitli metinlere destek amaçlı oluşturulabilecek küçük anlatımlardır. Yazının altında duran alıntı metinler gibi olduğu söylenebilir. Kullanılması zorunlu değildir fakat uzun makalelerde anlaşılabilirliğin arttırılması için tavsiye edilir. Biz ise yeni kod birimini button olarak kullanacağız. HTML5′in temelinde aside’ın button işlevine dair bir anlatım yok. Fakat HTML5′in sunduğu en büyük yenilik özgürlük!
Yavaş yavaş başlayalım. İlk olarak aside için tanımlamamızı yapalım. Bu CSS kodlarını tüm örnekler için kullanmanız gerekir. Yani ilk olarak aşağıdaki kodları sitenize eklemekle başlamalısınız : 1 2 3 4
aside { width: 160px; font: 20px Arial,Helvetica,sans-serif; color:white;
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
text-shadow:#333 1px 1px; margin: 20px 0; line-height: 34px; position: relative; cursor: pointer; user-select: none; } aside:before, aside:after { content: ''; position: absolute; height: 0; width: 0; border-style: solid; border-width: 0; }
Şimdi bu taslak üzerinden örneklerimizi görelim.
Kırmızı Kurdele Örneği
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
aside.kurdela { background-color: #b52c2c; } aside.kurdela:before, aside.kurdela:after { top: 5px; z-index: -10; } aside.kurdela:before { border-color: #942a2a #942a2a #942a2a transparent; left: -25px; border-width: 17px; } aside.kurdela:after { border-color: #942a2a transparent #942a2a #942a2a; right: -25px; border-width: 17px; }
HTML Kodları 1 <aside class='kurdela'>Kurdela</aside>
Mavi Kristal Örneği
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
aside.kristal { background-color: #2f84c6; } aside.kristal:after, aside.kristal:before { border-color: transparent #2f84c6; } aside.kristal:before { left: -17px; border-width: 17px 17px 17px 0; } aside.kristal:after { right: -17px; border-width: 17px 0 17px 17px; }
HTML Kodları 1 <aside class='kristal'>Kristal</aside>
Yeşil Ok Örneği
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
aside.ok { background-color: #72c62f; } aside.ok:after, aside.ok:before { border-width: 17px 0 17px 17px; } aside.ok:before { border-color: #72c62f transparent; left: -17px; } aside.ok:after { border-color: transparent #72c62f; right: -17px; }
HTML Kodları 1 <aside class='ok'>Ok</aside>
Sarı Köşeli Örnek
CSS Kodları 1 2 3 4 5 6
aside.koseli { background-color: #c69d2f; border-radius: 25px/17px; left: -20px; width: 200px; }
HTML Kodları 1 <aside class='koseli'>Köşeli</aside>
Mor Eğik Örnek
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
aside.egik { background-color: #6b2fc6; left: -5px; width: 170px; } aside.egik:after, aside.egik:before { border-width: 34px 10px 0 0; } aside.egik:before { left: -10px; border-color: transparent #6b2fc6; } aside.egik:after { right: -10px; border-color: #6b2fc6 transparent; }
HTML Kodları 1 <aside class='egik'>Eğik</aside>
Notlar 1. aside kodunun temeli küçük dipnotlardır. Fakat Bu şekilde farklı
amaçlarla kullanılması SEO değeriniz açısından bir problem yaratmayacaktır. 2. İsteğe bağlı olarak aside, etiketler için bile kullanılabilir.
Benzer Konular: CSS ile Title ve Alt Etiketlerini Renklendirin CSS ile Yuvarlak CSS3 ile Sosyal Ağ Kutucuğu CSS Kullanarak Button Tasarlamak CSS ile 3D, Blur, Ateş, Buz, Neon, Asit, Alfa ve Anaglyph…
Yazı Kategorisi : CSS3 , HTML5 , Tasarım Unsurları Anahtar Kelimeler : aside , Button , css , CSS3 , html5 , köşeli , kurdele , örnek , renkli