adobewordpress ~ güncel tasarım okulu
  • Adobe
    • Photoshop Dersleri
    • After Effects Dersleri
    • Illustrator Dersleri
  • WordPress
    • Eklentiler
    • Temalar
    • Güvenlik
  • Duvar Kağıtları
  • Tasarım Unsurları
    • PHP Dersleri
    • HTML5 Dersleri
    • CSS Dersleri
    • jQuery
    • Bootstrap
    • SEO Dersleri
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler
  • Yazarlar

CSS ile Etkileyici İnteraktif Logo

Vatanay Özbeyli CSS3, Tasarım Unsurları

Merhaba arkadaşlar.

CSS ile Interactive LogoBu 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.

ÖRNEĞİ GÖRÜNTÜLE

Yazılım

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

<div id="logo">
<span id="adobewordpress">AdobeWordPress.com</span><br>
<span id="detail">Adobe, WordPress, CSS ve SEO konulu Türkçe dersler</span>
</div>

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

@import url(https://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);
-webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
-moz-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
-o-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);
-webkit-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1);
-moz-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1);
-o-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);
-webkit-transition: text-shadow 1s cubic-bezier(0, 1, 0, 1);
-moz-transition: text-shadow 1s cubic-bezier(0, 1, 0, 1);
-o-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);
-webkit-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1);
-moz-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1);
-o-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.

Paylaş
Share on Facebook Share
Share on TwitterTweet
Share on Pinterest Share
Share on LinkedIn Share
Send email Mail
blur bulanıklık css etkileşimli filter hareketli interactive interaktif logo


Yazı navigasyonu

CSS3 ile Sosyal Ağ Kutucuğu
jQuery Desteğiyle Harika Metin Sunumu

SOSYAL

E-Posta Aboneliği

Güncel eğitimlerden haberdar olmak ister misin?




Arama

Benzer Yazılar

  • CSS3 ile Animasyonlu Flat Butonlar
  • jQuery Desteğiyle Harika Metin Sunumu
  • CSS ile Çoklu Arkaplan ve Animasyon
  • WordPress Başlıklarınızın Yanına Kategori Resmi Ekleme
  • Web sayfanız için en iyi Video Player hangisi?
  • CodePen’de Yapılmış En Etkileyici 10 Çalışma
  • Yeni sekmede açılan bağlantılar nasıl özelleştirilir?
  • CSS Kullanarak Button Tasarlamak
  • HTML ile Mavi Ekran Hatası
  • CSS3 ile Odaklanma

Popüler Örnekler

  • Ambilight ile Bootstrap Slider Kullanımı 17045
  • Sitenize Haber ve Duyuru Akışı Ekleyin 12732
  • Yukarı Scroll Edildiğinde Gözüken Header 12614
  • Material Design Öne Çıkarılmış Menü Tasarımı 11535
  • Mobil Sitenize WhatsApp ve Diğer Sosyal Paylaşım Linkleri Ekleyin 10993
  • Sitenize Kolayca Slider Ekleyin 10853
  • Sadece CSS ile Slider Yapımı 9725
  • CSS ve jQuery ile Dönen Menü 9555
  • Fareyle Birlikte Hareket Eden Arkaplan Resmi 9227
  • jQuery ile Scroll ve Arkaplan İlişkisi 7766

Kategoriler

  • Photoshop Dersleri96
    • Fotoğraf Efektleri
    • Yazı Efektleri
    • Actionlar
    • Fırçalar
    • Patternler
    • İpuçları
  • After Effects Dersleri4
  • Illustrator Dersleri4
  • WordPress84
    • Eklentiler
    • Temalar
    • Güvenlik
  • Tasarım Unsurları115
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler53
  • Öne Çıkanlar106

Bağlantılar

  • Anasayfa
  • Hakkımızda
  • Reklam
  • Kullanım
  • Yazarlık Başvurusu
  • Arşiv
  • İletişim

Kategoriler

  • Tasarım Unsurları 392
  • Öne Çıkanlar 106
  • Photoshop Dersleri 123
  • WordPress 106
  • Video Dersler 53
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 3

Adobe Download
Tasarım dünyasına detaylı bir giriş yapmak mı istiyorsunuz? Creative Cloud'u şimdi bilgisayarınıza kurun!

Download Adobe Photoshop CC
Download Adobe After Effects CC
Download Adobe Flash Pro CC
Download Adobe Dreamweaver CC
Download Adobe Illustrator CC
Download Adobe InDesign CC

Uyuya mı kaldın?

10 dakikadır bir işlem yapmadın. Yoksa uyuya mı kaldın?
ÖNE ÇIKANLAR
  • Photoshop’a Alternatif 10 Resim Editörü
  • Photoshop ile Metalik Yazı Efekti #1
  • Responsive Akordiyon (Collapsible)
  • Photoshop ile Şık Yazı Portre Tasarımı