Ufak Bir Arıza Söz Konusu Yar 29 / 07 / 2013 Tarihinde Web Sitemize Yükleyeceğiz

Gonez

kutulara efekt vermek

Kutulara Efekt Vermek

Yazar: Beytullah DALLI | Yayın Tarihi: 01 Şubat 2013 | Kategori: Css

Sizlere çok çarpıcı bir css kodu anlatacağım ; iyi güzel de ben ne anlatacağım. Hatırlarsanız photoshop' ta kutulara veya tasarımlara birçok gölgeleme efekti verirdiniz. Şimdi bu anlattıklarınızı css kodlarımızla yapacağız ve en çok' ta " box-shadow " filterimizi kullanacağız. Çok zor gibi görünsede anladığınız zaman çok kolay geliyor. İsterseniz bu anlatım ve kodlarla yapın isterseniz dosyayı indirin.

 

İlk olarak genel ayarları yapalım ve kutu oluşturalım

/* Kutu yazısı */
.kutu h3{
	text-align:center;
	position:relative;
	top:80px;
}
/* Kutu */
.kutu {
	width:70%;
	height:210px;
	background:#fff;
	margin:42px auto;
}

 

Efekt 1

Html kodu

<div class="kutu efekt1">
<h3>1. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 1. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}

 

Efekt 2

Html kodu

<div class="kutu efekt2">
<h3>2. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 2. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt2
{
  position: relative;
}
.efekt2:before, .efekt2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.efekt2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

 

Efekt 3

Html kodu

<div class="kutu efekt3">
<h3>3. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 3. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt3
{
  position: relative;
}
.efekt3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

 

Efekt 4

Html kodu

<div class="kutu efekt4">
<h3>4. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 4. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt4
{
  position: relative;
}
.efekt4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

 

Efekt 5

Html kodu

<div class="kutu efekt5">
<h3>5. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 5. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt5
{
  position: relative;
}
.efekt5:before, .efekt5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.efekt5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

 

Efekt 6

Html kodu

<div class="kutu efekt6">
<h3>6. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 6. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt6
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.efekt6:before, .efekt6:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.efekt:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

 

Efekt 7

Html kodu

<div class="kutu efekt7">
<h3>7. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 7. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.effect7
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.efekt7:before, .efekt7:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.efekt7:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

 

Efekt 8

Html kodu

<div class="kutu efekt8">
<h3>8. Efekt</h3>
</div>

Css kodu

/*==================================================
 * 8. Efekt | Gonez.tr.gg | Kutuları şekillendirmek
 * ===============================================*/
.efekt8
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.efekt8:before, .efekt8:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.efekt8:after
{
	right:10px; 
    left:auto;
    -webkit-transform:skew(7deg) rotate(3deg); 
       -moz-transform:skew(7deg) rotate(3deg);     
        -ms-transform:skew(7deg) rotate(3deg);     
         -o-transform:skew(7deg) rotate(3deg); 
            transform:skew(7deg) rotate(3deg);
}

 

Önizlemesi

  Kutulara efekt vermek

Yardım isteklerinizi lütfen yorumlar kısmına yazmayın. İletişim formundan bana ulaşabilirsiniz.

Anahtar kelimeler : kutulara , efekt , vermek , photoshop , olduğu , box , shadow , gibi
 

Kimdir bu gonez ?


Beytullah Dallı tarafından oluşturulan kişisel bir web sitesidir.Boş Zamanında { CSS ve Jqueryle } ilgileniyor... Web sitemi takip etmeye devam edin bu aralar hiç bir kod ekleyemedim onun için 30 ' a yakın kod ekleyeceğim.

Zeka Sorularını Bilenler

Yazarlarımız

Bilgi # Bağlantılar

    Bedava-sitem.com, 11 Ocak 2013 tarihinden beri bu blogu en ufak bir karşılık beklemeden, sorunsuz bir şekilde barındırmaktadır.

    Site seçenekleri: 1024x768 optik edilmistir Mozilla Firefox +7-8-9 Internet Explorer açınız. Eski Sürümle veya Google Chrome ile açmanız tasarımın bozuk yada dağınık çıkmasına sebep olabilir.

    Ping your blog, website, or RSS feed for Free

Copyright 2012 - 2013 tüm hakları gonez 'e , tasarım ise Hibycocuk ' a aittir. Kodları paylaşma özgürlüğü için Kullanım şartlarını oku ve sitenin kalbine giden Site haritası 'na ulaş.

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol