Siteniz efekt ile giriş yapsın!

Merhaba herkese. Özgür arkadaşımda gördüm ve ben beğendim. Tüm herkesin beğeneceğini düşündüğüm için bende paylaşıyım dedim sizlere. Kodu nereye eklerseniz sağdan ve soldan hareket ederek geliyor. (Yapımcı: Daniel Eden) Kod tamamen CSS3 yapılmış.

Önizleme;

Demo'ya bak

Sitede açık ve koyu mavi renkli kutularda efektlerin önizlemelerine ulaşabilirsiniz. Kendinize göre seçerek daha iyi bir efekt sağlayabilirsiniz sitenize.

Böyle daha iyi diyorsan;

kodunu temada bulunan  ile   etiketleri arasında bir yere ekleyin.

Kodları site de kullanmak;

Hangi elementte kullanmak istiyorsan eğer class elementine animated etiketini ekleyin.

Örn: class='animated' böyle eklenicek ve işlem tamam.

Bu şekilde istediğiniz elementte istediğiniz efekti ekleyebilirsiniz. Eğer takıldığınız yer varsa yorum kısmını veya Özgür arkadaşıma sorabilirsiniz. Kaynak: Özgür Görgülü.

Blogger'da etiket görünümüzü özelleştirmek ister misiniz?

Merhaba arkadaşlar,

Blogger'da etiketlerinizi iyi bir görünüm sağlatmak istermisiniz? Tabi istersiniz hatta temalarınıza uygun hale getirebilirsiniz ve ziyaretçileriniz tarafından hoş görülür.Kod'da sadece temanıza uygun renkleri ayarlarsanız güzel ve şık olur.

Önizleme:

Blogger Paneline Girin.

Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
display:inline-block;float:none;font-family:"Trebuchet MS","Arial","Helvetica",sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#1BA1E2;color:#fff !important;-webkit-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-moz-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-o-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;
}
.label-size:hover {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgbundefined0,0,50);-moz-box-shadow:0 0 20px rgbundefined0,0,50);-o-box-shadow:0 0 20px rgbundefined0,0,50);box-shadow:0 0 10px rgbundefined0,0,50);-webkit-transform:rotateundefined3deg) scaleundefined1.2);-moz-transform:rotateundefined3deg) scaleundefined1.2);-o-transform:rotateundefined3deg) scaleundefined1.2);transform:rotateundefined3deg) scaleundefined1.2);
filter: progid:DXImageTransform.Microsoft.Matrixundefined
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
display:inline-block;float:none;margin:2px 1px;padding:6px 3px;font-family:"Trebuchet MS","Arial","Helvetica",sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#252c44;color:#fff !important;-webkit-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-moz-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-o-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;background-color:#252c44;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);background-color:#252c44;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);background-color:#252c44;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);
}
.label-size a:hover  {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgbundefined0,0,50);-moz-box-shadow:0 0 20px rgbundefined0,0,50);-o-box-shadow:0 0 20px rgbundefined0,0,50);box-shadow:0 0 10px rgbundefined0,0,50);-webkit-transform:rotateundefined3deg) scaleundefined1.2);-moz-transform:rotateundefined3deg) scaleundefined1.2);-o-transform:rotateundefined3deg) scaleundefined1.2);transform:rotateundefined3deg) scaleundefined1.2);-webkit-transform:rotateundefined-3deg) scaleundefined1.2);-moz-transform:rotateundefined-3deg) scaleundefined1.2);-o-transform:rotateundefined-3deg) scaleundefined1.2);background-color:#0c92da;transform:rotateundefined-3deg) scaleundefined1.2);-webkit-transform:rotateundefined3deg) scaleundefined1.2);-moz-transform:rotateundefined3deg) scaleundefined1.2);transform:rotateundefined3deg) scaleundefined1.2);background-color:#0c92da;-webkit-transform:rotateundefined2deg) scaleundefined1.2);-moz-transform:rotateundefined2deg) scaleundefined1.2);background-color:#0c92da;-o-transform:rotateundefined2deg) scaleundefined1.2);transform:rotateundefined2deg) scaleundefined1.2);
}

Ve şablonumuzu kaydediyoruz. Tabi kendinize göre düzenleyiniz, iyi günler görüşürüz.

CSS konuları - Part 1

Cascading Style Sheets (CSS) HTML 'deki bazı problemleri halletmek için ama örnek olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir yoldur.CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:

Görünüm Avantajları

CSS HTML'e göre bir çok stil özelliğine sahiptir ve CSS ile ortaya muhteşem stiller çıkıyor. CSS'in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur. :::html

CSS'e Giriş

HTML'de bu elementi(h1) kalın,altı çizili, rengi kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız, ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

h1 { 
    color: white; 
    font:italic 18px Arial, serif; 
    text-decoration: underline; 
    background: yellow url(resimlinki) repeat-x; 
    border: 1px solid white; 
    margin-bottom: 0;
    padding: 5px; 
}

Kullanım Kolaylığı

HTML'de her elmente artı özellikler eklemek için başka bir element ve özellik eklememiz gerekiyor.

Başlık

Bunun gibi onlarca veya yüzlerce konu başlığınız olduğunu düşünün. CSS'de aynı işlem için;

h1 {
    color: blue;
}

hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz site hızı açısından biraz daha olsa etkileniyor.

h1, h2 {
    color: blue;
}

Ayrıcatek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi etkiler.

Bu günlük bu kadar yeter ilk olarak Fatih Hayrioğlu'na teşekkürler bu bilgiyi bizle paylaştığı için. Kaynak:Fatih Hayrioğlu

CSS ile etiketlenmiş kutu

Merhaba arkadaşlar, etiketli kutucuklar artık CSS ile çok kolay!

Border kod satırının hünerleri ile etiketimizi, birkaç gölge efekti ile de dikkat çekici tasarımlar hazırlayabiliriz. Tabi uyumlu renk tonları da bu işin küçük sırrı.

Notlar

1. İçerisinde görsel barındırmadığı için daha hızlı yüklenir.
2. Tüm güncel browserlarda çalışır.
3. Yine görsel barındırmadığı için kolayca özgünleştirilir.

Örnek

CSS Kodları

.kutu {
font: 12px/16px Helvetica, Arial, sans-serif;
text-shadow:#FFF 1px 1px;
background: #f3f3f3;
box-shadow: inset 0 0 50px #dcdcdc,0 11px 8px -6px #ccc;
border-radius: 5px;
margin:0 auto;
padding: 15px 15px 15px;
position: relative;
width: 285px;
}

.kutu .etiket {
background: #c02d2d;
text-shadow:#5d1919 1px 1px;
color: #fff;
font-size: 10px;
left: 10px;
padding: 2px 8px;
position: absolute;
border:1px #992424 solid;
text-transform: uppercase;
top: -4px;
}

.kutu .etiket:after {
border-bottom: 4px solid #992424;
border-right: 2px solid transparent;
content: "";
display: block;
height: 0;
position: absolute;
right: -3px;
top: -1px;
width: 0;
}

HTML Kodları

Nuri-ozdogan.blogspot.com isminden de anlaşılmıyor ama saçmalamasyonları çoğalıyor.

Hakkımızda

Uygulama

Check out this Pen!

CSS ile logo yapma

Merhaba arkadaşlar, bu CSS kategorisinde ilk yazım.Ben internette gezerken buldum beğendim hatta kendi blogumda ki logo bile CSS ile oluşturdum ve sizlere sunmak istiyorum, umarım beğenirsiniz. CSS kısmından body'i almanıza gerek yok.