CSS

CSS Örnekleri

8 yıl önce
13 Yorum
yazan Hayri

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

  1. CSS Resim Çerceve
  2. CSS Resim Ovalleştirme
  3. CSS Tablo Biçimlendirme Örneği -1
  4. CSS Tablo Örneği 2
  5. CSS Buton Yapımı 1
  6. CSS Buton Yapımı 2
  7. CSS HTML Form Yapımı
  8. CSS Dikey Menü Oluşturma
  9. CSS Yatay Menü Oluşturma
  10. CSS Poloraid Fotoğraf Çerçevesi Oluşturma
  11. 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;
}
<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%;
}
<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;
}
<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>

 

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;
}
<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>

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);

}
<div class="yuvarla">
<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 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;
}
<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>

 

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>
<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>
<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;
}
<div class="polaroid">
<p>Kız Kulesi, Kasım '15</p>
<img src="http://via.placeholder.com/350x150">
</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> 
<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>

 

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.

 

İlginizi Çekebilir

Yorum

Yorum Yap