Как создать тень вокруг шаблона, как это делает artisteer? - PullRequest
Новая
       21

Как создать тень вокруг шаблона, как это делает artisteer?

0 голосов
/ 02 декабря 2009

Я новичок в CSS; Я узнал об этом вчера (действительно), и с тех пор я сделал несколько шаблонов, я развиваюсь довольно быстро, но есть одна вещь, которую я не совсем понимаю. Как сделать тени на частях шаблона, не разрушая макет и не сталкиваясь с новыми проблемами.

Я создал шаблон CSS / HTML с эффектом стекла вокруг него, и мне удалось заставить его работать с использованием плавающих элементов и абсолютного позиционирования в относительном div, называемом оберткой, но он не работает в IE7 и IE6, но работает все версии FF.

Мой вопрос:

Как создать тень вокруг шаблона, как это делает artisteer?

Ответы [ 2 ]

0 голосов
/ 02 декабря 2009

Привет, я пошел вперед и сделал это самораспространяемым, не уверен, что он будет работать на IE7, хотя у меня Windows 7, поэтому у меня IE8 по умолчанию и я не могу его протестировать. Все, что я должен сказать, - это то, что я понятия не имел, что установил "bottom 0;" "осталось 0;" заставил бы div придерживаться в левом нижнем углу, и за это я не могу отблагодарить вас достаточно, как будто лампа просто включается в моем мозгу, и теперь я могу сделать гораздо больше, ну, все еще учась ... 

<style type="text/css">
#box {

  position: relative;
  width: 100px;
}
  .corner {
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
  }
  .tl { top: 0; left: 0; background-position: 0 0; }
  .tr { top: 0; right: 0; background-position: -22px 0; }
  .bl { bottom: 0; left: 0; background-position: 0 -22px; }
  .br { bottom: 0; right: 0; background-position: -22px -22px; }

  .content {padding:10px;}

</style>

<div id="box">
  <div class="corner tl"><!-- --></div>
  <div class="corner tr"><!-- --></div>
  <div class="corner bl"><!-- --></div>
  <div class="corner br"><!-- --></div>
  <div class="content">the name of jeremiah is jorge gonzaga I have no Idea where this came from!</div>
</div>
0 голосов
/ 02 декабря 2009

привет, они используют таблицы:)

Если вы хотите, чтобы это работало в IE, вы должны определить height внешнего блока следующим образом: 

<div id="box">
  <div class="corner tl"><!-- --></div>
  <div class="corner tr"><!-- --></div>
  <div class="corner bl"><!-- --></div>
  <div class="corner br"><!-- --></div>
</div>

#box {
  height: 100px;
  position: relative;
  width: 100px;
}
  .corner {
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
  }
  .tl { top: 0; left: 0; background-position: 0 0; }
  .tr { top: 0; right: 0; background-position: -22px 0; }
  .bl { bottom: 0; left: 0; background-position: 0 -22px; }
  .br { bottom: 0; right: 0; background-position: -22px -22px; }
...