03.07.2015 18:48
tegArt 44 39089 Источник
Хабровчане, всех с пятницей! Сейчас у подавляющего большинства читателей хабра рабочий день уже закончился, поэтому можно расслабиться и немного отвлечься от серьезных тем. Вы знали, что на 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», если же хорошо работает фантазия — пишите свои каламбуры в комментариях.

Комментарии (44)


  1. mckalech
    03.07.2015 22:39
    #8486527
    -10

    смешноооооо


  1. Zibx
    03.07.2015 22:53
    #8486533
    -25

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

    .action:hover {
  cursor: pointer
}


  1. DOC_tr
    03.07.2015 23:44
    #8486563
    +2

    Да ладно вам. Пятничный же пост ;)


  1. igordata
    03.07.2015 23:58
    #8486577

    Предпоследнюю не понял. А про flex-grow вообще не знал.


    1. Devil_Chrono
      04.07.2015 00:11
      #8486581
      +13

      Предпоследняя: Всё относительно


  1. stas404
    04.07.2015 00:03
    #8486579
    +89

    .humor:visited {
  content: "accordeon";
}


    1. w0den
      05.07.2015 14:05
      #8487399
      +3

      .karma:after {
    content: "+1";
}


  1. kvaki
    04.07.2015 00:30
    #8486585
    +3

    Про ninja понравилось


  1. qmax
    04.07.2015 01:19
    #8486607
    +10

    таки титаник всё-таки #
    (the)


    1. Ogra
      04.07.2015 08:17
      #8486667
      +3

      Правильно, Титаник — это корабль класса «Олимпик», причем из трех кораблей этого класса нормально плавал только самый первый.

      ship.olympic{
    float:none;
}

ship.olympic:first-of-type{
    float:yes; /* Знаю, знаю, нет такого значения ;) */
}


      1. Keyten
        04.07.2015 11:18
        #8486751
        +8

        ship.olympic:first-of-type {
    float: yes;
}
ship.olympic:first-of-type + .iceberg {
    float: none;
}


        1. Grawl
          07.07.2015 08:58
          #8489109
          +2

          в таком случае плавать не будет сама ледяная глыба. чтобы утопить Олимпик, нужно поменять выборки местами: .iceberg + ship.olympic:first-of-type { float: none; }


          1. Lain_13
            08.07.2015 11:57
            #8490755

            Скорее вот так:

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

            Но можно ещё уточнить находятся ли они рядом или между ними есть что-то ещё.
            Я всё жду когда :has() наконец реализуют. -_-


            1. Ogra
              08.07.2015 16:01
              #8491245

              first-of-type — плавает!
              А вот остальные — нет =)
              С айсбергом встречался nth-of-type(2), кстати.


      1. massimus
        07.07.2015 18:37
        #8489891

        > /* Знаю, знаю, нет такого значения ;) */
        float: right же! Это не только «справа», но и «правильно» :)


  1. mantiscorp
    04.07.2015 09:08
    #8486675

    современная версия pkunzip.zip?


  1. anmipo
    04.07.2015 10:59
    #8486743
    +10

    .perfection {
  border: none;
}


  1. Aleko
    04.07.2015 16:21
    #8487019
    +3

    .homo > .homini {
    behavior: url('lupus.htc');
}


  1. Aleko
    04.07.2015 16:48
    #8487029
    +7

    #spanish-inquisition {
    color: red;
    transition-delay: 10s;
    behavior: url('fear.htc') url('suddenness.htc') url('cruelty.htc');
}


    1. Aleko
      04.07.2015 16:50
      #8487031

      И фанатичная преданность Папе!


  1. bodqhrohro
    04.07.2015 17:28
    #8487053

    .ussr {
  border: solid 300cm #d4d7d9;
}


    1. Mercury13
      04.07.2015 17:46
      #8487059

      Такого цвета, да ещё solid — скорее Берлин.


  1. bodqhrohro
    04.07.2015 18:13
    #8487071
    +18

    .antarctic {
  white-space: 100%;
}


  1. Keyten
    04.07.2015 20:22
    #8487129
    -4

    Что-то совсем идей нет :(.

    address {
    position: relative;
}

article {
    content: ""
}

ruby {
    color: red;
}


    1. Keyten
      04.07.2015 20:27
      #8487131
      -4

      .woman {
    max-width: 0%;
}


      1. Keyten
        04.07.2015 20:31
        #8487135

        .lego {
    display: block;
}

.lego + .human {
    display: inline-block;
}


        1. Keyten
          05.07.2015 01:57
          #8487251

          #chucknorris::before, #chucknorris::after {
    content: url(#chucknorris);
}


      1. Blumfontein
        04.07.2015 21:03
        #8487155
        +2

        .woman:visited {
        border: 0; bottom: 0;
        }


      1. anmipo
        04.07.2015 22:27
        #8487213
        +15

        #habr::before {
  content: "Торт"
}


  1. Blumfontein
    04.07.2015 21:29
    #8487169
    -2

    .stalin + .mess {
    display: none;
    }

    .woman:not(.in-cart) {
    transition: all 1s ease;
    }


  1. tegArt Автор
    04.07.2015 21:36
    #8487179
    +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;
}


  1. nomn
    06.07.2015 10:08
    #8487867
    +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;
}


  1. dima117
    06.07.2015 12:43
    #8488063

    .rub {
    flex-grow: 0; 
    flex-shrink: 1;
}

.$ {
    flex-grow: 1; 
    flex-shrink: 0;
}


  1. JC_Piligrim
    06.07.2015 17:10
    #8488511
    +1

    .kremlin { border: solid red; }


    1. tegArt Автор
      06.07.2015 17:23
      #8488529
      +1

      .kremlin-wall {
   height:15em;
   color:red;
   border-top:2em dashed red;
}


  1. pashtikus
    06.07.2015 18:13
    #8488629

    Такой вопрос — а что за шрифт на скриншоте?


    1. tegArt Автор
      06.07.2015 18:39
      #8488681

      Ну и вопросы у вас… еле нашел, в www.google.com/fonts Anonymous Pro называется


      1. pashtikus
        06.07.2015 19:01
        #8488733

        Премного благодарен!


  1. TolyaMBA
    07.07.2015 11:27
    #8489301

    .accident {
    margin-top: -1px;
    }


  1. Acuna
    07.07.2015 14:44
    #8489585

    В чем соль .kkk?


    1. tegArt Автор
      07.07.2015 14:55
      #8489601

      соль


      1. Acuna
        07.07.2015 16:04
        #8489675

        О, благодарю за удивительную оперативность, ну и непосредственно за сам пример)


      1. Keyten
        08.07.2015 18:38
        #8491475

        Кстати, тут стоило бы вот так:

        .kkk * { color: white !important }


        1. tegArt Автор
          08.07.2015 18:56
          #8491495
          +1

          Мои попытки каламбурить есть только в комментариях. kkk процитировал, но, в принципе, верно подмечено :)