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.

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

  • CSSGram ile Resimlerinize Instagram Filtresi Ekleyin
  • HTML ile Mavi Ekran Hatası
  • CSS ile Açılıp Kapanabilen Haber Kutucukları
  • CSS ile Text-Shadow’a Maske
  • CSS Değişkenlere “Merhaba” Deyin!
  • CSS ile Üzerine Gelince Büyüyen Resimler
  • CSS ile Navigasyon Menü Tasarlayalım
  • CSS3 Filter : Sadece CSS ile Görsellerinizi Yönetin
  • Sayfanın Üstünde Açılabilir Menü
  • CSS ile Spiral ve Çizgisel Arkaplan

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 Dersleri97
    • 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ı118
    • PHP Dersleri
    • Bootstrap
    • HTML5
    • CSS3
    • jQuery
    • SEO
    • Kaynaklar
    • İlham Verenler
    • Diğer Konular
  • Video Dersler57
  • Öne Çıkanlar110

Bağlantılar

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

Kategoriler

  • Tasarım Unsurları 396
  • Öne Çıkanlar 110
  • Photoshop Dersleri 124
  • WordPress 106
  • Video Dersler 57
  • Illustrator Dersleri 4
  • After Effects Dersleri 4
  • Sizden Gelenler 4

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
  • Sitenize Haber ve Duyuru Akışı Ekleyin
  • Photoshop ile Patlama Efekti İçin Fırça Hazırlama
  • Photoshop ile T-Shirt Tasarımı
  • Photoshop ile Temel Yağmur Efekti
 

Yorumlar Yükleniyor...