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 :
AdobeWordPress.com
Adobe, WordPress, CSS ve SEO konulu Türkçe dersler
Ş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/
