Каламбуры на css

    Хабровчане, всех с пятницей! Сейчас у подавляющего большинства читателей хабра рабочий день уже закончился, поэтому можно расслабиться и немного отвлечься от серьезных тем. Вы знали, что на css можно каламбурить? На кдпв один из примеров, а под катом небольшая простыня специфических css шуток.

    #big-bang::before { 
    content: "";
    }
    
    .lego {
    display: block;
    }
    
    .autobots {
    transform: translate3d();
    }
    
    .ninja {
    color: black;   
    visibility: hidden;
    animation-duration:0.00001s;
    }
    
    #china { 
    border-top-style: solid;
    }
    
    #tower-of-pisa { 
    font-style: italic;
    }
    
    #australia { 
    transform: rotateY(180deg);
    }
    
    .kkk {
    color: white !important; 
    }
    
    .ikea {
    display: table
    }
    
    .moonwalk { 
    transition: .2s ease-in-out; transform: translateX(-300px);
    }
    
    .rich-people {
    top: 1%;
    }
    .working-class {
    bottom: 99%;
    }
    
    .slimshady {
    vertical-align: top;
    }
    
    .sith {
    position:absolute;
    }
    
    .delorean { 
    z-index: -1955;
    }
    
    .illuminati { 
    position: absolute;
    visibility: hidden;
    }
    
    .twins {
    flex-grow:1;
    }
    
    .gangsta-rap { 
    word-spacing: 0;
    }
    
    * {
    position: relative;
    }
    
    .beer { float: right; float: left; float: right; float: left; float: right; float: left; float: right; float: none; }
    

    Если тема интересна — стоит гуглить «CSS Puns», если же хорошо работает фантазия — пишите свои каламбуры в комментариях.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 44

      –10
      смешноооооо
        –25
        Мне всегда нравилось менять курсор на ховере:

        .action:hover {
          cursor: pointer
        }
        
          +2
          Да ладно вам. Пятничный же пост ;)
            0
            Предпоследнюю не понял. А про flex-grow вообще не знал.
              +13
              Предпоследняя: Всё относительно
              +89
              .humor:visited {
                content: "accordeon";
              }
              
                +3
                .karma:after {
                    content: "+1";
                }
                
                +3
                Про ninja понравилось
                  +10
                  таки титаник всё-таки #
                  (the)
                    +3
                    Правильно, Титаник — это корабль класса «Олимпик», причем из трех кораблей этого класса нормально плавал только самый первый.
                    ship.olympic{
                        float:none;
                    }
                    
                    ship.olympic:first-of-type{
                        float:yes; /* Знаю, знаю, нет такого значения ;) */
                    }
                    
                    
                    
                      +8
                      ship.olympic:first-of-type {
                          float: yes;
                      }
                      ship.olympic:first-of-type + .iceberg {
                          float: none;
                      }
                      
                      • UFO just landed and posted this here
                          0
                          Скорее вот так:

                          :has(.iceberg) ship.olympic:first-of-type { float: none; }

                          Но можно ещё уточнить находятся ли они рядом или между ними есть что-то ещё.
                          Я всё жду когда :has() наконец реализуют. -_-
                            0
                            first-of-type — плавает!
                            А вот остальные — нет =)
                            С айсбергом встречался nth-of-type(2), кстати.
                      • UFO just landed and posted this here
                      0
                      современная версия pkunzip.zip?
                        +10
                        .perfection {
                          border: none;
                        }
                        
                          +3
                          .homo > .homini {
                              behavior: url('lupus.htc');
                          }
                          
                            +7
                            #spanish-inquisition {
                                color: red;
                                transition-delay: 10s;
                                behavior: url('fear.htc') url('suddenness.htc') url('cruelty.htc');
                            }
                            
                              0
                              И фанатичная преданность Папе!
                              0
                              .ussr {
                                border: solid 300cm #d4d7d9;
                              }
                              
                                0
                                Такого цвета, да ещё solid — скорее Берлин.
                                +18
                                .antarctic {
                                  white-space: 100%;
                                }
                                
                                  –4
                                  Что-то совсем идей нет :(.

                                  address {
                                      position: relative;
                                  }
                                  
                                  article {
                                      content: ""
                                  }
                                  
                                  ruby {
                                      color: red;
                                  }
                                  
                                    –4
                                    .woman {
                                        max-width: 0%;
                                    }
                                    
                                      0
                                      .lego {
                                          display: block;
                                      }
                                      
                                      .lego + .human {
                                          display: inline-block;
                                      }
                                      
                                        0
                                        #chucknorris::before, #chucknorris::after {
                                            content: url(#chucknorris);
                                        }
                                        
                                        +2
                                        .woman:visited {
                                        border: 0; bottom: 0;
                                        }
                                          +15
                                          #habr::before {
                                            content: "Торт"
                                          }
                                          
                                        –2
                                        .stalin + .mess {
                                        display: none;
                                        }

                                        .woman:not(.in-cart) {
                                        transition: all 1s ease;
                                        }
                                          +5
                                          .hell {
                                          bottom:-99999999px;
                                          }
                                          
                                          .twilight {
                                          position:fixed;
                                          left:0; top:0;
                                          width:100%; height:100%;
                                          background:rgba(0,0,0,0.1);
                                          }
                                          .evil {
                                          z-index:-1;
                                          }
                                          .anton-gorodetsky::after {
                                          content:'Всем выйти из сумрака!';
                                          }
                                          .evil {
                                          z-index:1;
                                          }
                                          
                                            +2
                                            .boris-moiseev {
                                            color:blue;
                                            }
                                            
                                            .russian-footbal {
                                            display:none;
                                            }
                                            
                                            .dictator {
                                            position:absolute;
                                            }
                                            
                                            .man.petya,
                                            .man.vasya,
                                            .man.slavik,
                                            .man.vova {
                                            color:#e9c9b4;
                                            height:175px;
                                            width:70px;
                                            }
                                            
                                              0
                                              .rub {
                                                  flex-grow: 0; 
                                                  flex-shrink: 1;
                                              }
                                              
                                              .$ {
                                                  flex-grow: 1; 
                                                  flex-shrink: 0;
                                              }
                                              
                                                +1
                                                .kremlin { border: solid red; }
                                                  +1
                                                  .kremlin-wall {
                                                     height:15em;
                                                     color:red;
                                                     border-top:2em dashed red;
                                                  }
                                                  
                                                • UFO just landed and posted this here
                                                    0
                                                    Ну и вопросы у вас… еле нашел, в www.google.com/fonts Anonymous Pro называется
                                                    • UFO just landed and posted this here
                                                    0
                                                    .accident {
                                                    margin-top: -1px;
                                                    }
                                                      0
                                                      В чем соль .kkk?
                                                        0
                                                          0
                                                          О, благодарю за удивительную оперативность, ну и непосредственно за сам пример)
                                                            0
                                                            Кстати, тут стоило бы вот так:
                                                            .kkk * { color: white !important }
                                                            
                                                              +1
                                                              Мои попытки каламбурить есть только в комментариях. kkk процитировал, но, в принципе, верно подмечено :)

                                                        Only users with full accounts can post comments. Log in, please.