Aşağıdaki css ile resim üzerine getirince resim üzerinde güneş yansıması gibi efek geçiyor shine efect diye geçiyor

Css kod

/*RESİM YANSIMA EFEKTİ*/

figure {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
.shine figure {
	position: relative;
}
.shine figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.shine figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/*RESİM YANSIMA EFEKTİ*/

Resim tarafında kullanımı aşağıdaki gibidir

<div class="shine">
        <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
    </div>

Css’de belirtilen alan sonrasını gizlemek ve devamı var niteliğinde üç nokta ( … ) koymak isterseniz aşağıdaki css’i kullanabilirsiniz.

width: 60px;
 overflow: hidden; /* gizle */
 white-space: nowrap; /* alt satıra inme */
 text-overflow: ellipsis;

Android studio da ilk kurulumdan sonra eğer ayar yapmaz iseniz otomatik olarak son açılan projeyi otomatik olarak açmaktadır. Bunu iptal etmek için

” File -> Settings -> Appearance & Behaviour -> System Settings  ” gidin burda Reopen last project on startup.  yanındaki tiki kaldırmanız yeterlidir.

Css Kodumuz ;

body{

    background: url(arkaplan.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Google adsense son çıkan responsive reklamları ile artık bulunduğu divin veya table otomatik boyutunu alıyor fakat bazı durumlarda bu böyle olmuyor, div veya table nin dışına taşabiliyor.İşte böyle durumlarda aşağıdaki css tanımlamanız yeterlidir

.adsbygoogle {
  display: inline-block;
  width:100%;
  overflow: hidden;
}

Kimi zaman jquery vss kullanmadan direk css ile ul ve li kullanarak açılır menü yapmamız gerekebilir işte böyle durumlarda aşağıdaki kodlar işinizi görücektir. Direk kopyala yapıştır yap çalışır

Html Kısmı

<ul>
        <li><a href="#index">Ana sayfa</a></li>
        <li><a href="#hakkımızda">Hakkımızda</a></li>
        <li>
            <a href="#Ders">Ders</a>
            <ul>
                <li><a href="#php">php</a> </li>
                <li><a href="#css">css</a></li>
                <li><a href="#html">html</a></li>
            </ul>
        </li>
        <li><a href="#referanslar">Referanslar</a>
            <ul>
                <li><a href="#php">php</a> 
                
                    <ul>
                        <li><a href="#php">php</a> </li>
                    </ul>
                
                </li>
                </ul>
         </li>
        <li><a href="#iletisim">İletişim</a></li>
    </ul>

Css Kısmı

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #34495e;
    }

    li {
        display: inline-block;
    }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

            li a:hover {
                background-color: #f39c12;
            }

    ul li ul {
        background-color: #2c3e50;
        display: none;
        position: absolute;
        width: 100px;
    }

    ul li:hover ul {
        display: block;
    }

    li ul li {
        display: block;
    }

Bir sonraki yazıda görüşünceye kadar hepiniz kendinize iyi bakınız