Web sayfalarının daha etkileyici hale getirilmesi için HTML5 ve CSS3 kullanarak farklı görsel efektler oluşturabilirsiniz Bu efektler arasında parlak butonlar, hover animasyonları, gölgeler ve gradientler, transform ve transition kullanımı, hover animasyonlu menüler, background efektleri ve yazı efektleri yer alır Bu efektleri oluşturmak için HTML ve CSS kodlama dillerine hakim olmanız gerekiyor Bu kombinasyon sayesinde görsel efektler daha kolay bir şekilde oluşturulabiliyor ve sitenin görsel zenginliği artırılıyor Parlak butonlar, hover animasyonları, kenarları yuvarlatılmış butonlar ve butonlara ışıltı eklemek gibi farklı efektleri sitenizde kullanabilirsiniz Hover animasyonlu menüler, background efektleri ve yazı efektleri de kullanabileceğiniz diğer efektlerdir Unutmayın, görsel efektler sitenizin daha modern bir görünüme kavuşmasını sağlar ve kullanıcıların ilgisini çeker
Web sayfalarının görsel olarak daha etkileyici hale getirilmesi için HTML5 ve CSS3 kullanarak farklı görsel efektler oluşturmak mümkündür. Bu sayede siteniz daha modern bir görünüme kavuşur ve kullanıcılarınızın ilgisini çeker.
HTML5 ve CSS3 ile parlak butonlar, hover animasyonları, gölgeler ve gradientler, transform ve transition kullanımı, hover animasyonlu menüler, background efektleri, ve yazı efektleri gibi birçok farklı görsel efekt oluşturabilirsiniz.
Bunun için, HTML ve CSS kodlama dillerine hakim olmanız gerekmektedir. Öncelikle, sitenizde kullanmak istediğiniz efekte karar vermeniz ve buna uygun kodlamalar yapmanız gerekir. HTML5 ve CSS3 kombinasyonu sayesinde, görsel efektler daha kolay bir şekilde oluşturulabilmekte ve sitenin görsel zenginliği artırılabilmektedir.
Parlak butonlar gibi basit efektleri oluşturmak oldukça kolaydır. İlgili butonun CSS kodlarını değiştirerek butona hover edildiğinde parlaklık veya renk değişimi sağlayabilirsiniz. Hover animasyonları ise kullanıcıların mouse hareketleriyle etki gösteren görsel efektlerdir. Animasyonlar, butonlar veya menüler gibi farklı bölümlerde kullanılabilirler.
Gölgeler ve gradientler, sitenizdeki butonların daha estetik görünmesini sağlayacaktır. Bu efektleri eklemek için CSS kodları içerisinde belirtilen alanlara ilgili kodları eklemeniz yeterlidir. Transform ve transition kullanımı sayesinde, butonların hover edildiğinde renk veya şekil değiştirmesi gibi farklı efektler de sağlayabilirsiniz.
Hover animasyonlu menüler ise, sitenizin özgünlüğünü arttırmak için kullanabileceğiniz bir tekniktir. Bu efekt, menülerin daha dinamik ve hareketli hale gelmesini sağlayacaktır. Bu sayede, kullanıcıların sayfalar arasında gezinmesi daha kolay bir hale gelecektir.
Background efektleri, web sayfanızın arka planını değiştirerek farklı bir görünüm kazandırmanızı sağlar. Bu efektler arasında, gradient ve resim background kullanımı ve paralaks efekti yer almaktadır. Paralaks efekti, sayfa kaydırıldıkça arka plandaki nesnelerin hareket etmesi sağlanarak dikkat çekici bir görünüm elde edilebilir.
Yazı efektleri ise, sitenizdeki metinlerin daha ilgi çekici hale gelmesini sağlar. Örneğin, yazıya gölgeler veya glow efekti eklemek yazıların daha belirgin hale gelmesini sağlayabilir. Anahtar kelimelerin animasyonlu yazılması da, kullanıcıların ilgisini çekecek ve sitenizin daha yaratıcı bir görünüm kazanmasını sağlayacaktır.
Parlak Butonlar
Web sitenizin görünürlüğünü ve estetiğini artırmak için parlak butonlar oluşturma yöntemleri oldukça etkilidir. Bu yöntemler, sitenizdeki butonların üzerine geldiğinizde daha canlı ve çarpıcı bir görünüm kazanmasına yardımcı olur. İşte, sitenize parlak butonlar eklemek için kullanabileceğiniz birkaç yöntem:
CSS3 gradyanlar, düz renklerden daha zengin bir görsel efekt elde etmenizi sağlar. Butonu çerçevelemek, arka plan rengini parlaklaştırmak veya sınırlarını belirlemek için kullanılabilirler. Bunun için aşağıdaki kod bloğunu kullanabilirsiniz:
.btn { background: linear-gradient(to right, #f5e354, #ff6161); border: 1px solid #f5e354; color: #fff;}Bu kod bloğu, butonun arka planına bir gradiyent verir. İlk solid (#f5e354) renk, gradiyentin solunda, #ff6161 ise sağında yer alır. Border, ana rengin aynısıdır ve btn sınıfını kullanan herhangi bir butonda kullanılabilir.
Transitions, butonunuzun hover edildiğinde renginin değişmesini sağlar. Aşağıdaki kod bloğunu kullanarak, butonun rengi hover edildiğinde koyu yeşil değerlerine dönüşür:
.btn { background: #3cba54; border: none; border-radius: 10px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}.btn:hover { background-color: #357a38; color: white;}Bu kod bloğunda, butonun rengi normal durumda #3cba54 ve hover durumunda #357a38 olarak belirtilmiştir. -webkit-transition-duration ve transition-duration özellikleri, butonun renk geçişinde kullanılan süreyi belirler.
Buton kenarlarını yuvarlatmak, daha modern bir görünüm elde etmenize yardımcı olur. Aşağıdaki kod bloğunu kullanarak buton kenarlarının nasıl yuvarlatılacağını öğrenebilirsiniz:
.btn { background-color: orange; border-radius: 12px; border: none; color: #fff; padding: 12px 24px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.btn:hover { background-color: hotpink;}Bu kod bloğu, butonun arka plan rengini mümkün olduğunca parlak hale getirir ve yuvarlatılmış bir şekli vardır. Butonun hover edildiğinde rengi hotpink'e döner.
Butonlara ışıltı eklemek, daha canlı bir görünüm için mükemmel bir yoldur. Aşağıdaki kod bloğunu kullanarak, butonlarınıza ışıltı ekleyebilirsiniz:
.btn { background-color: #0099CC; border-radius: 22px; border: none; color: white; padding: 22px 45px; text-align: center; text-decoration: none; display: inline-block; font-size: 22px; margin: 4px 2px; cursor: pointer; box-shadow: 0 0 20px #0099CC;}.btn:hover { box-shadow: 0 0 40px #0099CC;}Bu kod bloğu, butonların arka plan rengini belirler ve butonların çevresinde 20px ışıltı ekler. Hover anında, ışıltılar iki katına çıkar ve daha yüksek bir etki elde edilir.
Hover Animasyonları
HTML5 ve CSS3 ile web sayfalarına görsellik katmak oldukça kolay! Bu teknolojiler sayesinde, hareketli ve etkileyici animasyonlar oluşturmak artık çocuk oyuncağı. Bunun için hover animasyonları oldukça kullanışlı yöntemlerdir.
Hover animasyonları, mouse'un buton üzerinde durduğu sürece hareketlerin gerçekleşmesini sağlar. Bu etkileşim, sitenizin canlı, dinamik ve kullanıcı dostu bir görünüme kavuşmasını sağlayabilir. Buton hover animasyonları, menülerde kullanabileceğiniz hover animasyonlu örnekler ve yazı efektleri gibi birçok çeşit animasyonla siteniz öne çıkabilir.
Buton hover animasyonlarına örnek olarak, butonun yapısının hoverda değişiyor gibi gözükmesi, yükselmesi veya boyutunun büyümesi verilebilir. Ayrıca, butona hover işlemi uygulandığında, mouse'un gittiği yönlerde çizgilerin oluşmasını da sağlayabilirsiniz. Böylece butonda bir hareketlilik hissi oluşur ve kullanıcının ilgisini çekersiniz.
Hover animasyonları sadece butonlarda değil, menülerde de kullanılabilir. Menü öğelerine uygulanan hover animasyonlarıyla, kullanıcılar menülere gezindikçe görsel bir keyif yaşayabilirler. Menü öğelerinin arka planında kullanılacak gradientler ve hover animasyonları sayesinde, menüleriniz hem estetik görünüm kazanacak hem de kullanıcılarınızın hoşuna gidecek.
Bunun yanı sıra, hover animasyonlu menülerde yazıların doğru bir şekilde yerleştirilmesi de oldukça önemlidir. Menülerdeki yazılar, kullanıcılarınızın kolayca okuyup anlayabileceği font tipi ve boyutlarıyla oluşturulmalıdır. Ayrıca yazıların yoğunluğuna dikkat edilmeli, sade ve anlaşılır bir dil kullanılmalıdır.
Sonuç olarak, hover animasyonları web sitelerinde görsellik katmanın en iyi yöntemlerinden biridir. Butonlar, menüler ve yazı efektleri gibi birçok farklı alanda kullanılabilen hover animasyonları, sitenizin daha estetik ve kullanıcı dostu bir görünüme kavuşmasını sağlar. Bunun yanı sıra, hover animasyonlarının doğru bir şekilde kullanılması da oldukça önemlidir. Öğrenmeye başlayın ve sitenizin tasarımını daha profesyonel hale getirin!
Buton Hover Animasyonları
Buton hover animasyonları, web sitelerinde butonların sadece görünümünü değil, etkileşimini de değiştirerek dikkat çekici bir görünüm sağlar. Bu animasyonlar butonun üzerine gelindiğinde veya tıklandığında yapılabilir. Bunun yanı sıra, animasyonlar butonun sınırlarını veya tersine dış sınırları çizerek oluşturulabilir. Buton hover animasyonları, kullanıcılara bir butona tıklamadan önce ne olacağını anlamalarını veya gösterir. İşte butonlara uygulanabilen eğlenceli hover animasyonları:
- Renk Değiştirme: Hover edildiğinde veya tıklandığında butonun rengi değiştirilebilir.
- Arkadan Çıkma: Butonun arka planından çıkan bir filtre ile butonun üzerine gelişi daha dinamik hale getirilebilir.
- Kabarcık Efekti: Butonun üzerine gelindiğinde kümelenen kabarcıkların oluşturulması.
- Gölgeler: Butonun gölgesi, hover edildiğinde hareket ederek belirgin hale getirilebilir.
- Yukarı Kaydırma: Butonun yukarıya doğru kayması gibi bir efekt oluşturulabilir.
Bu animasyonlar, butonların kullanıcıların ilgisini çekmesini sağlayarak web sitelerinin görsel estetiğini artırır. Ancak, buton hover animasyonlarının kullanımı aşırı olmamalı ve sitenin ana hedeflerine uygun olmalıdır.
Gölgeler ve Gradientler
Web sitenizdeki butonlara, gölgeler ve gradientler ekleyerek daha estetik bir görünüm kazandırabilirsiniz. Gölgeler, butonların diğer elementlerden ayırt edilmesini sağlar ve boyutunu vurgular. Gradientler ise renk geçişleri ile butonlara 3 boyutlu bir görünüm kazandırır.
Gölgeler ve gradientler oluşturmak için CSS3'te bulunan box-shadow ve background-image gibi özellikleri kullanabilirsiniz. Box-shadow ile butonunuza gölgeler eklemek için aşağıdaki syntax'ı kullanabilirsiniz:
box-shadow: x-offset y-offset blur spread color;
Burada x-offset ve y-offset gölgenin koordinatlarını, blur ile gölgenin bulanıklığını, spread ile gölgenin yayılmasını ve color ile gölgenin rengini belirleyebilirsiniz.
Aynı şekilde background-image özelliği ile butonunuza gradientler ekleyebilirsiniz. Bir CSS gradient örneği:
background-image: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
Burada 'linear-gradient' ile dikey bir gradient oluşturuldu. Renkler ve yüzdeler istenildiği gibi değiştirilebilir.
Butonunuzun arka planını güzelleştirmek için gölgeler ve gradientler kullanarak farklı tasarımlar yaratabilirsiniz.
Transform ve Transition Kullanımı
Butonlara görsel çekicilik katmak için transform ve transition özellikleri oldukça önemlidir. Hover edildiğinde butonların renk veya şekil değiştirmesi kullanıcılara interaktif bir deneyim sunar. Transform özelliği, nesnelerin boyut, boyut oranı, dönme, eğilme ve perspektif değiştirmelerinde kullanılır. Transition özelliği ise belirli zamanlarda nesnelerin geçişinin nasıl olacağına karar verir. Bu özelliklerin birlikte kullanımı, hover edildiğinde butonlara görsel olarak neler olabileceğini hayal etmek için oldukça önemlidir. Ayrıca, butonların boyut, renk veya şekil değişimlerinin ne kadar hızlı gerçekleşeceğini belirleyen transition-delay değeri de kullanıcıların deneyimini etkileyebilir. Örnek olarak, hover edildiğinde butonun boyutunun küçülüp, renginin değişmesi gibi basit ama etkili görsel efektler oluşturabilirsiniz.
Hover Animasyonlu Menüler
Web sitenizin menülerini daha dinamik ve ilgi çekici hale getirebilirsiniz. Bunun için hover animasyonlarını kullanabilirsiniz. Bir menü elemanı üzerine geldiğinizde değişen bir renk, şekil veya animasyon oluşturabilirsiniz.
Örneğin, bir menü elemanı üzerinde gezinme yaparken arkaplan renginin değişmesi veya elemanın hafifçe büyümesi, menüyü daha ilgi çekici hale getirebilir. Bunun için, :hover özelliği kullanarak CSS kodlarınızı yazabilirsiniz.
Hover animasyonlarıyla menülerinizde kullanabileceğiniz bazı etkiler şunlardır:
- Arkaplan renginin değişmesi
- Yazı renginin değişmesi
- Yazının ani kaybolması veya belirmesi
- Gölgeler veya gradientlerin eklenmesi
Örneğin, bir menü elemanının üzerine gelindiğinde arkaplan renginin değişmesi için CSS kodları şöyle olabilir:
| HTML Kodları | CSS Kodları |
|---|---|
| <ul> <li> <a href="#">Anasayfa</a> </li> </ul> | li:hover { background-color: #ff0000; } |
Bu kodlar, Anasayfa isimli menü elemanı üzerine geldiğinde arkaplan renginin kırmızıya dönmesini sağlayacaktır.
Yukarıdaki örnek, sadece bir menü elemanında kullanılan hover efektidir. Menünüzdeki tüm elemanlara hover animasyonlarını uygulayarak, web sitenizin kullanıcı deneyimini artırabilirsiniz.
Background Efektleri
Web siteleri popülerliğini artırmak için farklı yöntemler kullanabilir. Bunlardan biri de site backgrounduna görsel efekt uygulamaktır. HTML5 ve CSS3 kullanarak web sitenize farklı efektler verebilirsiniz. İşte web siteniz için background efektleri oluşturabileceğiniz birkaç yöntem:
Backgroundunuza uygulayabileceğiniz en basit yöntemlerden biri bir resim veya gradient kullanmaktır. CSS3 size farklı renk seçenekleriyle güzel bir gradient background sağlar. Sadece CSS kodunu doğru şekilde yazmanız yeterlidir.
| Örnek CSS Kodu |
|---|
| background: linear-gradient(to right, #000000, #ffffff); |
Bir resim backgroundu da kullanabilirsiniz. Sadece CSS'de kullandığınız "background-image" kodunu ayarlamak gerekir. Ayrıca, resmin boyutunu da düzenleyebilirsiniz.
| Örnek CSS Kodu |
|---|
| background-image: url('resim_adresi.jpg'); |
Paralaks efekti, kullanıcılar sayfayı aşağı kaydırdığında backgroundtaki nesnelerin ayrı bir hızda hareket etmesini sağlayan bir görsel efekttir. Bu, web sitenize derinlik katmanın yaratılmasına yardımcı olur. Bu efekti oluşturmak için CSS3 animasyonları kullanabilirsiniz.
| Örnek CSS Kodu |
|---|
| @keyframes parallax { 0% {background-position: center 0px;} 50% {background-position: center 50px;} 100% {background-position: center 0px;} } |
Bu kod, background image'ınızı sayfaya paralel 50 piksel kaydırır. Tabii ki, bu değerleri istediğiniz gibi ayarlayabilirsiniz.
Web sitenize daha eğlenceli bir background efekti eklemek istiyorsanız süslü animasyonlar oluşturabilirsiniz. CSS3 animasyonlarından yararlanarak farklı animasyonlar oluşturabilirsiniz. Bu animasyonlar, web sitenizi öne çıkaran görsel efektlerdir.
- background-color animasyonları
- background-image fade-in/out efektleri
- background position animasyonları
HTML5 ve CSS3 kullanarak web sitenize farklı background efektleri uygulayabilirsiniz. Site ziyaretçilerinin gözünü yakalayan ve dikkatlerini çeken bir background, sitenizin popülerliğini artıraçaktır.
Gradient ve Resim Background Kullanımı
Web sayfalarının backgrounduna estetik bir görünüm katmak için farklı tasarım araçlarını kullanabilirsiniz. Bu araçların başında ise gradient ve resimler geliyor. Backgrounda resim ya da gradient eklemek oldukça kolaydır ve CSS3 ile birkaç satır kod yazarak bu işlemi gerçekleştirebilirsiniz.
Gradient eklemek için şu kodları kullanabilirsiniz:
| Özellik | Kod |
|---|---|
| Linear Gradient | background: linear-gradient(direnç, renkler); |
| Radial Gradient | background: radial-gradient(direnç, renkler); |
Resim eklemek için ise HTML'de kullanılan birkaç satır kod ve CSS'de belirtilen bazı ayarlar ile bu işlem gerçekleştirilebilir. Örneğin:
- <div style="background-image:url(resim-yolu);"></div>
- .div { background-image: url(resim-yolu); }
Burada "resim-yolu" yazan yere, eklemek istediğiniz resmin kaynak URLsini belirtebilirsiniz.
Gradient ve resim background kullanımı ile bir web sayfasının daha estetik bir görüntüye kavuşması mümkündür. Ancak, bu özellikleri kullanırken sayfanın yavaşlamamasına ve kullanıcı deneyimini olumsuz etkilememeye dikkat edilmelidir.
Paralaks Efekti
Web sitenize daha fazla görsellik katmak için farklı efektler kullanabilirsiniz. Bu efektlerden birisi de paralaks efektidir. Paralaks efekti, sayfanın kaydırılmasıyla birlikte arka planda bulunan nesnelerin harekete geçmesiyle oluşur.
Paralaks efekti uygulamak için HTML ve CSS kodlarını kullanabilirsiniz. İlk önce, sayfanın arka planına bir resim veya background rengi eklemeniz gerekiyor. Sonrasında, bu arka planı örtme niteliği taşıyan başka bir div elementi ekleyin. Bu elementin style özelliğinde, "background-attachment: fixed" kodunu yazarak arka planın sabit kalmasını sağlayın.
Ardından, paralaks efekti oluşturmak için background resim veya renginin pozisyonunu belirleyin. Bu pozisyon, "background-position: center" kodu ile belirlenir. Eğer bu pozisyona ekstra bir hareket kazandırmak isterseniz "background-position: center -100px" gibi bir kod da kullanabilirsiniz.
Paralaks efekti daha da ileri seviyede birçok uygun sınıf ve bileşenlerle kolayca oluşturulabilir. Bu sınıfların içeriği sayfayı daha hareketli hale getirebilir ve kullanıcıların dikkatini çekebilir. Örneğin, Bootstrap kütüphanesi paralaks efekti için hazır bileşenler sunar.
Paralaks efekti, dinamik ve ilgi çekici bir görsel efekt olarak web sitenize farklı bir boyut kazandırabilir. Ancak, dikkat edilmesi gereken nokta, efektin kullanımında aşırıya kaçmamaktır. Zira, fazla kullanılan efektler sayfanın yükleme süresini artırabilir ve bu da kullanıcı deneyimini olumsuz etkileyebilir.
Yazı Efektleri
Yazı efektleri, metinleri web sayfalarında daha çekici hale getirmek için kullanabileceğiniz görsel tasarım araçlarından biridir. Bu efektleri kullanarak, sayfalarınızın tasarımını daha da ilgi çekici hale getirebilirsiniz. Birkaç örnek vermek gerekirse;
Birinci örnek, gölgeler veya glow efektleri kullanarak metinlerin daha belirgin hale getirilmesidir. Gölgelendirme efektleri, metinlerin ön plana çıkmasına yardımcı olurken, shimmer/glow efektleri de metinlerin daha hoş görünmesine sebep olur.
İkinci örnek ise, anahtar kelimelerin animasyonlu yazılmasıdır. Belirli kelimelerin animasyonlu bir şekilde yazılması, kullanıcıların dikkatini çekerek metninizi daha akılda kalıcı hale getirebilir. Bu efekti kullanırken, abartıdan kaçınmak önemlidir.
Üçüncü örnek ise, metinlerin boyutunun değiştirilmesi veya farklı şekiller(lejantlar) verilmesidir. Bu tasarım öğesi, metinlerinizi daha özgün hale getirmenizi sağlar. Kullanımı çok abartılırsa, okunaklığı düşürebilir.
Bu örneklerin yanı sıra, metinlerinizde bulunan harflerin veya kelimelerin renklerini, fontlarını, arka plan rengini veya transparanlığını değiştirebilirsiniz. Bunları kullanırken, sayfalarınızın genel görünümü ile uyumlu olmasına dikkat etmelisiniz.
Tüm bu efektlerin yanı sıra, her zaman ana amacınızın okunaklılık olduğunu unutmayın. Tüm görsel efektlerinizi metinlerin okunaklılığına zarar vermeden kullanabilirsiniz.
Yazıya Gölgeler veya Glow Effekti Ekleme
Web sayfalarında yer alan yazıların belirginliğini artırmak için gölgeler veya glow efektleri kullanılabilir. Bu efektler, sayfadaki yazıların daha dikkat çekici olmasını sağlar ve okunabilirliği artırır.Gölgeler, yazıların altına veya etrafına uygulanabilir. Yazıların altına uygulanan gölge, yazının daha hacimli görünmesini sağlar. Etrafına uygulanan gölgeler ise yazıları daha belirgin hale getirir. Glow efektleri ise havada kalan bir yazı etkisi yaratır ve yazıların sayfada daha öne çıkmasını sağlar.Bu efektleri uygulamak için CSS3 kullanabilirsiniz. Örneğin, yazıların altına gölge eklemek için aşağıdaki CSS kodunu kullanabilirsiniz:text-shadow: 2px 2px 2px #000000;Bu kod, her yazının altına 2 piksel boyutunda ve siyah renkte bir gölge ekler.Glow efektleri ise şu şekilde uygulanabilir:
text-shadow: 0px 0px 25px #ffffff;Bu kod, yazıların etrafına beyaz bir glow efekti ekler. Glow efektinin rengi ve boyutu CSS kodu içerisinde değiştirilebilir.Bu görsel efektler, web sayfalarındaki yazıların daha belirgin hale gelmesini sağlar ve kullanıcıların dikkatini çeker. Ancak efektlerin abartılı kullanımı, sayfanın okunabilirliğini azaltabilir ve kullanıcıların gözlerinde rahatsızlık yaratabilir. Dolayısıyla, efektlerin kullanımında dikkat etmek gereklidir.Sonuç olarak, gölgeler ve glow efektleri gibi görsel efektler kullanarak web sayfalarındaki yazıları daha belirgin hale getirebilirsiniz. Ancak, efektleri kullanmadan önce sayfanın amacına uygun şekilde tasarlanması ve efektlerin uygun şekilde kullanılması da önemlidir.
Anahtar Kelimelerin Animasyonlu Yazılması
Belirli anahtar kelimelerinizi öne çıkarmak ve dikkat çekici hale getirmek istiyorsanız, onlara animasyonlu yazı efekti eklemeniz işinize yarayabilir. Bu etkiyi oluşturmak için CSS3 transition ve transform özelliklerini kullanabilirsiniz. Öncelikle, animasyon eklemek istediğiniz anahtar kelimeyi HTML kodları içerisinde belirlemeniz gerekir. Örneğin, kırmızı renkte ve büyük font ile yazmak istediğiniz anahtar kelimeyi şu şekilde belirtebilirsiniz:<p>Web sayfanızın <span class="animation">önemli anahtar kelimelerini</span> animasyonla öne çıkarabilirsiniz.</p>
.animation {
color: red;
transition: color 0.3s ease-in-out;
}
.animation:hover {
color: blue;
}