CSS ile sadece bir kenara gölge vermek

CSS ile sadece bir kenara gölge vermek

CSS ile diğer kenarlar keskin iken sadece bir kenara gölge verebiliriz. Bunun için  :pseudo-element komutu işimize yarayacaktır. Pseudo ingilizcede “sözde” anlamına gelir, yani aslında olmayan ama varmış gibi kabul edilen şey. Bunu yapmak için bir tane div etiketi açalım ve id’sine panel diyelim.

HTML:

<div id=“panel”> <p>Panel Content</p> </div>

CSS:

#panel {
position: relative;
width: 25%;
height: 50px;
background-color: #161616;
color: #fff;
margin: 20px auto;
text-align: center;
}
#panel:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top : -10px;
left: 0;
background: linear-gradient(0deg, #00c6ff, #00c6ff calc(100% - 20px), rgba(0, 198, 255, 0));
z-index: -1;

DEMO: uygulamanın önizlemesine buradan bakabilirsiniz.

Gelen arama terimleri

CSS ile gölge efekti, CSS box-shadow, CSS linear-gradient, CSS ile bir  :pseudo-element

Kaynak: Stackoverflow

Önceki

ingilizce Present continuous tense (I’m doing)

Sonraki

WordPress sitenize virüs bulaşırsa ne yapmalısınız

Email aboneliği

Esakademi.com'dan iyi ve güzel haberler almak için listeye mailinizi ekleyin