Reklamlar
Kategoriler: Web Tasarım

CSS – Gölge Efekti

CSS Divlerinize güzel bir görüntü vermek için divlerinize gölge verebilirsiniz.

<div class="box effect1">
<h3>Effect 1</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 1
 * ===============================================*/.effect1{
 -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
         box-shadow: 0 10px 6px -6px #777;
}

<div class="box effect2">
<h3>Effect 2</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 2
 * ===============================================*/.effect2
{
  position: relative;
}
.effect2:before, .effect2: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);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

<div class="box effect3">
<h3>Effect 3</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 3
 * ===============================================*/.effect3
{
  position: relative;
}
.effect3: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);
}

<div class="box effect4">
<h3>Effect 4</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 4
 * ===============================================*/.effect4
{
  position: relative;
}
.effect4: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);
}

<div class="box effect5">
<h3>Effect 5</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 5
 * ===============================================*/.effect5
{
  position: relative;
}
.effect5:before, .effect5: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);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

<div class="box effect6">
<h3>Effect 6</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 6
 * ===============================================*/.effect6
{
   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;
}
.effect6:before, .effect6: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;
}

<div class="box effect7">
<h3>Effect 7</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 7
 * ===============================================*/.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;
}
.effect7:before, .effect7: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;
}
.effect7: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);
}

<div class="box effect8">
<h3>Effect 8</h3>
</div>
.box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 8
 * ===============================================*/.effect8
{
   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;
}
.effect8:before, .effect8: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;
}
.effect8: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);
}
Reklamlar
Paylaş
Yorum gönder

Yakın zamanda yayınlananlar

Bitcoin’s Revolutionary Influence on the Future of Online Gaming

As we progress deeper into the digital age, the spheres of technology and finance continue…

1 hafta Önce

Tarayıcınızda Gizli Modu kalıcı olarak devre dışı bırakma

Tarayıcınızda gizli mod'da çalıştırmayı devre dışı bırakabilirsiniz. Windows ve macOS için Google Chrome'da, Windows için…

3 hafta Önce

Broadcom, VMware’in ücretsiz ESXi hipervizörünü sonlandırıyor

Broadcom, VMware'in ESXi hipervizörünün ücretsiz sürümünü durdurdu. Değişiklik haberi, aracın VMware.com'dan kaldırıldığını ortaya koyan ve…

1 ay Önce

AirPods bul nasıl kullanılır ?

Kaybolan airpod'unuzu bulmak için aşağıdaki 3 yöntemi kullanabilirsiniz. AirPod'larınızın kaybolması durumunda yerini bulmanıza yardımcı olması…

2 ay Önce

Broadcom’un VMware Revizyonu Dikkat Çekiyor

Vmware ve Broadcom Sanallaştırma öncüsü Vmware, Broadcom tarafından satın alınmasının ardından bazı değişiklikler geçiriyor. Kurumsal…

3 ay Önce

Google Fotoğraflar, One, Drive aboneliğini iptal edersem verilerim silinir mi?

Google Fotoğraflar, yani One aboneliğinizi iptal etmek mi istiyorsunuz ? Bildiğiniz gibi Google 15 GB…

4 ay Önce
Reklamlar