CSS ile Logo Yapımı-1

27 Ekim 2011 by B.Selçuk ÖKSÜZ
Leave a reply »
WP Greet Box icon
Merhaba! Selcukoksuz.com adresine hoş geldiniz. Eğer yeni iseniz ve içeriğimizi takip etmek isterseniz RSS Abonesi Olabilirsiniz.
Mailinize onay mesajı gönderilecektir. Cevaplamayı unutmayınız.

web site oluştururken web tasarımcılar için gerçekten önemli bir yapı. Bir çok nesneyi, bir çok ögeyi istediğimiz gibi sayfada konumlandırabiliyoruz. Ama az sonra görecekleriniz ile ile ne kadar sınırlar zorlanabilir daha net anlayacaksınız.

Bir çok firmanın logosu içerisinde hiç bir resim kullanılmadan, css ile oluşturulmuştur. Bir anlamda resimsiz css ile logo yapımına bir kaç uç örnek vereceğiz. Hemde kodları ile birlikte.

Ufak bir not ileteyim; Google Chrome, Safari ve Firefox en iyi gözükebilmektedir.

İşte o logolardan bir kaçı, gerçekten de bazıları gerçekten enteresan. Kodları ile birlikte inceleyerek sizinde css konusunda biraz olsun düşünceleriniz oluşur galiba.

Devamı gelecek…

 HTML

<div id="stevejobs">
    <div class="canvas">
        <div class="icon">
            <div class="st1"></div>
            <div class="st2"></div>
            <div class="st3"></div>
            <div class="st4"></div>
            <div class="st5"></div>
            <div class="st6"></div>
            <div class="st7"></div>
            <div class="st8"></div>
            <div class="st9"></div>
            <div class="st10"></div>
            <div class="st11"></div>
            <div class="st12"></div>
            <div class="st13"></div>
            <div class="st14"></div>
            <div class="st15"></div>
            <div class="st16 mask"></div>
            <div class="st17 mask"></div>
            <div class="st18"></div>
            <div class="st19"></div>
            <div class="st20"></div>
            <div class="st21 mask"></div>
            <div class="st22 mask"></div>
            <div class="st23"></div>
            <div class="st24"></div>
            <div class="st25"></div>
            <div class="st26"></div>
            <div class="st27"></div>
            <div class="st28"></div>
        </div>
    </div>
</div>

CSS

#stevejobs .canvas {
    background-color: #c7d2ed;
    overflow: hidden;
    top:-30px;
}
#stevejobs .icon {
    bottom: 0;
    height: 282px;
    left:156px;
    width: 257px;
}
#stevejobs .icon * {
    background: #0a0815;
    opacity:1;
}
#stevejobs .mask {
    background: #c7d2ed;
    opacity:1;
}
#stevejobs .st1 {
    border-radius:112px;
    box-shadow:1px -1px 1px #0a0815;
    height: 112px;
    left: 31px;
    width: 112px;

}
#stevejobs .st2 {
    border-radius:60px 22px 0 0;
    box-shadow:-1px -1px 1px #0a0815;
    height: 112px;
    top:13px;
    -moz-transform: rotate(-24deg);
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
    width: 112px;

}
#stevejobs .st3 {
    border-radius:21px;
    height: 21px;
    left:125px;
    top:60px;
    width: 21px;
}
#stevejobs .st4 {
    height: 135px;
    left: 49px;
    top: 63px;
    -moz-transform:rotate(-40deg);
    -webkit-transform:rotate(-40deg);
    transform:rotate(-40deg);
    width:95px;
}
#stevejobs .st5 {
    height: 87px;
    left: 116px;
    top: 51px;
    -moz-transform: skewx(6deg);
    -webkit-transform: skewx(6deg);
    transform: skewx(6deg);
    width: 31px;
}
#stevejobs .st6 {
    height: 68px;
    left: 138px;
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
    top: 129px;
    width: 35px;
    z-index: 100;
}
#stevejobs .st7 {
    border-radius: 138px/258px;
    clip:rect(60px 140px 180px 0);
    height: 258px;
    left: 107px;
    top: 130px;
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    width: 138px;
}
#stevejobs .st8 {
    height: 106px;
    left: 87px;
    top: 200px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    width: 65px;
}
#stevejobs .st9 {
    border-radius: 10px/20px;
    height: 20px;
    left: 5px;
    top: 85px;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    width: 10px;
}
#stevejobs .st10 {
    border-radius: 14px;
    height: 53px;
    left: 11px;
    top: 94px;
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
    width: 15px;
}
#stevejobs .st11 {
    border-radius: 0 0 10px 10px;
    height: 10px;
    left: 33px;
    top: 151px;
    width: 10px;
}
#stevejobs .st12 {
    border-radius: 31px/20px;
    left: 43px;
    height: 20px;
    top: 160px;
    width: 31px;
}
#stevejobs .st13 {
    height: 20px;
    left: 37px;
    top: 150px;
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    width: 20px;

}
#stevejobs .st14 {
    border-radius: 19px 19px 0px 19px/45px;
    height: 45px;
    left: 18px;
    top: 113px;
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
    width: 19px;

}
#stevejobs .st15 {
    background: none;
    border: 2px solid #0a0815;
    border-radius: 4px/20px;
    box-shadow:0 0 1px #0a0815;
    height: 20px;
    left: 8px;
    top: 102px;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    transform: rotate(-40deg);
    width: 1px;
}
#stevejobs .st16 {
    border-radius: 20px/23px;
    height: 23px;
    left: 22px;
    top: 159px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 20px;
}
#stevejobs .st17 {
    border-radius: 6px 6px 0 0;
    height: 14px;
    left: 63px;
    top: 176px;
    -webkit-transform: rotate(-40deg) skewx(16deg);
    -moz-transform: rotate(-40deg) skewx(16deg);
    transform: rotate(-40deg) skewx(16deg);
    width: 20px;
}
#stevejobs .st18 {
    border-radius:20px/30px;
    width:20px;
    height:30px;
    -webkit-transform:rotate(-30deg);
    -moz-transform:rotate(-30deg);
    transform:rotate(-30deg);
    left:167px;
    top:148px;
}
#stevejobs .st19 {
    border-radius: 20px/30px;
    height: 30px;
    top: 163px;
    left: 188px;
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
    width: 20px;
}
#stevejobs .st20 {
    height: 30px;
    left: 100px;
    top: 169px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
    width: 100px;
}
#stevejobs .st21 {
    border-radius: 100px/119px;
    border-bottom-left-radius: 80px;
    height: 119px;
    left: 144px;
    top: 30px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
    width: 100px;
}
#stevejobs .st22 {
    border-radius: 9px;
    height: 50px;
    left: 178px;
    top: 115px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    transform: rotate(-30deg);
    width: 30px;
}
#stevejobs .st23 {
    border-radius:10px;
    height: 10px;
    left: 30px;
    top: 150px;
    width: 10px;
}

#stevejobs .st25 {
    border-radius: 25px/30px;
    height: 30px;
    box-shadow: 0 -1px 0px blue;
    left: 80px;
    opacity: 0.5;
    top: 62px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
    width: 25px;
}
#stevejobs .st26 {
    box-shadow: 20px -70px 20px blue;
    height: 30px;
    left: 30px;
    top: 89px;
    -webkit-transform:rotate(-30deg);
    -moz-transform:rotate(-30deg);
    transform:rotate(-30deg);
    opacity: 0.1;
    width:60px;
}
#stevejobs .st27 {
    border-radius: 170px 210px 130px 0px/60px;
    box-shadow: 33px -62px 10px blue;
    height: 30px;
    left: 20px;
    opacity: 0.1;
    top: 89px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
    width: 80px;
}

Yazar Hakkında

Bilgisayarla yaşamayı bir tarz olarak benimsemiş, teknoloji ile tamamen içli dışlı bir; web tasarımcı, yazılımcı, donanımcı, blog yazarı ve bilgisayar mühendisidir.

B.Selçuk ÖKSÜZ
B.Selçuk ÖKSÜZ kullanıcısının tüm yazıları.
Advertisement

Bu Yazıyı Beğendiniz Mi?

0

Bir Cevap Yazın

Sizin Yorumunuz Nedir?

%d blogcu bunu beğendi:
Gizlilik Hakları