Articles by "css dersleri"
css dersleri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

Blogger derslerinde sizler için görünen resmin üzerine geldiğinizde arka satırda ki açıklaması ve linki gelen bir menü oluşturma konusundan bahsedeceğim.  Anlatması zor bir menü çeşidi olduğu için hemen sizler için demo halini ekliyorum .

Blogger Dönen Resimlerle Menü Oluşturmak


1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
 2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen altına aşağıda ki Blogger dönen resimlerle menü oluşturma kodlarını ekliyoruz.

 .ch-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;}
.ch-info{
    position: absolute;
    width: 150px;
    height: 150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
.ch-img-1 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRIsd8-OnqqwT-gn_RuaUjzj_TlCZ0hlCEBoNhIN4KUGdRXBQ2DLnPN-0FkQ6aU0KfhwhyphenhyphenHzyol7IFwbgSok_hyuauAiz5ND7aeNX_z97CA5I4_qqn2La7OnqVV9PTAtAqfySZnKb-vY/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggrPshRySOKkgeiYlsZK8Nbj5WgN9KnMcdiLQV0pA-n-hP3-VAMRMyAs4MCWUgqik9gfm-l5dE21Zc8XgW-nZ5_KOZoY8jSBlzUbOqzidLUL9UMjS-yDdGDIul9XT8iMd_6WNopNOWYk/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnG-ye5rRYgIR7mAwxO43fHVYGM0rcNoy1UDWHhGSoAzs7NPzT0bX4JJbeDD-UxkIxi8dS_7xAF6nswEDeHtIIlEuZPhvCWFt6WAKwlTHFTFLolrLKU8M0A8SXHmljJyJUbtUGEpYpJM/s1600/photo-7.png);
}
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: -10px 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);}
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: -95px; 30px;
    font-size: 12px;}
.ch-info p a {
    display: block;
    color: #fff;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;}
.ch-info p a:hover {
    color: #fff222;
    color: rgba(255,242,34, 0.8);}
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;}
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;}
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;}
.ch-grid:after {
    clear: both;}
.ch-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}
3 ) Menüyü isterseniz Gadget ekle diyerek yada yayın yaparken HTML bölümüne geçerek Blogger ile tasarlanmış temalarda kullanabilirsiniz. Kullanmak istediğiniz yerde eklemeniz gereken kod dizini :


 <section class="main">
            
     <ul class="ch-grid">
<li>
         <div class="ch-item">
                
             <div class="ch-info">
                 <div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
                                    <h3>
 Demo </h3>
<a href="http://www.webtegez.blogspot.com/">Blog Terimleri </a><br />

                                </div>
</div>
</div>
</li>
<li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-2">
</div>
<div class="ch-info-back">
                                    <h3>
Demo</h3>
<a href="http://www.webtegez.blogspot.com/"> Blogger Dersleri </a><br />

                                </div>
</div>
</div>
</li>
<li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-3">
</div>
<div class="ch-info-back">
                                    <h3>
Demo</h3>
<a href="http://www.webtegez.blogspot.com/"> Blogger Seo </a><br />

                                </div>
</div>
</div>
</li>
</ul>
</section>

Blogger Dönen Resimli Menü Üzerinde Yapmanız Gereken Değişiklikler

  • İlk kod dizini olarak ]]></b:skin> üzerine eklenecek kodlarda belirlenen Kırmızı ile yazılmış olan resim linkleri, demo örneğinde inceleyebileceğiniz gibi menünün görünür resim linkleridir. Kullanmak istediğiniz resim linkleri ile değiştirmeniz yeterlidir. 
  • İkinci kod dizinin de ise mavi ile yazılmış linkler resimler üzerine gelince altta beliren link yazısının gideceği sayfayı belirler. 
  • İkinci kod dizinin de pembe olarak verilmiş olanlar ise resim yerine gelecek menü açıklamasıdır. 
  • İkinci kod dizinin de kırmızı olarak yazılmış alanlar resimler yerine gelecek açıklama satırının altında yazacak olan linkin görünür metnidir. 


Continue reading

zaman: 0
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

googlewebfonts Google Web Fonts ve Kullanımı
Bu paylaşımımda sizlere Google‘ın webmasterlar için büyük kolaylık sağlayan hizmetlerinden birini anlatmak istiyorum , Hizmetin adı GoogleWebFonts
Web tasarımıyla uğraşan arkadaşlar için çok faydalı olucağını düşündüğüm bu kaynak neye benziyor diye sorarsanız, size Cufon ve sIFR uygulamalarını örnek gösterebilirim.Bildiğimiz gibi artık websitelerinin konu başlıkları çok güzel şekillerde bizlere sunuluyor.Örnek
Cufon
cufon Google Web Fonts ve Kullanımı
sIFR
sIFR Google Web Fonts ve Kullanımı
Gördüğünüz gibi bildiğimiz font gibi durmuyor.Cufon ve sIFR’ın özelliği jquery özelliklerini kullanarak konu başlıklarımızı bizlere img şeklinde göstermesi.Bundan dolayıda kaliteli bir görüntüyle karşılaşıyoruz.Bundan önce bende bazı projelerimde Cufon kullanmıştım fakat GoogleWebFonts’u kullandıktan sonra .js dosyaları ve bir sürü ayarla uğraşmadan siteme ekleyeceğim bir satır kod ile başlıklarımı ziyaretçilere daha güzel şekilde sunabileceğimi farkettim.
GoogleWebFonts şu anda 198 farklı font şekli ile kullanıcılara büyük bir kolaylık sağlıyor,ve bu rakam gün ve gün artıyor.
Ben blogumun başlıklarında GoogleWebFonts arşivinden ‘Bevan’,serif; adlı fontu kullandım ve görünüşü
title Google Web Fonts ve Kullanımı
Sizde sitenizde bu özelliği kullanmak isterseniz yapmanız gereken 2 şey var.
Googlewebfonts’dan hoşunuza giden fontu seçip bunu sitemize eklemek.Bunun için GoogleWebFonts adresine girip istediğimiz fontun yanındaki Quick-Use adlı bölüme basıyoruz,Daha sonra açılan sayfanın alt kısmında bize iki tane kod veriyor.Bu kodlardan birincisi
<strong><head></head</strong>> tagları arasına ekliyoruz , Diğeri ise kullanmak istediğimiz bölümün <strong>css</strong>’inde tanımlama yapmak için gerekli olan koddur.
1font-family: 'Istok Web', sans-serif;
Örnek Kullanım :
1h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }
Gördüğünüz gibi kullanımı oldukça basit.Sizde sitenizdeki sıkıcı yazı şekillerinden sıkıldıysanız GoogleWebFonts tam size göre…
Continue reading
Kaydol: Kayıtlar (Atom)