HTML ve CSS Kullanarak Kart Vurgu Efekti

KERİM ERBAY · 23 Kas 2023

HTML ve CSS Kullanarak Kart Vurgu Efektinin nasıl oluşturulacağını öğreniyoruz . Bu Kart Vurgu Efektinde, bir kartın üzerine geldiğinizde Kartın arka plan rengi değişir ve bir köşede bir şekil belirir ve bu, yalnızca Html ve Css kullanan tamamen animasyonlu bir vurgulu efekt kartıdır.

HTML ve CSS Kullanarak Kart Vurgu Efekti

Kullanıcı bir öğenin üzerine geldiğinde CSS vurgulu efekti oluşur ve öğe geçiş efektleriyle yanıt verir. Web sayfasındaki önemli öğeleri işaretlemek için kullanılır ve kullanıcı deneyimini geliştirmenin etkili bir yoludur.
Vurgulu özelliğinin sözdizimi şöyledir:

HTML öğesi: üzerine gelin{

/* Css özellik değişikliği buraya yazılır /*

}

Kart Vurgulu Efekti İçin HTML Kodu

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card With Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="content">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, necessitatibus?</p>
</div>
</div>
</body>
</html>

Kart vurgulu efektimize bir çerçeve eklemek için html dosyalarımıza birkaç kritik bağlantı eklemeliyiz. Bu projede bağımsız olarak kullanıldığı için HTML'mizde CSS'ye bağlanmamız gerekiyor; bağlantıları head etiketinin içine eklenmelidir.

HTML:

<link rel="stylesheet" href="style.css" />

CSS kartı vurgulu efektimizin yapısını ekleyeceğiz. Div etiketini kullanarak kartımız için ana kapsayıcıyı oluşturacağız ve ardından h1> etiketini kullanarak kartımıza başlık ekleyeceğiz. Ayrıca p> etiketini kullanarak kartımızın içindeki içeriği ekleyebilmek için paragrafı ekleyeceğiz.

Kart Vurgulu Efekti için tüm Html Kodu mevcuttur. Artık çıktıyı Css olmadan görebilirsiniz, ardından Card vurgulu efektimiz için Css yazıyoruz.

Html Çıkışı

HTML ve CSS Kullanarak Kart Vurgu Efekti

Kart Vurgulu Efekti İçin CSS Kodu

CSS:

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card{
width: 250px;
height: 300px;
position: relative;
cursor: pointer;
}
.card .content{
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.089);
backdrop-filter: blur(20px);
border: 1px solid white;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.055);
transition: all .4s;
}
.card .content p{
font-size: 0.8em;
padding: 0.3em 1.5em;
text-align: center;
}
.card:hover .content{
color: rgb(36, 36, 36);
}
.card::before,
.card::after{
content: '';
position: absolute;
width: 100%;
height: 50%;
background: #7F00FF;
z-index: -20;
transition: all .4s;
}
.card::before{
top: 0;
right: 0;
}
.card::after{
bottom: 0;
left: 0;
background: #E100FF;
}
.card:hover::before{
width: 50px;
height: 50px;
transform: translate(20px, -20px);
border-radius: 50%;
}
.card:hover::after{
width: 100px;
height: 100px;
transform: translate(-20px, 20px);
border-radius: 50%;
}

Adım 1: Evrensel öğe seçiciyi (*) kullanarak, dolgu ve kenar boşluğu "sıfır" olarak ayarlanacak ve kutu boyutlandırma özelliğini "kenarlık kutusu" olarak ayarlamak için kutu boyutlandırma özelliği kullanılacaktır. Font-family özelliğini kullanarak font ailesini “Poppins” olarak değiştireceğiz.

Şimdi body tag seçiciyi kullanarak gövdemizi şekillendireceğiz, ekranı “flex” olarak ayarlayacağız ve justify-content özelliğini kullanarak içeriği ortaya hizalayacağız ve yüksekliği “100vh” olarak ayarlayacağız.

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Adım 2: Şimdi sınıf seçiciyi kullanarak genişlik ve yüksekliği sırasıyla 250 ve 300 piksele, konum özelliğini ise “relative” olarak atayacağız.

Artık stili kartımıza eklediğimize göre, metnin genişliğini ve yüksekliğini “%100” olarak ayarlayacağız ve arka plan özelliğini kullanarak lacivert bir arka plan ekleyeceğiz. Materyalimizin sunumu esnektir. Geçiş özelliğini kullanarak her sınıfa bir geçiş ekleyeceğiz.

CSS:

.card {
    width: 250px;
    height: 300px;
    position: relative;
    cursor: pointer;
}

.card .content {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.089);
    backdrop-filter: blur(20px);
    border: 1px solid white;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.055);
    transition: all .4s;
}

.card .content p {
    font-size: 0.8em;
    padding: 0.3em 1.5em;
    text-align: center;
}

Adım 3: Artık vurgu özelliği, metin rengini beyaza, konum özelliğini "mutlak"a ve genişlik ve yükseklik özelliklerini sırasıyla "%100" ve "%50"ye ayarlamak için kullanılacaktır. Border-radius özelliğini kullanarak arka planı "mor", genişlik ve yüksekliği "50 px" ve border-radius'u "%50" olarak değiştireceğiz.

CSS:

.card:hover .content {
    color: rgb(36, 36, 36);
}

.card::before,
.card::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    background: #7F00FF;
    z-index: -20;
    transition: all .4s;
}

.card::before {
    top: 0;
    right: 0;
}

.card::after {
    bottom: 0;
    left: 0;
    background: #E100FF;
}

.card:hover::before {
    width: 50px;
    height: 50px;
    transform: translate(20px, -20px);
    border-radius: 50%;
}

.card:hover::after {
    width: 100px;
    height: 100px;
    transform: translate(-20px, 20px);
    border-radius: 50%;
}