AOrhan BLOG
  • Anasayfa
  • KategorilerNELER VAR NELER
    • Blog
    • Profesyonel Blogculuk
    • WordPress
      • WordPress Tema
    • Teknoloji Haberleri
      • Programlar
    • Tasarım ve Yazılım
    • İnternet
    • Mobil Cihazlar
      • Android
      • Apple-iOS
    • Nasıl Yapılır ?
    • Oyun
    • Mühendislik
    • Tanıtımlar
  • Hakkımda
  • Reklam
  • İletişim
ABONELİK
Sonuç Bulunamadı
Tüm sonuçları göster
  • Anasayfa
  • KategorilerNELER VAR NELER
    • Blog
    • Profesyonel Blogculuk
    • WordPress
      • WordPress Tema
    • Teknoloji Haberleri
      • Programlar
    • Tasarım ve Yazılım
    • İnternet
    • Mobil Cihazlar
      • Android
      • Apple-iOS
    • Nasıl Yapılır ?
    • Oyun
    • Mühendislik
    • Tanıtımlar
  • Hakkımda
  • Reklam
  • İletişim
ABONELİK
Sonuç Bulunamadı
Tüm sonuçları göster
AORHAN BLOG
aksa akustik
Anasayfa Tasarım ve Yazılım

CSS ile Yazı veya Linklere Vurgu Efekti (Highlight) Ekleme

Ahmet Orhan by Ahmet Orhan
9 ay önce
Kategori: Tasarım ve Yazılım
Okunma Süresi: 3 dakika
4

Sitenin temasını değiştirmem ile beraber vakit buldukça değişiklikler yapmaya çalışıyorum. Temayı değiştirmeden önce sık karşılaştığım ve dikkatimi çeken highlight efekti bazı ziyaretçilerimin de dikkatini çekmiş 🙂 Kendisi bana ulaşıp nasıl yaptığını sorunca bende bunu yazı olarak paylaşıp belki kullanmak isteyen olursa onlarda denesin istedim.

Şimdi gelelim konumuza. Aslında yapımı oldukça basit. Ben h2 etiketlerim ile linklere ekledim. İkisi farklı renklerde kullanıyorum. h2 dediklerim yazı içindeki ara başlıklar.

Daha fazla bilgi için aşağıdaki adresi ziyaret edebilirsiniz.

https://www.kizlarsoruyor.com/internet-teknoloji

Mesela bu ara başlığımda kullanıyorum.

Ayrıca site içindeki linkleri de yine aynı şekilde efekt verdim. Tabi bunun rengi farklı olarak yaptım. Fakat bazı yerlerde yani istemediğim yerlerde de eklenmiş. Onları da müsait zamanda düzelteceğim. Örnek bağlantı burada eklediğimde altında yeşil oluyor. İsterseniz bunlara efektini değiştirebilirsiniz. Mesela komple arkaplanı kaplayacak şekilde de yapabilirsiniz.

Bu özelliği ekleyeceğiniz css sınıfını chrome da sağ tıklayıp öğeyi incele diyerek seçebilirsiniz. Sonra bu seçtiğiniz css sınıfına aşağıdaki özellikleri ekleyeceksiniz.

background-image: linear-gradient(120deg, #84FAB1 0%, #34D364 1000%);

background-repeat: no-repeat;

background-size: 100% 0.35em;

background-position: 0 108%;

transition: background-size 0.25s ease-;

Bu kodlarda background-image kodunda renk geçişini verebilirsiniz. Buradaki 120deg denilen gradient efekti yani renk geçişinin açısıdır. Diğer konu ise, bu arkadaki rengin yüksekliği kibunu da background-size içindeki 0.35em de yüksekliği belirliyor.

Bu arada link üstüne gelince rengin yüksekliği artsın derseniz, css classının hover’ına “background-size: 100% 88%;” olarak verebilirsiniz.

Ayrıca burada hazırlanmış demo şeklinde de var. Oradan da inceleyebilirsiniz. Sormak istediğiniz sorular varsa yorum ile yazarsanız yardımcı olayım 🙂

 

Yazıyı Göster
Paylaş71Tweet45GönderPin16

Previous Post

iOS Üzerinden Android’e Whatsapp Mesajlarını Nasıl Aktarırsınız?

Next Post

iPhone’unuz Donduysa Bu Yöntemleri Mutlaka Deneyin

Yorumlar 4

  1. fatih says:
    8 ay önce

    Benim şahsi fikrim bu etrafta dolaşan programlara pek uğraşmayın sadece photoshop öğrenip yeteneğiniizi ortaya koyun..

    Cevapla
  2. Ertan says:
    9 ay önce

    Soruma cevap olarak hazırladığınız içerik için teşekkür ederim. İyi çalışmalar dilerim 🙂

    Cevapla
  3. Çağrı Mustafa Alkan says:
    9 ay önce

    Bence böyle şeyleri bizim gibi acemilerle daha çok paylaşmalısın. Yani, paylaşırsan çok sevinirim ben 😊

    Cevapla
    • Ahmet Orhan says:
      9 ay önce

      Tabiki Çağrı, inşallah daha çok paylaşacağım 🙂

      Cevapla

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

AOrhan BLOG

Ahmet Orhan

Teknoloji Bloggerı

2009'dan bugüne kadar teknoloji ağırlıklı yazılar yazan, wordpress sevdalısı, Makine Mühendisi olup Bilgisayar Mühendisliğini de okuyan bir blogger.

Detaylı bilgiye Hakkımda sayfasından ulaşabilirsiniz.

YOUTUBE VE INSTAGRAM BİR TAKİBİNİZİ ALIRIM

youtube abone

ses yalıtımı
cep telefonu oyunları
aile hekimliği malzemeleri hepsi medikal
internetten para kazan
tesisat
Text Link
Reklam Alanı
Text Link
Reklam Alanı

AORHAN ÖNERİYOR

HostingRüya TabirleriBedava site kurhasta yatağıhasta yatağı kiralamaapkdayi.comakustik ses yalıtımıakustik paneltakipkutusu.com

Bizimkiler

Bilim Haberleri Spaksu WPadamı EgonomikTeknoloji Haberleri

Boru Çapları ve DN ölçülerinin Dış ve İç Çap Karşılıkları

Xiaomi Cihazlarda Yazıtipi Nasıl Değiştirilir?

GTA 5’te Karakter Nasıl Değiştirilir?

Mezundan AÖF Web Tasarım ve Kodlama Bölümü Hakkında Tüm Detaylar

Android Cihaza Ücretli Uygulamaları Ücretsiz İndirme

iPhone’un İnternetini USB İle Bilgisayarda Kullanma

Ahmet Orhan'ın teknoloji, internet, wordpress tema ve mobil cihazlar üzerine yorumlarının ve son haberlerinin yayınlandığı kişisel teknoloji blogu.

Sitemap | RSS | Turhost

Kategoriler

Android Apple-iOS Blog Mobil Cihazlar Mühendislik Nasıl Yapılır ? Oyun Profesyonel Blogculuk Programlar Tanıtımlar Tasarım ve Yazılım Teknoloji Haberleri Wordpress Wordpress Tema Ürün İncelemeleri İnternet

  • Teknoloji Blogu
  • Hakkında
  • Reklam ve Sponsorluk
  • Künye

© 2009 - 2020 Blog içerisindeki yazı ve diğer içerikleri sitemizi kaynak göstererek (bağlantılı şekilde) kullanabilirsiniz. Teknolojinin sevilen blog adresi.

Sonuç Bulunamadı
Tüm sonuçları göster
  • Anasayfa
  • Kategoriler
    • Blog
    • Profesyonel Blogculuk
    • WordPress
      • WordPress Tema
    • Teknoloji Haberleri
      • Programlar
    • Tasarım ve Yazılım
    • İnternet
    • Mobil Cihazlar
      • Android
      • Apple-iOS
    • Nasıl Yapılır ?
    • Oyun
    • Mühendislik
    • Tanıtımlar
  • Hakkımda
  • Reklam
  • İletişim

© 2009 - 2020 Blog içerisindeki yazı ve diğer içerikleri sitemizi kaynak göstererek (bağlantılı şekilde) kullanabilirsiniz. Teknolojinin sevilen blog adresi.