CSS丑陋毛衣：R2D2，我们祝您圣诞快乐-DEV365 开发者社区

这是CSS丑陋的毛衣季节。在过去的两年中，我是根据丑陋的毛衣制作的CSS项目。灵感来自2020年的乐高星球大战降临日历，该日历上有一件毛衣的缩影。由于我做了《星球大战》，《神奇宝贝和万圣节》的毛衣。

今年12月9日的LEGO Advent日历礼物是C3PO，穿着R2D2的毛衣。那是当今艺术的基础。

自从今天的艺术是R2D2以来，您在阅读时会听这篇文章。看看您是否可以猜到这首歌上的著名歌手。

以前是丑陋的毛衣

我重复了前几年的基本毛衣HTML。我更改了CSS的深蓝色毛衣。我还将一排框更改为红色和白色。

以前的博客文章在this post中提供了有关毛衣结构的更多详细信息。以下是整体HTML结构的存根代码。

<div class="main">  
    <div class="flex-container">

    <div class="sweater">
        <div class=“torso">
                <div class="character">
           <div class="R2D2”></div>
                </div character>
            </div torso>
    </div sweater> 

       </div flex-container>
 </div main>

那是毛衣躯干。我在那个躯干中放了一个角色div。角色div内部是特定字符的div。对于此项目，它具有R2D2类。

:root {
    --sweaterblue: #105fa2;
    --droidblue: rgb(85 143 191 / 32%);

}

.R2D2 {
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
}

       <div class="character">
        <div class="R2D2"></div>
       </div>

这些是您要寻找的机器人吗？

R2的头

头部是一个矩形，边界半径施加到顶部的角落，而不是底角。这会在底部创建弯曲的圆顶。

眼睛和投影镜镜头是在边界半径50％的圆圈中制成的正方形。

    <div class="head">
        <div class="eye"></div>
        <div class="projector"></div>
    </div>

.head {
    background-color: var(--droidblue);
    height: 80px;
    width: 200px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
    border: 4px solid white;
    border-bottom: 1px solid white;
}

.eye {
    height: 20px;
    width: 20px;
    border: 6px solid white;
    background-color: white;
    border-radius: 50%;
}

.projector {
    height: 14px;
    width: 14px;
    background-color: white;
    border-radius: 50%;
    margin-left: 68px;
}

身体

主体或droidtorso div在腿部div内。以这种方式定位它是更干净的。腿div是一个修改的正方形，底部边框是透明的，因此不会在屏幕上显示。

    <div class="legs">
        <div class="droidTorso">
        </div>
    </div>

.legs {
    height: 200px;
    width: 240px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: visible;
    border-top-left-radius: 6%;
    border-top-right-radius: 6%;
    border-bottom: 2px solid transparent; 
}
.droidTorso {
    background-color: var(--droidblue);
    height:200px;
    width: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
    overflow: hidden;
    flex-direction: column;
    border: 4px solid white;
    border-top: 2px solid transparent;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;

}

车身面板

车身面板由水平杆和一个带有椭圆形的垂直盒制成。加上一个空的垫片盒，以帮助放置所有东西。

    <div class="legs">
        <div class="droidTorso">
            <div class="box"></div>
            <div class="box"></div>
            <div class="openbox">
               <div class="circle"></div>
               <div class="circle"></div>   
            </div>
            <div class="emptybox"></div>
        </div>
    </div>

.box {
    height: 10px;
    width: 50px;
    background-color: white;
}

.emptybox{
    background-color: transparent;
    height: 20px;
}  

.openbox{
    height: 60px;
    width: 40px;
    border:2px solid white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.circle {
    height: 22px;
    width: 18px;
    border-radius: 33%;
    background-color: white;
}

脚

脚是带有透明边框的正方形。边界比设计中的大多数边界稍厚。

这就是我使用形状和边界制作R2D2的方式。

    <div class="feetRow">
        <div class="foot"></div>
        <div class="spacerFoot"></div>
        <div class="foot"></div>
        <div class="spacerFoot"></div>
        <div class="foot"></div>
    </div>

.feetRow{
    height: 20px;
    width: 280px;

    display: flex;
    justify-content: space-around;
    align-items: center;

}

.foot{
    height: 10px;
    width: 40px;
    border: 4px solid white;
    border-top: 2px solid transparent;
}

.spacerFoot{
    height: 10px;
    width: 40px;
}

比较背景

最初我没有R2D2的背景。但是认为他头上的较小圆圈与背景中的雪融合在一起。我添加了一个具有低不透明度的背景，以帮助将其与众不同，同时仍与艺术所基于的数字匹配。

在机器人背景，顶部图像中，看起来更好的是底部图像？

星球大战琐事

"R2D2 We wish you a Merry Christmas!"

有一张星球大战圣诞节专辑“圣诞节中的星星”。一首歌是“ R2D2我们祝您圣诞快乐”，这是孩子们向R2D2唱歌的孩子。这是约翰·邦戈维（John Bongiovi）的第一张专业录音。知道名字吗？

您可能认识他是Bon Jovi的John Bon Jovi。那是您当天的音乐历史课。

-$JarvisScript git push

Chris Jarvis :verified: (@jarvisscript@hachyderm.io) - Hachyderm.io

52个帖子，以下171个，87个追随者 - 好吧，让我们最后做一次时间。我叫克里斯·贾维斯（Chris Jarvis）。我被放射性咬伤了变量和数学（floor）（）年一个也是唯一的jarvisscript

Hachyderm.io