Új hozzászólás Aktív témák

• #996 Primary92 senior tag

  Új Válasz 2014-03-04 16:59:20 #996

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Primary92

  senior tag

  Sziasztok!

  Van egy wordpress blogom, aminek a fejlécében van egy kép, felette a cím, a cím alatt pedig egy áttetsző téglalap.
  Ez a téglalap így néz ki a sablon (Hemingway) CSS-ében:
  .blog-info {
  display: inline-block;
  padding: 30px;
  background: #1d1d1d;
  }

  Itt annyi módosítással éltem az áttetszőség kedvéért:
  background: rgba(40,40,40,0.4);

  Így már ugye átlátszó lett. Az öröm akkor lenne teljes, ha a blokk alatti terület elmosott lenne.
  Az alatta lévő képet nem lehet átlátszóvá tenni, mert böngésző ablak méretétől függően változik, illetve több fejléc kép is van, ami random változik.

  Van valami aránylag egyszerű megoldás az elmosásra?

• #998 Primary92 senior tag martonx #997

  Új Válasz 2014-03-04 17:29:57 #998

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Primary92

  senior tag

  válasz martonx #997 üzenetére

  ha régi böngészőkben úgy nem működik, hogy csak szimplán mintha ott sem lenne, akkor jó

• #999 Primary92 senior tag

  Új Válasz 2014-03-04 17:48:56 #999

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Primary92

  senior tag

  keresgéltem a mask-kal kapcsolatban, és közben ráakadtam a -webkit-filter: blur(5px); megoldásra jQuery UI-val.
  A blur működik, viszont nem csak a téglalapra, hanem a felette lévő szövegre is.
  Erre van esetleg ötletetek?

• #1000 Primary92 senior tag

  Új Válasz 2014-03-04 18:24:32 #1000

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Primary92

  senior tag

  Így néz ki a wordpress sablon fejlécre vonatkozó része:
  <div class="header-cover section bg-dark-light no-padding">
  
  <div class="header section" style="background-image: url(<?php if (get_header_image() != '') : ?><?php header_image(); ?><?php else : ?><?php echo get_template_directory_uri() . '/images/header.jpg'; ?><?php endif; ?>);">
  
  <div class="header-inner section-inner">
  
  <div class="blog-info">
  
  <h1 class="blog-title">
  <a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'title' ) ); ?> &mdash; <?php echo esc_attr( get_bloginfo( 'description' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'title' ) ); ?></a>
  </h1>
  
  <?php if ( get_bloginfo( 'description' ) ) { ?>
  
  <h3 class="blog-description"><?php echo esc_attr( get_bloginfo( 'description' ) ); ?></h3>
  
  <?php } ?>
  
  </div> <!-- /blog-info -->
  
  </div> <!-- /header-inner -->
  
  </div> <!-- /header -->
  
  </div> <!-- /bg-dark -->

  Ide vonatkozó css pedig:

  .header-cover { overflow-y: hidden; }
  
  .header {
  background: no-repeat center;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  }
  
  .header-inner { position: relative; z-index: 2; text-align: center; }
  
  .blog-info {
  display: inline-block;
  padding: 30px;
  background: #1d1d1d;
  }
  
  .blog-title {
  width: 100%;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  }
  
  .blog-title a {
  color: #FFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  font-size: 1.75em;
  }
  
  .blog-description:before {
  content: "";
  display: block;
  width: 100px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  margin: 20px auto;
  }
  
  .blog-description {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-weight: 300;
  }

  Próbálkoztam átrendezéssel, de nem sikerült.
  Azt a rész kellene blurosítani, ahol a .blog-info{background: #1d1d1d;} szín van. Viszont ha ide szúrom be a -webkit-filter: blur(5px);-et, akkor a szöveg is ('description' és 'title') elmosódik.

Új hozzászólás Aktív témák