Snippets

Parçalar

Add "coloredText" class to the HTML element you want to add color transition effect.

I left a comment where you can change the color values in the CSS code.

HSL is used for the color values. You can google "Rgb to Hsl" and easily change your rgb colors to hsl.

I left a comment where you can change the color transition, expanding and shrinking effect values in the CSS code.

A Text With Gradient Color Animation

An animated text with gradient color transition from left to right and the necessary free CSS and HTML codes that you can copy and paste.  

You can take a look at the comment I left in the HTML code in order to add a new page

A Menu With Fullscreen Transition

A menu which goes fullscreen and the necessary free CSS and HTML codes that you can copy and paste.  

I left a comment in the CSS code where you can change the speed of the reveal animation.

A Text With Reveal Animation On Hover 

A text effect which reveals the hidden content when hovered and the necessary free CSS and HTML codes that you can copy and paste.  

Bu hover animasyonlu buton içindeki yazıyı değiştirmek isterseniz HTML kodu içinde bıraktığım nota göz atabilirsiniz.

In order to change the text inside the button, I left a comment in the HTML code.

I left a comment in the CSS code where you can change the button colors.

To change the transition effect properities, you can play with the CSS code where I left comments as "Svg Visual Animations 1-2".

A Button With Hover Animation And Layer Effect

A button which changes color does a layer effect with layered background  and the necessary free CSS and HTML codes that you can copy and paste.  

I added a comment where you can change the angle, thickness and the position of the line in the CSS code.

Drawing A Line On An Element

Drawing a line on an element you want in order to make it look deleted  and the necessary free CSS and HTML codes that you can copy and paste.  

I left a comment in HTML code where you can change the color of the individual text layers.

A Text With Moving Layers

A text with multiple layers with motion and different colors  and the necessary free CSS and HTML codes that you can copy and paste.  

I left comments in the HTML code where you can change the text you want to be revealed when hovered over, title of the pop-up, content and the author of the pop-up element.

I left a comment in the CSS code where you can change the background color of the pop-up element.

A Card With A Pop-up Revealed On Hover

A card with a pop-up revealed when you hover over the selected text and the necessary free Css and Html codes that you can copy and paste.  

Buton renklerini değiştirebilmeniz için CSS kodunda ilgili kısıma not ekledim.

Geçiş animasyonları ile ilgili değişiklikler yapmak için Svg Görsel Animasyonları 1-2 diye not düştüğüm kısımdaki CSS kodları ile oynayabilirsiniz.

Hover Animasyonlu Katmanlı Buton

Üzerine gelince renk ve görsel değiştiren, arka plan katmanına sahip buton için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz Css ve Html kodları. 

CSS kodu içinde çizginin kalınlığını, açısını ve poziyonunu değiştirebileceğiniz yere yorum ekledim.

Element Üstüne Çizgi Çekme

İstediğiniz elementin / yazının üstüne silinmiş izlenimi vermek için çizgi çekme için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz CSS ve HTML kodları.

CSS kodu içinde görünür olma animasyon hızını değiştirebileceniz yere yorum ekledim.

Üzerine Gelince Görünür Olan Animasyonlu Yazı

Üzerine gelindiğinde içeriğin devamını gösteren yazı efekti için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz CSS ve HTML kodları.

Yeni sayfa linki eklemek için HTML kodu İçinde bıraktığım nota göz atabilirsiniz.

Tam Ekran Geçiş Efektli Menü

Açılınca tam ekranı kaplayan menü için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz CSS ve HTML kodları.

Renk geçiş efekti eklemek istediğiniz HTML elementine "coloredText" class'ını ekleyin.

Renk değerlerini değiştirmek için ilgili CSS kodunun üzerine yorum ekledim.

Renk kodu olarak HSL kullanılıyor. Google'a RGB to HSL yazarak RGB renklerinizi kolayca HSL'e dönüştürerek renkleri ekleyebilirsiniz.

Renk değiştirme ve büyüme küçülme efekti değerlerini değiştirebilmeniz için CSS kodu içine ilgili kod üzerine yorum ekledim.

Gradyan Renk Geçiş Animasyonlu Yazı

Soldan sağa doğru hareket eden birden fazla renge sahip animasyonlu yazı için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz CSS ve HTML kodları.

Üstüne gelince bilgi kutucuğunun çıkmasını istediğiniz yazıyı, kart içindeki yazıyı, bilgi kutucuğunun başlığını, bilgi kutucuğu içeriğini ve yazarı değiştirebileceğiniz HTML kodlarının ilgili yerlerine not ekledim.

CSS kodu içinde bilgi kutucuğunun arkaplan rengini değiştirebileceğiniz yere not düştüm.

Üzerine Gelince Açıklama Çıkan Yazılı Kart

Seçili yazının üzerine gelince ufak bir bilgi kutucuğu çıkan kart için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz Css ve Html kodları.

HTML kodu içinde her bir yazı katmanının rengini değiştirebileceğiniz yere yorum ekledim.

Hareketli Katmanlı Yazı Efekti

Birden fazla hareketli ve renkli katmandan oluşan yazı efekti için gerekli tamamen ücretsiz kopyalayıp yapıştırarak kullanabileceğiniz CSS ve HTML kodları.