AOrhan BLOG
  • Anasayfa
  • KategorilerNELER VAR NELER
    • Blog
    • Ürün İncelemeleri
    • 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
    • Ürün İncelemeleri
    • 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
Anasayfa Tasarım ve Yazılım

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

Ahmet Orhan by Ahmet Orhan
2 sene önce
Kategori: Tasarım ve Yazılım
Okunma Süresi: 3 mins read
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 🙂

 

Paylaş82Tweet52GönderPin19

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:
    2 sene ö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:
    2 sene ö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:
    2 sene önce

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

    Cevapla
    • Ahmet Orhan says:
      2 sene ö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.

Haftanın Videoları

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

youtube abone

Wordpress Hosting
aile hekimliği malzemeleri hepsi medikal
tesisat
teknoloji haberleri
valorant point
Seo Nedir
Bi Kredi
Memur Hukuku
Hileli Pc
Greencard

AORHAN ÖNERİYOR

Hosting hasta yatağı apkdayi.com tiny house tiny house akustik sünger akustik panel ses yalıtımı ses yalıtım süngeri akustik sünger Tesettür Trençkot toptan kupa bardak düşmeyen takipçi satın al internet hız testi

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? Xiaomi Yazı Tipini Eski Haline Getirme

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

Instagram Kullanıcı Adları! Komik, Cool, Havalı, Türkçe, İngilizce Kullanıcı İsimleri

Android Ücretli Uygulamaları Ücretsiz İndirme [2022]

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

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 Sponsorlu Tanıtımlar Tasarım ve Yazılım Teknoloji Haberleri Wordpress Wordpress Tema Ürün İncelemeleri İnternet

  • Teknoloji Blogu | Teknoloji Haberleri
  • 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
    • Ürün İncelemeleri
    • 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.

Posting....
AORHAN Youtube Kanalı
En Yenileri Youtube'da! Abone Ol Videoları Kaçırma (Hemen Yanda)
Abone Ol
Videolarımı Kaçırma!
ABONE OL