2013-03-05 2 views
1

Ссылка: http://www.stephenkelzer.com/design.html
оптимизирован для Firefox только до сих пор (может найти дополнительные ошибки при просмотре в других браузерах: после и: раньше рушится?

--First время стендовых ребята, я мог бы реально использовать некоторую помощь здесь, спасибо


!

Я строй очень простой портфолио страницы здесь, я планирую расширить его позже

Я хочу добавить многоуровневый эффект каждый модуль, как Крис Coyier сделал на своем сайте:. http://css-tricks.com/

Я сделал слои зеленый и желтый, чтобы помочь им выделиться

HTML код:

<div id="mh-com" class="abc portmodule"> 
    <div class="portmoduleimg"></div> 
     <div class="portmoduleinfo"> 
      <h3><a href="http://www.marlonheimerl.com/" rel="nofollow">MarlonHeimerl.com</a></h3> 
      <p>...</p> 
     </div> 
    </div> 
<div id="business-template" class="zxc portmodule"> 
    <div class="portmoduleimg"></div> 
     <div class="portmoduleinfo"> 
      <h3><a href="" rel="nofollow">Business Template</a></h3> 
      <p>...</p> 
     </div> 
    </div> 

CSS разметка:

.portmodule { 
margin-top: 25px; 
height:300px; 
overflow: hidden; 
width:969px; 
background-color:rgb(98, 109, 111); 
color: rgb(192,204,206); 
} 
.portmodule:after, .portmodule:before { 
content:""; 
position: absolute; 
top:6px; 
left:6px; 
background-color: green; 
width:100%; 
height:100%; 
z-index: -1; 
} 
.portmodule:before { 
top:12px; 
left:12px; 
background-color: yellow; 
} 

Я хочу сделайте так, чтобы каждый отдельный модуль обладал многослойным эффектом. Надеюсь, вы, ребята, можете мне помочь! Спасибо!

+0

Что такое глюк? Правильно отображается в моем firefox и chrome. Вы просто хотите добавить к нему глубину, например, тени CSS? –

+1

Btw, это jsfiddle. http://jsfiddle.net/qjWbu/ Пожалуйста, используйте их в своих сообщениях. Как вы можете видеть, предоставленный код нам не очень помогает. Люди здесь быстро голосуют, поэтому вам нужно задать четкие вопросы стиля Q и A, чтобы избежать их. –

+0

Моя цель состоит в том, чтобы каждый модуль имел свой слой ': before' и ': after'. другими словами, я хотел бы, чтобы между зелеными и желтыми цветами между двумя модулями был разбит зеленый и желтый цвета. : before &: после кода связан с 2 отдельными классами «.portmodule» и, следовательно, должен отображаться дважды отдельно, но вместо этого он объединяет их в один высокий: до: после элемента. – StephenKelzer

ответ

0

http://www.codepen.io/thestevekelzer/pen/ibmta

Я нашел «минорное решение» ... Я имею в виду, что я не считаю, что это предпочтительный метод.

Похоже, что абсолютное позиционирование: до &: после псевдоэлементов все основаны на родительском элементе, а не на дочернем элементе, как я думал. В своем разветвленном кодеде Вы заметите, что я увеличил верхнюю настройку элемента «бизнес-шаблон», чтобы он был ниже на странице.

Мне все равно понравится, если кто-то знает более простое решение. Спасибо!!!

Смежные вопросы