1. Куча / Говнокод #17562

    +138

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    18. 18
    19. 19
    20. 20
    21. 21
    22. 22
    23. 23
    24. 24
    25. 25
    26. 26
    27. 27
    28. 28
    29. 29
    30. 30
    31. 31
    32. 32
    33. 33
    34. 34
    35. 35
    36. 36
    37. 37
    38. 38
    39. 39
    40. 40
    41. 41
    42. 42
    43. 43
    44. 44
    45. 45
    46. 46
    47. 47
    48. 48
    49. 49
    *[name="mq-reference-view"][checked] + * + .mq-reference-person {
    margin-left: 0;
}

*[name="mq-reference-view"][checked] + * + * + * + * ~ .mq-reference-person {
    margin-left: 18px;
}

*[name="mq-reference-view"][checked] + * + * + * + * + * + * + * + * ~ .mq-reference-person {
    margin-right: -232px;
}

@media (mq-width: 772px) {
    #mq-reference-open-1[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + * + * + * + .mq-reference-person,
    #mq-reference-open-2[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + * + * + * + .mq-reference-person {
        margin-right: -232px;
    }
    #mq-reference-open-3[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + .mq-reference-person,
    #mq-reference-open-4[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + .mq-reference-person {
        margin-left: -232px;
    }
    #mq-reference-open-3[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person,
    #mq-reference-open-4[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person {
        margin-left: 0;
    }
}

@media (mq-width: 534px) {
    #mq-reference-open-1[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person,
    #mq-reference-open-3[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + * + * + * + .mq-reference-person {
        margin-right: -232px;
    }
    #mq-reference-open-2[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + .mq-reference-person,
    #mq-reference-open-4[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person {
        margin-left: -232px;
    }
    #mq-reference-open-2[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person,
    #mq-reference-open-4[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + * + * + * + .mq-reference-person {
        margin-left: 0;
    }
}

#mq-reference-open-1[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + .mq-reference-person,
#mq-reference-open-2[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person,
#mq-reference-open-3[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + .mq-reference-person,
#mq-reference-open-4[checked] ~ .mq-reference-views *[name="mq-reference-view"][checked] + * + * + * + * + * + * + * + .mq-reference-person {
    opacity: 1;
    filter: Alpha(opacity=100);
}

    По-соседски

    Запостил: nikpachoo, 02 Февраля 2015

    Комментарии (24) RSS

    • ava wvxvw 03.02.2015 09:40 # 0

      Жду калькулятор на сиэсэсе.
      Ответить

      • ava bormand 03.02.2015 10:17 # +2

        challenge accepted
        Ответить

        • ava kegdan 03.02.2015 11:15 # 0

          без хэтэмээля
          Ответить

          • ava bormand 03.02.2015 11:25 # 0

            Без хтмля не получится, наверное.
            Ответить

            • ava kegdan 03.02.2015 11:29 # 0

              я тоже так думаю. даже не уверен что с ним можно
              Ответить

              • ava 1024-- 03.02.2015 11:33 # 0

                Главное - как-то состояние хранить (блоки разных размеров, один закрывает другой при наведении, из-за чего какой-то из них остаётся?), если Борманд это научится делать, уже почти всё сделано.
                Ответить

                • ava bormand 03.02.2015 11:36 # 0

                  Да я даже цикл представил себе, вернее рекурсию...

                  Блин, сейчас некогда, вечером попробую.
                  Ответить

                  • ava 1024-- 03.02.2015 11:41 # 0

                    Ни черта себе...
                    Чувствую, тут уже до парсинга выражений недалеко.
                    Ответить

                    • ava kegdan 03.02.2015 11:49 # +1

                      Охохо, с++ на css
                      Ответить

                      • ava bormand 03.02.2015 12:07 # 0

                        В принципе, достаточно брейнфак реализовать. Если получится - значит исходная система тьюринг полна (при бесконечной памяти, само собой).
                        Ответить

                      • ava 1024-- 03.02.2015 12:08 # +8

                        Давайте размышлять логически.
                        В файлах *.c у нас лежат скучные царские функции и разные ненужные алгоритмы.
                        В файлах *.cs у нас лежат мощные классы, интерфейсы и прочий идеальный говнокод, спроектированный по последней моде.
                        В файлах *.css тогда должно лежать что-то очень крутое и просто невообразимое.
                        Ответить

                        • ava 3.14159265 03.02.2015 12:15 # +1

                          Ну повышается ведь уровень декларативности.
                          От императивных деталей алгоритма к linq и полностью описательному подходу.
                          Ответить

                • ava kegdan 03.02.2015 11:36 # 0

                  Ждем, надеемся, верим
                  Ответить

                • ava wvxvw 03.02.2015 12:26 # 0

                  А числа выражать как вложеные div'ы.
                  Ответить

                • ava 1024-- 03.02.2015 16:54 # 0

                  > Главное - как-то состояние хранить
                  Главное - как-то состояние хранить и уметь считывать. А управляемый бит можно сделать так:
                  @keyframes switch {
  0% { background-color: white; }
  50% { background-color: black; }
  100% { background-color: white; }
}

.bit {
  background-color: gray;
  animation: switch 1s step-end infinite;
  animation-play-state: paused;
}

.bit:hover {
  animation-play-state: running;
}

                  Так можно реализовать как минимум счёты, где надо передвигать hoverом каждую костяшку по отдельности.
                  Или ручную битовую ленту, на которой можно сделать любые вычисления, поскольку пользователь сможет считывать и изменять её.
                  Ответить

                  • ava 3.14159265 03.02.2015 17:24 # +1

                    >Так можно реализовать как минимум счёты, где надо передвигать hoverом каждую костяшку по отдельности.
                    >Или ручную битовую ленту, на которой можно сделать любые вычисления, поскольку пользователь сможет считывать и изменять её.
                    А можно ли из CSSa про помощи этих нехитрых приспособлений сделать trolleybus?
                    Ответить

            • ava Vindicar 03.02.2015 11:36 # 0

              :before, :after, content?
              Ответить

        • ava bormand 03.02.2015 12:45 # 0

          Соснул я, походу. ::after не умеет добавлять html, только плейнтекст. А expression пашет только в древних ie.
          Ответить

          • ava kegdan 03.02.2015 13:12 # 0

            эээ, я уже собрался вечером постигать мудрость html+css. Рассасывай и продолжай
            Ответить

    Добавить комментарий