• Как сделать картинику поверх блона на :hover?

    alexhit
    @alexhit
    Вино неплохо, но виски быстрее.
    Собственно у них использован псевдоэлемент after
    вот его css
    a:after {
        content: "";
        background: url(../images/plus.png) no-repeat center center;
        color: #000000;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 50px;
        margin: 0 auto;
        top: 0;
        opacity: 0;
        transition: .4s;
    }
    
    a:hover:after {
        opacity: 1;
        transition: .4s;
    }

    а здесь сам плюсик
    Ответ написан
    Комментировать
  • Как вставить результат if?

    alexhit
    @alexhit
    Вино неплохо, но виски быстрее.
    Все просто, но нужно знать название поля в массиве, которое хранит кол-во (если оно вообще есть в вашем массиве, из данного куска кода не ясно). Если не знаете можете проверить так:
    foreach($items_res as $item){
       echo '<pre>';
       print_r($item);
       echo '</pre>';
       exit();
    }

    Увидите структуру вашего массива, если в ней есть кол-во, то далее используем имя нужного поля для сравнения и вставки:
    foreach($items_res as $item){
       if ($item['kolichestvo']>0) echo '<offer id="'.$item['id'].'" available="true">';
       else echo '<offer id="'.$item['id'].'" available="false">';
    Ответ написан
  • Как сделать выезд блока по кривой Безье?

    alexhit
    @alexhit
    Вино неплохо, но виски быстрее.
    div { width:90px; height:90px;
    	position:fixed; z-index:2; left:0; top:0;
    	-webkit-animation-name: 'anime';
    	-webkit-animation-duration: 1000ms;
    	-webkit-animation-iteration-count: infinite;
    	-webkit-animation-direction: normal;
    	-webkit-animation-timing-function: linear;
    	animation-name: 'anime';
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
    	background:#1E800E;}
    @-webkit-keyframes 'anime' {
    	from {left:0}
    	50% {left:60px}
    	60% {left:50px}
            70% {left:60px;}
    	to {left:0px}
    }
    Ответ написан
    Комментировать
  • Как сделать список при клике?

    alexhit
    @alexhit
    Вино неплохо, но виски быстрее.
    Зачем клик? Делай при наведении, это удобнее.
    <div id="main">
        <table>
          <thead>
            <tr>
              <td><div class="but">Действие 1<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
              <td><div class="but">Действие 2<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
              <td><div class="but">Действие 3<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
            </tr>
          </thead>
        </table>
      </div>

    table td { padding:10px 50px; background-color: green; color:white;}
      table a {color:white; text-decoration:none;}
    .but {display:block; cursor:pointer; position: relative;}
    .but ul {display:none;}
    .but:hover ul {display:block; position:absolute; left:0; top:100%; padding:0; margin:0; list-style:none;z-index:2; width:100%; background:#ccc;}
    .but ul li {display:block; padding:5px; color:#000;}
    .but ul li:hover {color:#FFF; background:#666}
    Ответ написан
  • Как поступить с бекграундом?

    alexhit
    @alexhit
    Вино неплохо, но виски быстрее.
    .bg {
    	background: no-repeat top center url(../img/bg-header.png);
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    Ответ написан
    5 комментариев