8 апр 2022 в 22:45

blank html и только css

Ожидает приглашения

Сначала будет небольшое отступление, которое можно пропустить... кому не терпится сразу узнать результат.

Я был зарегистрирован на этом ресурсе около 7 лет назад и находился на нем в режиме readonly (и еще примерно столько же без регистрации). Мне всегда казалось, что написание статьи - это большая ответственность, так как, рассказывая что-то другим, нужно обладать действительной экспертностью в освещаемой области. Как и ранее, я придерживаюсь этого мнения, однако рискну попробовать...

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

В процессе пришла идея сделать страницу с некоторыми ограничениями:

Html-документ по стандартному шаблону, измененному лишь добавлением ссылки на стили, при этом ни одного тега в body быть не должно!
Внутри css-файла не использовать изображений либо ссылок на них.

В результате на входе мы имеем такой файл:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>

</body>
</html>

А на выходе такой результат:

Почему-то мне сразу пришла мысль делать телевизор

Как к этому прийти, можно посмотреть в css, но, если очень коротко, то через псевдоэлементы ::before и ::after, "теневые псевдоэлементы" box-shadow и совсем немного linear-gradient с четкими границами.

css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    height: 100vh;
    background-color: silver;
}
body {
    position: absolute;
    left: 25vw;
    top: 30vh;
    width: 50vw;
    height: 50vh;
    border-radius: 1vw;
    background-color: lightblue;
    background: linear-gradient(0deg, lightblue, lightblue 50%, rgb(187, 232, 247) 50%, rgb(187, 232, 247) 100%);
    background-size: 100px;
    border: 1vh solid #333;
    animation: animate_sea 0.5s linear infinite;
    box-shadow: 0 0 0 8vh lightcoral;
    overflow: hidden;
}
@keyframes animate_sea {
    0% {
        background-position: 0 300px;
    }
    100% {
        background-position: 0 0;
    }
}
body::before {
    content: '';
    position: absolute;
    top: -28vh;
    right: 50%;
    width: 15vh;
    height: 25vh;
    transform: rotateZ(55deg) translateX(-5vh) translateY(-7vh) ;
    border-right: 1vh solid #333;
    border-bottom: 1vh solid #333;
}
body::after {
    content: '';
    position: absolute;
    bottom: -12vh;
    left: -26vw;
    width: 101vw;
    height: 2vh;
    background: linear-gradient(90deg, transparent, transparent 26%, #666 26%, #666 30%, transparent 30%, transparent 70%, #666 70%, #666 74%, transparent 74%);
    border-bottom: 1vh solid #333;
    box-shadow: 0 5.2vh 0 5vh pink;
}

Прошу прощения, что цвета указаны то по имени, то по коду, но мне так удобнее.

Также интересно, что, если заполнить body, то это содержимое "телевизора" (язык остался "en" так как шаблон договорились не менять)

Вроде как ничего сложного, но почему-то нигде подобного решения я не встречал.

Хабы: