Css Resim Filitreleri 1

Blurlanmış Arkaplan

Merhaba Ben Ahmet

Çok güzel fotoğraf çekerim.

Css İle Yanıp Sönen Resim Oluşturma

<style>
img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(0%);
  }
   1% {
    filter: brightness(10%);
  }
  2% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  60% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  62% {
    filter: brightness(20%);
  }
  96% {
    filter: brightness(20%);
  }
  96% {
    filter: brightness(400%);
  }
}
</style>

CSS Pseudo Classes

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}



Örnek Link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

---

Text-Shadow

.golge {
  text-shadow: 2px 2px grey;

The text-shadow Özelliği

 text-shadow: 2px 3px 4px #111;

Beyaz Yazıya Text Shadow

Css3 Background-Clip

  border: 10px dotted black;
  padding: 15px;
  background: lightblue;
  background-clip: padding-box;

The background-clip Özelliği

The background-clip property defines how far the background should extend within an element.
background-clip: border-box (this is default):

The background extends behind the border.

background-clip: padding-box:

The background extends to the inside edge of the border.

background-clip: content-box:

The background extends to the edge of the content box.

Css3 Background-Origin

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiszB5CfNRPLuFWkd76rUGPXaHVfLoqOVUV22n-Z0Nbx5-QTmKucTZ4_eos9wXHaT1e8jEprnLahFTYDlInVXgOykIhJw1DO7JbU0Xp-9FEtIZ2uPyqbx2Sh6d751yqpZKi8lrAlbwK8/s1600/paper.gif');
background-repeat: no-repeat;
background-origin: content-box;

background-origin: padding-box (default):

Hello World

The background image starts from the upper left corner of the padding edge.

background-origin: border-box:

Hello World

The background image starts from the upper left corner of the border.

background-origin: content-box:

Hello World

The background image starts from the upper left corner of the content.

Css3 Border Yeni Özellikler

1- Border Radius

Yeni gelen özellikle beraber herbir köşeye ayrı radius değeri verilebilmektedir.

}
  border: 2px solid red;
  padding: 10px;
  border-radius: 2em / 5em;
}

#example2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 2em 1em 4em / 0.5em 3em;
}
Online olarak https://www.cssmatic.com/border-radius

border-radius: 2em / 5em:

CSS3 web tasarımda çok güzel özellikler getirmiştir.Bunlardan biride border-radius yani oval köşe bir çok yerde kullanabiliriz bunu. Hemen kodlara geçelim. 4 köşeyide aynı oranda oval yapmak için kodumuz border-radius bir örnek yapalım.

border-radius: 2em 1em 4em / 0.5em 3em:

NOT : css3 de kodları aynısını başına webkit moz o koyarak yazıyoz tarayıcı uyumu için.Yani her css3 kodu nu 4 kere yazıyoz.Bunu yapmazsanız daha sonra tarayıcı uyumsuzlukjları çıkar.

---

a) border-left-color

 border-style: solid;

 border-left-color: #92a8d1;

A heading with a colored left border

The border-left-color can be specified with a hexadecimal value.

b) border-right-style

.dotted1 {
  border-right-style: dotted;
}

.dotted2 {
  border-style: solid;
  border-right-style: dotted;
}

A heading with a dotted right border

A div element with a dotted right border.

---

c) border-image

border: 10px solid transparent;
border-image:url('border.png') 2% round ;

En büyük siteyi yaptım..80% round

En büyük siteyi yaptım..50% round

En büyük siteyi yaptım.. 30% round

En büyük siteyi yaptım..9% round

En büyük siteyi yaptım.. 2% round

---

border: 10px solid transparent;
border-image:url('border.png') 2% space;

En büyük siteyi yaptım..80% space

En büyük siteyi yaptım..50% space

En büyük siteyi yaptım.. 20% space

En büyük siteyi yaptım..9% space

En büyük siteyi yaptım.. 2% space

---

border: 10px solid transparent;
border-image:url('border.png') 2% stretch;

En büyük siteyi yaptım..80% stretch

En büyük siteyi yaptım..50% stretch

En büyük siteyi yaptım.. 20% stretch

En büyük siteyi yaptım..9% stretch

En büyük siteyi yaptım.. 2% stretch

---

Resmi 9 parçaya bölüp. Ona göre köşelerinden uzaltıp kısaltma işi yapmaya yarıyor.

---

1