Konular

EBooklar

CSS ile Blur Efekti

HTML Kod

<div class="widget center">
 
  <div class="blur"></div>
 
  <div class="text center">
    <h1 class="">dijitalders.com</h1>
    <p>CSS ve blur efekti</p>
  </div>

</div>

 

CSS kodu

body {
  background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed;
  background-size: cover;
}

.blur {
  background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  filter: blur(13px);
  position: absolute;
  height: 400px;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
}

.widget {
  border-top: 2px solid rgba(255, 255, 255, .5);
  border-bottom: 2px solid rgba(255, 255, 255, .5);
  height: 300px;
  width: 100%;
  overflow: hidden;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}







/*  bundan sonrası blur efekti ile ilgili değil */

.text {
  height: 200px;
  width: 340px;
}

.text h1 {
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, .1);
  color: #ffffff;
  margin-top: 57px;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 38px;
}

.text p {
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px rgba(0, 0, 0, .1);
  margin-top: 0px;
  font-family: 'Lato', serif;
  font-weight: 400;
  font-size: 22px;
}
 

Yorumunuzu Ekleyin


  • CSS ile Web Sayfası Oluşturma
  • CSS ile Web Sayfası Oluşturma ~ 50,372

    CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.


  • Css İle Hizalama İşlemleri
  • Css İle Hizalama İşlemleri ~ 47,214

    Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.






  • CSS ile Content Menü Yapımı
  • CSS ile Content Menü Yapımı ~ 20,745

    İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı


  • CSS Seçicileri ~ 18,195

    CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir


  • CSS’i Web Sayfalarına Eklemek
  • CSS’i Web Sayfalarına Eklemek ~ 18,064

    CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value)


  • CSS Konumlandırma (Position)
  • CSS Konumlandırma (Position) ~ 17,779

    CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.


  • Internet Explorer Koşullu İşlemleri ~ 17,228

    Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.


  • CSS ile yazıcı çıktı işlemleri
  • CSS ile yazıcı çıktı işlemleri ~ 16,442

    Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır





  • CSS te kullanılan kısaltmalar
  • CSS te kullanılan kısaltmalar ~ 14,655

    CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz











  • Pseudo-sınıfları ve Pseudo-elementleri ~ 13,215

    Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )



  • (X)HTML Döküman Hiyerarşisini Anlamak ~ 13,085

    CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir