Css sınır gradyanı | HTML ve CSS kullanarak CSS kenarlık gradyanı

gameserverplay · 20 Eki 2023

HTML kodunda, kodda gösterildiği gibi hangi tür sınıfı istediğiniz, sayı, detay vb. gibi temel şeyleri eklemek istiyoruz.

[CODE lang="html" title="HTML KODU"]<div class="container">
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>01</h2>
<h3>Service One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>02</h2>
<h3>Service Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>03</h2>
<h3>Service Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="tape"></div>
<h2>04</h2>
<h3>Service Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat neque nesciunt possimus eveniet eius assumenda ipsa modi distinctio, sunt earum voluptatem inventore in vel odio adipisci explicabo sint quibusdam nisi!</p>
<a href="#">Read more...</a>
</div>
</div>
</div> [/CODE]

Bunda kenarlık 2 renkte gösterilir ve imleci 1'den 2'ye hareket ettirdiğimizde.Aşağıdaki örnekten bu div'de oluşturulan kenarlık. Ardından css kodunda boy, kilo, arka plan rengi vb. gibi temel şeyleri css kodunda verin.

[CODE lang="css" title="CSS Kodu:"] @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body{
font-family: 'Poppins', sans-serif;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
min-height: 100vh;
background: #060c21;
color:#F#060c21/*
background: #DEDEDE;
color:#0#DEDEDE*/
} [/CODE]

Bunda kodda gösterildiği gibi konteyner, konteyner kutusu vb. tasarlamak istiyoruz.

[CODE lang="css" title="CSS Kodu:"] .container{
position: relative;
width:90%;
display:grid;
grid-template-columns: repeat(auto-fill , minmax(20%, 1fr));
grid-template-rows: auto;
grid-gap:0 40px;
}
.container .box {
position:relative;
height:auto;
padding:0px;
background:rgba(255,255,255,0.0);
display:flex;
justify-content:center;
align-items:center;
border: 1px solid #000;
/*
border:#000 solid #DEDEDE;
*/
/*ov#DEDEDEhidden;*/
}
.box .content {
position:relative;
padding:100px 20px;
background: #060c21;
color:#FFF#060c21
background: #DEDEDE;
colot:#000#DEDEDE
}
.container .box:before {
content:'';
position:absolute;
top:-2px;
left:-2px;
bottom:-2px;
right:-2px;
/*background:rgba(255,255,255,1);*/
background:#FFF;
transform: skew(2deg,2deg);
z-index:-1;
}
.container .box:nth-child(1):before {
background:yellow;
background: linear-gradient(315deg, #ff0057,#e64a19)
}
#ff0057,ner .box:nth-child(1):hover:before {
/*z-index:1;*/ /*example*/
}
.container .box:nth-child(2):before {
background:red;
background: linear-gradient(315deg, #59A600,#008A9C)
}
#59A600,ner .box:nth-child(2):hover:before {
background: linear-gradient(315deg, #89ff00,#00E2FF)
}
#89ff00,ner .box:nth-child(3):before {
background:lime;
background: linear-gradient(315deg, #e91e63,#5d02ff)
}
#e91e63,ner .box:nth-child(4):before {
background:blue;
background: linear-gradient(315deg, #ff0000,#ffc107)
}
#ff0000,ainer .box:after{*/
.container .tape{
overflow:hidden;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,0,0.0);
}
.container .tape:after{
content: '';
position:absolute;
top:0;
left:0;
height:100%;
width:50%;
margin-left:25%;
background: rgba(255,255,255,0.03);
background: rgba(0,0,0,0.1);
pointer-events:none;
transform:skew(41deg);
overflow:hidden;
transition:0.25s; /* 0.5 0.75*/
}
.box:hover .tape:after{
width:100%;
margin-left:0%;
transform:skew(0deg); /*180 0 360 -180 +135 -135*/
}
.box .content h2{
position:absolute;
top:-30px;
right:20px;
margin:0;
padding:0;
font-size:10em;
color:rgba(255,255,255,0.05);
/*color:#000;*/
transition: 0.25s;
}
.box:hover .content h2{
top:-50px;
color:rgba(255,255,255,0.15);
/*color:rgba(0,0,0,0.25);*/
}
.box .content h3{
margin: 0 0 10px;
padding:0;
font-size:24px;
font-weight:bold;
}
.box .content p{
margin:0;
padding:0;
color:#DEDEDE;
/*color:#333;*/
font-size:16px;
}
.box .content a{
position: relative;
margin:20px 0 0 0;
padding:10px 20px;
text-decoration:none;
border: 1px solid #fff;
color: #FFF; #fff*color:#333;#fff display:inline-block;
transition: 0.5s;
visibility:hidden;
transform: translateY(10px);
opacity:0;
}
.box:hover .content a{
visibility:visible;
opacity:1;
transform: translateY(0px);
}
.box .content a:hover{
background:rgba(255,255,255,0.95);
color:#222;
/*
color:#DEDEDE;
background:rgba(0,0,0,0.75);
*/
} [/CODE]