CSS Sihirbazlığı: Görsel Efektlerin Yaratılması

CSS kullanarak web sitenize görsel efektler eklemek oldukça önemlidir. Bu efektler, sitenizin kullanıcı deneyimini artırır ve ziyaretçilerin ilgisini çeker. İşte CSS ile basit ama etkileyici görsel efektler oluşturmanıza yardımcı olacak birkaç örnek:


        .btn {
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }

Yukarıdaki kod bloğu, bir butona hover efekti eklemeyi göstermektedir. Butonun arka plan rengi, fare üzerine gelindiğinde değişecektir. Bu küçük detay, butonun daha etkileyici ve interaktif görünmesini sağlar.


        .box {
            width: 200px;
            height: 200px;
            background-color: #f39c12;
            position: relative;
            overflow: hidden;
        }
        
        .box::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-color: rgba(255, 255, 255, 0.5);
            transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
            border-radius: 50%;
            z-index: 1;
        }
        
        .box:hover::before {
            width: 400px;
            height: 400px;
            top: -150px;
            left: -150px;
        }

Yukarıdaki kod bloğu ise bir kutuya hover efekti eklemeyi göstermektedir. Fare üzerine gelindiğinde kutunun içinde yuvarlak bir efekt oluşacaktır. Bu tür efektler, web sitenizin modern ve ilgi çekici görünmesini sağlar.

Menu

CSS Sihirbazlığı: Görsel Efektlerin Yaratılması

CSS ile Görsel Efektler Oluşturma

İlgili Yazılar