CSS Örnekleri

Yazı içindeki örnek CSS uygulamaları ile CSS konularını daha kolay kavramanız hedeflenmiştir. CSS Örnekleri bağlantısındaki örnekler resim, tablo, buton, form vb. örnek css uygulamalarınından oluşmaktadır.

CSS Uygulamaları Listesi

CSS Resim Çerceve
CSS Resim Ovalleştirme
CSS Tablo Biçimlendirme Örneği -1
CSS Tablo Örneği 2
CSS Buton Yapımı 1
CSS Buton Yapımı 2
CSS HTML Form Yapımı
CSS Dikey Menü Oluşturma
CSS Yatay Menü Oluşturma
CSS Poloraid Fotoğraf Çerçevesi Oluşturma
CSS Panel Örnek

Yazılım Bilişim üzerinde hazırlanmış diğer CSS örnekleri ve CSS derslerini görmek için ilgili bağlantıya tıklayabilirsiniz.

CSS Resim Çerceve


.cerceve{
border:5px dashed DarkSlateBlue;
}

.cerceve{

border:5px dashed DarkSlateBlue;

}


<img class="cerceve" src="https://i0.wp.com/www.yazilimbilisim.net/wp-content/uploads/2016/08/kapak.png?resize=620%2C330" alt="Web Sayfası Tasarımı" />

CSS Resim Ovalleştirma


.yuvarla {
border-radius: 50%;
}

.yuvarla {

border-radius: 50%;

}


<img class="yuvarla" src="https://unsplash.it/300/300/?random">

CSS Tablo Biçimlendirme Örneği -1


#personel {
border-collapse: collapse;
width: 100%;
background-color: #ecf0f1;
font-weight: bold; 
}

#personel td, #personel th {
padding: 8px;
}

#personel th {
background: #3498db;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: #fff;
}

#personel td{
color:#2c3e50;
}

#personel {

border-collapse: collapse;

width: 100%;

background-color: #ecf0f1;

font-weight: bold;

}

#personel td, #personel th {

padding: 8px;

}

#personel th {

background: #3498db;

padding-top: 12px;

padding-bottom: 12px;

text-align: left;

color: #fff;

}

#personel td{

color:#2c3e50;

}


<table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>

<tr>

<th>Soyad</th>

</tr>

<tr>

<td>Asuman</td>

<td>Göldağ</td>

</tr>

<tr>

<td>Ünlüsoy</td>

<td>Mansur</td>

</tr>

<tr>

<td>Cansen</td>

<td>Karaburun</td>

</tr>

<tr>

<td>Ülküsel</td>

<td>Özkahraman</td>

</tr>

<tr>

<td>Funda</td>

<td>Sığırcı</td>

</tr>

<tr>

<td>Edibe</td>

<td>Farımaz</td>

</tr>

<tr>

<td>Uluer</td>

<td>Akgül</td>

</tr>

<tr>

<td>Tarımer</td>

<td>Zımba</td>

</tr>

<tr>

<td>Alaca</td>

</tr>

<tr>

<td>Hafız</td>

<td>Bayduz</td>

</tr>

</table>

CSS Tablo Örneği 2


#personel {
border-collapse: collapse;
width: 100%;
}

#personel td, #personel th {
border: 1px solid #ddd;
padding: 8px;
}

#personel tr:nth-child(even){background-color: #f2f2f2;}

#personel tr:hover {
background-color: #2ecc71;
color:#fff;
}

#personel th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #2c3e50;
color: white;
}

#personel {

border-collapse: collapse;

width: 100%;

}

#personel td, #personel th {

border: 1px solid #ddd;

padding: 8px;

}

#personel tr:nth-child(even){background-color: #f2f2f2;}

#personel tr:hover {

background-color: #2ecc71;

color:#fff;

}

#personel th {

padding-top: 12px;

padding-bottom: 12px;

text-align: left;

background-color: #2c3e50;

color: white;

}


<table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>

<tr>

<th>Soyad</th>

</tr>

<tr>

<td>Asuman</td>

<td>Göldağ</td>

</tr>

<tr>

<td>Ünlüsoy</td>

<td>Mansur</td>

</tr>

<tr>

<td>Cansen</td>

<td>Karaburun</td>

</tr>

<tr>

<td>Ülküsel</td>

<td>Özkahraman</td>

</tr>

<tr>

<td>Funda</td>

<td>Sığırcı</td>

</tr>

<tr>

<td>Edibe</td>

<td>Farımaz</td>

</tr>

<tr>

<td>Uluer</td>

<td>Akgül</td>

</tr>

<tr>

<td>Tarımer</td>

<td>Zımba</td>

</tr>

<tr>

<td>Alaca</td>

</tr>

<tr>

<td>Hafız</td>

<td>Bayduz</td>

</tr>

</table>

CSS Buton Yapımı 1


.yuvarla {
width: 100px;
height: 100px;
line-height: 100px;
text-decoration: none; 
text-align: center;
font-size: 25px; 
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em; 
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 50%;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-width: 4px;
border-style: solid;
background-color: rgba(252,227,1,1);
border-color: rgba(153,38,0,.2); 
}
.yuvarla:hover {
box-shadow: 0px 0px 7px 2px rgba(0,0,0,.5);
border-color: rgba(153,38,0,.5); 
}
.yuvarla a{
color: rgba(153,38,0,1);

}

.yuvarla {

width: 100px;

height: 100px;

line-height: 100px;

text-decoration: none;

text-align: center;

font-size: 25px;

text-shadow: 0 1px 0 rgba(255,255,255,.7);

letter-spacing: -.065em;

box-shadow: 2px 2px 7px rgba(0,0,0,.2);

border-radius: 50%;

-webkit-transition: all .25s ease-in-out;

-o-transition: all .25s ease-in-out;

-moz-transition: all .25s ease-in-out;

transition: all .25s ease-in-out;

box-shadow: 2px 2px 7px rgba(0,0,0,.2);

border-width: 4px;

border-style: solid;

background-color: rgba(252,227,1,1);

border-color: rgba(153,38,0,.2);

}

.yuvarla:hover {

box-shadow: 0px 0px 7px 2px rgba(0,0,0,.5);

border-color: rgba(153,38,0,.5);

}

.yuvarla a{

color: rgba(153,38,0,1);

}


<div class="yuvarla">
<a href="#">Kayol</a>
</div>

<a href="#">Kayol</a>

</div>

CSS Buton Yapımı 2


button.ornek {
-webkit-transition: all 0s ease-out;
-moz-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
-ms-transition: all 0s ease-out;
transition: all 0s ease-out;
height: 35px;
display: block;
font-family: Arial, "Helvetica", sans-serif;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
padding: 4px 20px 0;
margin: 10px auto;
left: 30px;
position: relative;
cursor: pointer;
border: none;
border-radius: 5px;
border-radius: 5px;
border: solid 1px #2E4476;
background: #3B5999;
-webkit-box-shadow: 0px 5px 0px 0px #2E4476;
box-shadow: 0px 5px 0px 0px #2E4476;
}
button.ornek:active {
top: 3px;
-webkit-box-shadow: 0px 2px 0px 0px #2E4476;
box-shadow: 0px 2px 0px 0px #2E4476;
}

button.ornek {

-webkit-transition: all 0s ease-out;

-moz-transition: all 0s ease-out;

-o-transition: all 0s ease-out;

-ms-transition: all 0s ease-out;

transition: all 0s ease-out;

height: 35px;

display: block;

font-family: Arial, "Helvetica", sans-serif;

font-size: 14px;

color: #fff;

text-decoration: none;

text-align: center;

text-shadow: 0px -1px 0px rgba(0,0,0,0.4);

padding: 4px 20px 0;

margin: 10px auto;

left: 30px;

position: relative;

cursor: pointer;

border: none;

border-radius: 5px;

border: solid 1px #2E4476;

background: #3B5999;

-webkit-box-shadow: 0px 5px 0px 0px #2E4476;

box-shadow: 0px 5px 0px 0px #2E4476;

}

button.ornek:active {

top: 3px;

-webkit-box-shadow: 0px 2px 0px 0px #2E4476;

box-shadow: 0px 2px 0px 0px #2E4476;

}


<button class="ornek">Beğen!</button>

<button class="ornek">Beğen!</button>

CSS HTML Form Yapımı


#form-alan{
width: 600px;
margin-top: 25px;
}

#form-alan input, #form-alan textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}

#form-alan textarea {
height: 90px;
}

#form-alan textarea:focus, #form-alan input:focus {
border: 2px solid #900;
}

#form-alan input[type="submit"] {
width: 100px;
float: right;
border:3px solid #2980b9;
background: #fff;
color:#2980b9;
}

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}

#form-alan{

width: 600px;

margin-top: 25px;

}

#form-alan input, #form-alan textarea {

padding: 5px;

width: 471px;

font-family: Helvetica, sans-serif;

font-size: 1.4em;

margin: 0px 0px 10px 0px;

border: 2px solid #ccc;

}

#form-alan textarea {

height: 90px;

}

#form-alan textarea:focus, #form-alan input:focus {

border: 2px solid #900;

}

#form-alan input[type="submit"] {

width: 100px;

float: right;

border:3px solid #2980b9;

background: #fff;

color:#2980b9;

}

label {

float: left;

text-align: right;

margin-right: 15px;

width: 100px;

padding-top: 5px;

font-size: 1.4em;

}


<div id="form-alan">

<form method="post" action="#">
<label for="Ad">Ad:</label>
<input type="text" name="Ad" id="Ad" />

<label for="Soyad">Soyad:</label>
<input type="text" name="Soyad" id="Soyad" />

<label for="Email">Eposta:</label>
<input type="text" name="Email" id="Email" />

<label for="Mesaj">Mesaj:</label><br />
<textarea name="Mesaj" rows="20" cols="20" id="Mesaj"></textarea>

<input type="submit" name="kaydet" value="Kaydet" />
</form>
</div>

<label for="Soyad">Soyad:</label>

<label for="Email">Eposta:</label>

<label for="Mesaj">Mesaj:</label><br />

</form>

</div>

CSS Dikey Menü Oluşturma


ul{
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
background-color:#D33257;
color:#E7E7E7;
height:50px;
line-height:50px;
text-decoration:none;
padding-left:10px;
}

li a:hover{
background-color:#3C3741;
padding-left:15px;
}

ul{

list-style-type: none;

margin: 0;

padding: 0;

}

li a {

display: block;

background-color:#D33257;

color:#E7E7E7;

height:50px;

line-height:50px;

text-decoration:none;

padding-left:10px;

}

li a:hover{

background-color:#3C3741;

padding-left:15px;

}


<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">PHP Programlama</a></li>
<li><a href="#">Adobe</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Veritabanı</a></li>
</ul>

<ul>

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Web Tasarım</a></li>

<li><a href="#">PHP Programlama</a></li>

<li><a href="#">Adobe</a></li>

<li><a href="#">Jquery</a></li>

<li><a href="#">Veritabanı</a></li>

</ul>

CSS Yatay Menü Oluşturma


ul {
list-style-type: none;
margin: 0;
padding: 0;

}
li{
float:left;
}

li a {
display: block;
background-color:#2CC990;
color:#D8335B;
height:50px;
width: 130px;
text-align: center;
line-height:50px;
text-decoration:none;
transition:all .3s ease-in;
}
li a:hover{
color:#2CC990;
background-color:#D8335B;
}

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li{

float:left;

}

li a {

display: block;

background-color:#2CC990;

color:#D8335B;

height:50px;

width: 130px;

text-align: center;

line-height:50px;

text-decoration:none;

transition:all .3s ease-in;

}

li a:hover{

color:#2CC990;

background-color:#D8335B;

}


<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">PHP Programlama</a></li>
<li><a href="#">Adobe</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Veritabanı</a></li>
</ul>

<ul>

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Web Tasarım</a></li>

<li><a href="#">PHP Programlama</a></li>

<li><a href="#">Adobe</a></li>

<li><a href="#">Jquery</a></li>

<li><a href="#">Veritabanı</a></li>

</ul>

CSS Poloraid Fotoğraf Çerçevesi Oluşturma


body{
background: #282838;
height: 100%;
}
.polaroid {
position: relative;
width: 300px;
float: left;
margin:20px;
}

.polaroid img {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
width: 100%;
}

.polaroid p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
font: 400 18px/1 'Kaushan Script', cursive;
color: #888;
}

body{

background: #282838;

height: 100%;

}

.polaroid {

position: relative;

width: 300px;

float: left;

margin:20px;

}

.polaroid img {

border: 10px solid #fff;

border-bottom: 45px solid #fff;

-webkit-box-shadow: 3px 3px 3px #777;

-moz-box-shadow: 3px 3px 3px #777;

box-shadow: 3px 3px 3px #777;

width: 100%;

}

.polaroid p {

position: absolute;

text-align: center;

width: 100%;

bottom: 0px;

font: 400 18px/1 'Kaushan Script', cursive;

color: #888;

}


<div class="polaroid">
<p>Kız Kulesi, Kasım '15</p>
<img src="https://via.placeholder.com/350x150">
</div>

<p>Kız Kulesi, Kasım '15</p>

</div>

CSS Panel Örnek


body{
background: url(https://unsplash.it/1027/786);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
.panel {
width: 500px;
height: 300px;
left: -webkit-calc( 50% - 250px );
top: 20%;
position: absolute;
border-radius: 5px;
-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
display: flex;
}

body{

background: url(https://unsplash.it/1027/786);

background-repeat:no-repeat;

background-size: cover;

background-attachment: fixed;

}

.panel {

width: 500px;

height: 300px;

left: -webkit-calc( 50% - 250px );

top: 20%;

position: absolute;

border-radius: 5px;

-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);

-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);

box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);

border: 1px solid rgba(255, 255, 255, 0.3);

padding: 20px;

text-align: center;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);

display: flex;

}


<body> 
<div class="panel">
<div class="icerik">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</body>

<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

</body>

Yazılım Bilişim üzerinde hazırlanmış diğer CSS örnekleri ve CSS derslerini görmek için ilgili bağlantıya tıklayabilirsiniz.

İlgili

Yorum

CSS Örnek Uygulamalar – Sercan dedi ki:

Şubat 5, 2021, 9:00 pm

[…] CSS Örnekleri […]

Cevapla
Tech dedi ki:

Mart 8, 2020, 4:35 pm

Tam bir yazılım kütüphanesi olmuş ve harika içeriğiniz için teşekkürler. Başarılarınızın devamını diliyorum.

Cevapla
igtor dedi ki:

Şubat 22, 2020, 3:08 am

Harika , Teşekkür ederim!

Cevapla
Baytronik dedi ki:

Ocak 10, 2020, 8:28 pm

çok güzel bir içerik olmuş beğendik. başarılarınızın devamını dileriz.

Cevapla
Nurik dedi ki:

Ekim 23, 2019, 12:20 pm

Süper çalışma

Cevapla
moradam dedi ki:

Ağustos 25, 2019, 6:49 pm

güzel olmuş emeğinize sağlık

Cevapla
CSS Nedir? CSS Kodlarının SEO Etkisi (CSS Sıkıştırma) dedi ki:

Ocak 13, 2019, 4:49 am

[…] örnek kodu yazilimbilisim sitesinden […]

Cevapla
CSS Kodlarının SEO Etkisi Nedir? (CSS Sıkıştırma Siteleri) dedi ki:

Ocak 12, 2019, 5:38 am

[…] örnek kodu yazilimbilisim sitesinden […]

Cevapla
Css ve Javascript'in SEO Etkisi (Css, Javascript Sıkıştırma) dedi ki:

Ocak 8, 2019, 8:37 pm

[…] örnek kodu yazilimbilisim sitesinden […]

Cevapla
irfan dedi ki:

Aralık 24, 2018, 9:49 pm

Yorum yap kısmını kolay bir şekilde mail olarak bana atar mısın?
Ama sadece css ve html olarak olsun.

Cevapla
Nazif dedi ki:

Kasım 27, 2018, 2:59 pm

Mükemmel..! Teşekkür Ederim.

Cevapla
ayhan dedi ki:

Ekim 19, 2018, 1:59 pm

Güzel hazırlanmış. Emeğinize sağlık.

Cevapla
CSS Dersleri – Yazılım Bilişim Programlama dedi ki:

Kasım 24, 2017, 3:12 pm

[…] CSS Örnekleri […]

Cevapla

CSS Uygulamaları Listesi

CSS Resim Çerceve

CSS Resim Ovalleştirma

CSS Tablo Biçimlendirme Örneği -1

CSS Tablo Örneği 2

CSS Buton Yapımı 1

CSS Buton Yapımı 2

CSS HTML Form Yapımı

CSS Dikey Menü Oluşturma

CSS Yatay Menü Oluşturma

CSS Poloraid Fotoğraf Çerçevesi Oluşturma

CSS Panel Örnek

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X