Merhaba arkadaşlar.



Bu makalemizde CSS’in Blur efektini kullanarak tanım ve slogandan oluşan gayet etkileyici bir logo (başlık örneği de olabilir) hazırlayacağız. Öncesinde örneği görüntülemek isteyebilirsiniz.



Yazılım

İlk olarak HTML Kodlarımız ile başlayalım :



Şimdi ise CSS Kodlarımızı ekleyelim.

@import url(http://fonts.googleapis.com/css?family=Sintony);
body {
display: flex;
justify-content: center;
text-align: center;
font-family: Sintony;
background-color: hsl(0,50%,20%);
background: linear-gradient(90deg, hsl(0,0%,5%), hsl(0,0%,20%), hsl(0,0%,5%));
}

#logo {padding: 80px;}

#adobewordpress {
font-size: 3em;
color: hsla(0,0%,0%,0);
text-shadow: white 0 0 60px;
transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
}
@-moz-document url-prefix() { #detail { text-shadow: #fff 0 0 20px; } }

#logo:hover #adobewordpress {
text-shadow: #fff 0 0 1px;
transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1);
}

#detail {
font-size: 1.2em;
margin: 0 10px;
color: hsla(0,0%,0%,0);
text-shadow: red 0 0 1px;
transition: text-shadow 1s cubic-bezier(0, 1, 0, 1);
}

#logo:hover #detail {
text-shadow: red 0 0 100px;
transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1);
}
@-moz-document url-prefix() { #adobewordpress:hover #detail { text-shadow: red 0 0 20px; } }

İşlemimiz bu kadar.

Bir sonraki makalemde görüşmek üzere.

Kaynak : http://www.adobewordpress.com/css-ile-etkileyici-interaktif-logo/