Рубрика: CSS

Замена фото по клику

PHP
1
2
3
4
5
6
7
8
9
$(function() {
  $('.select-list ul li').hover(function(){
    var id = $(this).attr('id');
    $('.select-list ul li').removeClass('active');
    $(this).addClass('active');
    $('.circle ul li').removeClass('active');
    $('[data-pic="'+id+'"]').addClass('active');
  });
});

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.bl-1
  .circle
    ul
      li.active(data-pic="image-1")
        img(src="/img/foto-list-1.jpg")
      li(data-pic="image-2")
        img(src="/img/foto-list-2.jpg")
      li(data-pic="image-3")
        img(src="/img/foto-list-3.jpg")
      li(data-pic="image-4")
        img(src="/img/foto-list-4.jpg")
      li(data-pic="image-5")
        img(src="/img/foto-list-5.jpg")
      li(data-pic="image-6")
        img(src="/img/foto-list-6.jpg")
      li(data-pic="image-7")
        img(src="/img/foto-list-7.jpg")
      li(data-pic="image-8")
        img(src="/img/foto-list-8.jpg")
      li(data-pic="image-9")
        img(src="/img/foto-list-9.jpg")
      li(data-pic="image-10")
        img(src="/img/foto-list-10.jpg")

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
.bl-2
  .select-list
    ul
      li.active(id="image-1") Мягкую мебель, кровати
      li(id="image-2") Шкафы, стулья, столы
      li(id="image-3") Бытовую технику
      li(id="image-4") Спортивный инвентарь, велосипеды
      li(id="image-5") Садовые инструменты, стройматериалы
      li(id="image-6") Автомобильную резину, шины
      li(id="image-7") Личные домашние вещи
      li(id="image-8") Туристическое снаряжение
      li(id="image-9") Сумки, чемоданы
      li(id="image-10") Архивы, документы

 

Блок карточек товаров

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent-box {
  display: flex;
  flex-wrap: wrap;
  margin: -6px -6px;
  
}
.product-card {
  margin: 6px;
  background: #f00;
}
.child {
  width: calc(33.33% - 12px);
  color: #f00;
}
img {
  width: 100%;
  height: 100%;
}

 

 

400 крутых интернет-ресурсов на все случаи жизни

AdMe.ru с разрешения автора публикует отличный список из 400 очень полезных сервисов, которые помогут найти все — от источников вдохновения и стоковых фотографий до курсов программирования и создания email-рассылок. Бесплатные веб-сайты HTML5 UP: Адаптивные …

Адаптивное видео с iframe

PHP
1
2
3
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VBOSOREJE68" frameborder="0" allowfullscreen>
</div>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.video {
  position:relative;
  padding-bottom:56.25%;
  /*пропорции видео 16:9 */
  padding-top:25px;
  height:0;
  width: 100%;
  float: left;
  margin-top: 20px;
}
.video iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

 

Заготовки

Модальные окна: https://codepen.io/losbeekos/pen/cmqaL https://codepen.io/simgooder/pen/BoJYoQ Модальные окна с видео: https://codepen.io/mattamyot/pen/dMGwyK https://codepen.io/josephkes/pen/kkrRBk Select: https://codepen.io/THEORLAN2/pen/Kaewmw?depth=everything&order=popularity&page=2&q=select&show_forks=false https://codepen.io/udyux/pen/KzJQea?depth=everything&order=popularity&page=3&q=select&show_forks=false Заказ билета — выбор места: https://codepen.io/pieceoftoast/pen/yypKRM Блоки: https://codepen.io/zadvorsky/pen/OxKMbj Успешная отправка сообщений: https://codepen.io/colinhorn/pen/KXjYXr …

Плавное подчёркивание ссылки при наведении

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
    line-height: 1;
    display: inline-block;
    color:#ffeb3b;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #ffeb3b;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}