dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS каламбуры

34 селектора, которые рассмешат не только веб-разработчика и дизайнера

dr.Brain

время чтения 2 мин.

Photo by Carson Arias on Unsplash

Каскадные таблицы стилей (CSS) определяют визуальное представление элементов HTML-документа, в том числе цвет, отступы, фон, шрифт и другие свойства. В этой статье представлены свойства селекторов, которые заставят улыбаться, даже если Вы не понимаете для чего эти стили нужны.

#wife {
    right: 100%;
    margin: 0;
}
.rich-people {
    top: 1%;
}

.working-class {
    bottom: 99%;
}
.fear {
    display: none;
}
.ninja {
    color: black;
    visibility: hidden;
    animation-duration: 0.00001s;
}
.ghost {
    color: white;
    opacity: 0.1;
}
#rap-artist {
    word-spacing: 0;
}
#bruce-banner {
    color: pink;
    transition: color 10s;
}

#bruce-banner.the-hulk {
    color: green;
}
#kim-kardashian {
    padding-bottom: 99999px;
}
#mario.mushroom {
    transform: scale(200%);
}
.autobots {
    transform: translate3d();
}
#ikea {
    display: table;
}
#lego {
    display: block;
}
.push-up-bra {
    margin-top: -25%;
    overflow: visible;
}
#tower-of-pizza {
    font-style: italic;
}
.illuminati {
    position: absolute;
    visibility: hidden;
}
#monarch {
    position: inherit;
}
.goverment {
    transition: all 4yr ease-out;
}
.hobbit {
    height: 50%;
}

.hobbit #foot {
    width: 200%;
}
#europe .country {
    border: none;
}
#usa + #mexico {
    border: 1px dashed;
}
#titanic {
    float: none;
}
#moses > .sea {
    column-count: 2;
}
#bermuda-triangle {
    display: none;
}
.invisibility-cloak + #harry-potter {
    visibility: hidden;
}
.sniper-mode-engaged {
    cursor: crosshair;
}
#periodic {
    display: table;
}
#big-bang::before {
    content: '';
}
#nsa {
    opacity: 1;
}
.infinity-edge-pools {
    overflow: hidden;
}
.obese {
    width: 200%;
    overflow: visible;
}
#muscles {
    display: flex;
}
.religious-upbringing {
    perspective: inherit;
}
.yomama {
    width: 99999999px;
}
#chucknorris {
    color: #bada55;
}

Надеюсь, было весело. Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.