Заголовок css с исчезающим фоном слева и справа по горизонтали - PullRequest
Новая
       15

Заголовок css с исчезающим фоном слева и справа по горизонтали

0 голосов
/ 27 февраля 2012

Я пытаюсь получить заголовок, который имеет постепенное исчезновение слева от светло-синего до синего, центр, который является синим, и правый, который является синим к голубому, исчезает.Заголовок должен иметь ширину 100%.Может кто-нибудь сказать мне, если это лучший подход, чтобы иметь раздел заголовка, управляемый css, который состоит из левого постепенного изменения (фоновое изображение, которое исчезает), правого постепенного изменения и центрального раздела заголовка. Проблема, которую я имею, состоит в том, чтотекущий путь переполняет / ограничивает меня, когда я устанавливаю пиксели, если кто-то решит изменить размер окна браузера.Любая помощь будет оценена .. ура. 

 <div id="header">
<div id="leftfade"></div>
<div id="header_container">
   <div id="languagechooser"></div> 
    <div id="logo"></div>    
  <div id="navbar">
        <ul>
            <li class="navleft"><a href="aa.a">HOME</a></li>
            <li><a href="aa.a">xxxxxxxx</a></li>
            <li><a href="aa.a">xxxxxxxxxxxx</a></li>
            <li><a href="aa.a">xxxxxxxxxx</a></li>
            <li><a href="aa.a">xxxxxxxxxxxx</a></li>

        </ul>                                                             
    </div>                
</div>                     
<div id="rightfade"></div></div>

    body{
background: #FFFFFF;
margin: 0px auto;
font-size: 62.5%;
color:#000000;
width:100%;
min-width:965px;}
   #header{
position:relative;
height:157px;
background-color:#74d7ea;}
  #header #leftfade
  {
    float:left;
    background: url(../img/header_leftfade.png) repeat-y top left;
    width:25%;  
    height:157px;}
    #header #rightfade{
    position:absolute;
    right:0;
    background: url(../img/header_rightfade.png) repeat-y top right;
    width:25%;
    height:157px;}
    #header #header_container{

float:left;
position:relative;
text-align:left;
min-width:50%;
    height:157px;}
    #header #logo{
float:left;
background: url(../img/logo.png) no-repeat;
width:408px;
height:63px;
margin-top:20px;}
    #header #languagechooser{
float:right;
width:150px;
height:50px;
background-color:#ffffff;
margin-left:100px;}
    #header #navbar{
clear:both;
position:relative;
top:15px;
height:30px;
background-color:#63bdce;
width:98%;
 overflow:hidden;}
    #header #navbar ul{ list-style:none;}

    #header #navbar ul li{  float:left;}
    #header #navbar ul li a{
 background: url(navi_bg_divider.png) no-repeat right;
 padding-right: 12px;
 font: bold 1.7em Myriad Pro, Arial, Helvetica, sans-serif;
 padding-left: 12px;
 display: inline-block;
 line-height: 30px;
 text-decoration: none;
 color:#ffffff;}

Ответы [ 2 ]

1 голос
/ 27 февраля 2012

Если вы хотите изменить размер градиента, попробуйте CSS3 градиент вместо использования изображений.Или вы можете отцентрировать синюю область с помощью background-position:center; и позволить белым слева и справа занимать столько же места с обеих сторон, сколько осталось после любого изменения размера.

0 голосов
/ 27 февраля 2012

Чтобы получить динамический вывод для разных размеров:

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Нечто подобное может оказаться полезным.

Однако, это зависит от необходимой вам поддержки браузера.

...