Css ve Html İle Köşeleri Oval Yapma Uygulaması

YazarHamdiPhone

 

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Köşeleri Oval Yapma Uygulaması programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle Köşeleri Oval Yapma Uygulaması nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.


Css ve Html Programlama Örnekleri



Css ve Html İle Köşeleri Oval Yapma Uygulaması Kod Alanı


Css ve Html  web programlama dilinde Köşeleri Oval Yapma Uygulaması kod metnini oluşturduk. Bu uygulamamızda css ve html web programlama dillerinde köşeleri oval yapma yani Border-Radius Kullanımı işlemlerini gerçekleştireceğiz. Kutu köşelerini veya istenilen herhangi bir etiketin köşelerini ovalleştirebiliriz. Tüm köşeler de bu durumu uygulayabileceğimiz gibi ayrı ayrı olarak sol üst köşe, sağ üst köşe, sol alt köşe gibi yumuşatma işlemlerini gerçekleştirebiliriz. 


Uygulamanın html kod metin alanı aşağıdaki gibidir:


<!DOCTYPE html>
<html>
<head>
    <title>www.programlamahocam.com</title>
    <link href="border.css" rel="stylesheet">
    <meta charset="utf-8">
</head>
<body>
    
    <div class="tum-kenar">Border-radius kullanarak tüm kenarları oval yapma.</div>
    <div class="sol-ust">Border-radius kullanarak sol üst kenarı oval yapma</div>
    <div class="sol-alt">Border-radius kullanarak sol alt kenarı oval yapma</div>
    <div class="sag-ust">Border-radius kullanarak sol üst kenarı oval yapma</div>
    <div class="temizle"></div>
    <div class="sag-alt">Border-radius kullanarak sağ üst kenarı oval yapma</div>
    <div class="sol-sag-ust">Border-radius kullanarak sol ve sağ üst kenarı oval yapma</div>
    <div class="sol-ust-sag-alt">Border-radius kullanarak sol üst ve sağ alt kenarı oval yapma</div>
    <div class="sol-ust-sag-alt">Border-radius kullanarak sağ üst ve sol alt kenarı oval yapma</div>
    <div class="temizle"></div>
    
    <div class="yuvarla-bir"></div>
    <div class="yuvarla-iki"></div>
    <div class="yuvarla-uc"></div>
    <div class="yuvarla-dort"></div>
    
    <div class="temizle"></div>
    
    <div class="yuvarla-uc"></div>
    <div class="yuvarla-dort"></div>
    <img class="resim" src="img/featured/1.jpg" alt="Resim">
    
</body>
</html>



Uygulamanın css kod metin alanı aşağıdaki gibidir:


.tum-kenar {
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
}

.sol-ust{
    
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-top-left-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
    }

.sol-alt{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-bottom-left-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
    }
.sag-ust{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-top-right-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
}

.sag-alt{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-bottom-right-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
}

.sol-sag-ust{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
}

.sol-ust-sag-alt{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
}
.sag-ust-sol-alt{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: green;
    width: 200px;
    height: 100px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    color: white;
    margin: 20px;
    float: left;
}

.yuvarla-bir {
    border-radius: 15px; 
    margin:10px;
    float: left;
    width: 150px;
    height: 150px;
    border:#0287D0 10px solid;
}
.yuvarla-iki {
    border-radius: 25px 5px;
    margin:10px;
    float: left;
    width: 150px;
    height: 150px;
    border:#A527D0 10px solid;
}
.yuvarla-uc {
    border-radius: 10px 20px 30px 40px; 
    margin:10px;
    float: left;
    width: 150px;
    height: 150px;
    border:#02F78A 10px solid;
}
.yuvarla-dort {
    border-radius: 0px 50% 50% 50%; 
    margin:10px;
    float: left;
    width: 150px;
    height: 150px;
    border:#665544 10px solid;
}
 
.yuvarla-bes {
    border-radius: 80px/40px; 
    margin:10px;
    float: left;
    width: 150px;
    height: 150px;
    border:#aa22cc 10px solid;
}
.yuvarla-alti {
    border-radius: 20px/150px; 
    margin:10px;
    float: left;
    width: 150px;
    height: 150px;
    border:#224433 10px solid;
}

.resim{
    border-radius: 50%;
    width:200px;
    height: 200px; 
    float: left;
}

.temizle{
    clear: both;
}


Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.

Kategori

Yorum Gönder

Daha yeni Daha eski

İletişim