DEV Community: Monet C

Code Newbie CSS Art pt.3

Monet C — Wed, 10 Mar 2021 04:23:25 +0000

It's been soooo long! Happy New Year and I hope you all are staying safe! My goal is to bring you more CSS Art tutorials and other blog posts this year, on a regular schedule.

2) HTML

<div class="head">
  <div class="l-eye"></div>
  <div class="r-eye"></div>
  <div class="mouth">
    <div class="l-teeth"></div>
    <div class="r-teeth"></div>
  </div>
</div>

3) CSS

.head {
  background-color: yellow;
  width: 500px;
  height: 500px;
  position: relative;
  border-radius: 50%;
  left: 25%;
  top: 80px;
}

.l-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  left: 20%;
}

.r-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  right: 20%;
}

.mouth {
  position: absolute;
  background-color: black;
  width: 200px;
  height: 100px;
  top: 300px;
  left: 30%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.l-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  left: 29%;
}

.r-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  right: 29%;
}

Live view of the code and image here

I hope you like this silly little face. It's been a while since I created any CSS Art so it's pretty simple, but I like him. The next few images will be even better! I want to build up to creating single-div CSS images. Please share resources and links to your own CSS art.

In my previous post, I share lots of resources for getting started in CSS art check it out here!

Code Newbie CSS Art pt2

Monet C — Sun, 18 Oct 2020 02:27:39 +0000

Hello everyone!

Here is a quick tutorial on another static CSS image I created a few weeks ago. I hope to show more CSS images that are responsive soon. But I'm currently learning Node.js and that is taking all my time!

1) HTML:

<div class="container">
      <div class="robothead">
        <div class="ear"></div>
        <div class="antenna"></div>
        <div class="face">
          <div class="eyes">
            <div class="pupil"></div>
          </div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="body">
        <div class="neck"></div>
        <div class="torso"></div>
      </div>
</div>

2) CSS:

* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #defff9;
}

.container {
  background-color: #f6393c;
  position: relative;
  width: 500px;
  height: 500px;
  top: 40px;
  left: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.robothead {
  background-color: #bbbbbb;
  position: relative;
  width: 50%;
  height: 50%;
  top: 160px;

  border-radius: 20px;
}

.ear {
  background-color: #ff8c00;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 6px;
  top: 80px;
  left: -30px;
}

.ear::after {
  content: "";
  background-color: #ff8c00;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 6px;
  left: 280px;
}

.antenna {
  position: relative;
  background-color: #ff8c00;
  width: 60px;
  height: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  bottom: 20px;
}

.antenna::before {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 14px;
  height: 20px;
  bottom: 19px;
  left: 23px;
}

.antenna::after {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 30px;
  height: 30px;
  bottom: 37px;
  left: 15px;
  border-radius: 50%;
}

.face {
  position: relative;
  /* border: 1px solid white; */
  width: 200px;
  height: 200px;
}

.eyes {
  position: absolute;
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 40px;
  left: 8px;
}

.eyes::after {
  content: "";
  position: absolute;
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 118px;
}

.pupil {
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 30px;
  left: 20px;
}

.pupil::after {
  content: "";
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 106px;
  z-index: 1;
}

.mouth {
  position: absolute;
  border-top: 3px solid black;
  width: 150px;
  height: 10px;
  bottom: 30px;
  left: 25px;
}

.body {
  position: relative;
  top: 160px;
}

.neck {
  position: relative;
  width: 20px;
  height: 80px;
  background-color: #bbbbbb;
}

.torso {
  position: relative;
  background-color: #bbbbbb;
  width: 140px;
  height: 70px;
  border-radius: 20px;
  bottom: 50px;
}

.torso::after {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 40px;
  height: 20px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  left: 50px;
}

Live view of the code and image here!

I hope you like this little guy. I thought he was adorable. He's not perfect and I'm still working on my CSS and CSS art skills. The next few images will be even better. I want to build up to creating single-div CSS images. Please share resources and links to your own CSS art.

In my previous post, I share lots of resources for getting started in CSS art check it out here!

Code newbie CSS art

Monet C — Sat, 03 Oct 2020 23:23:24 +0000

HIYA!

Learn how to make a simple coffee cup using only HTML and CSS!

I'm a coding newb currently enrolled at Bloc.io in their Full-Stack developer track. I've grown to love CSS art and even though I know there are tons of blog posts about CSS art I wanted to share my thoughts on how to get started.

1) You do not have to be a CSS master to make CSS images:

I believe this wholeheartedly, I myself am no CSS ninja (yet ;-) )but I've been able to make some pretty cool images so far. I recommend using your preferred text editor or a website like codepen or codesandbox.

2) Learn positioning:

It would help to have a general understanding of positioning, especially relative and absolute. To get a general understanding check out CSS Tricks and Kevin Powell on YT. There are tons of other CSS properties that you should know and can learn with experience, but if you know the basics and positioning then you are all set :-)!

3) Let's write up the HTML:

Here we used 5 very simple divs to create this cup of joe.
A container to house the cup and steam. A div for the cup, the cup div has a child div called handle. After the cup div, there is a sibling div called steam-container here is where the child div steam is placed and makes the steam coming from the cup.

<div class="container">
   <div class="cup">
     <div class="handle"></div>
   </div>
   <div class="steam-container">
     <div class="steam"></div>
   </div>
</div>

4) Now the fun stuff, the CSS:

Note that a few CSS properties used in my code are position relative and absolute, ::before and ::after ( more information on this here: Kevin Powell on YT), and animation (more information on this here: W3Schools).

*{
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color:lavender;
}

.container{
    margin: 0 auto;
    position: relative;
    width: 700px;
    height: 700px;
    top: 30px;
}

.cup{
    background-color: white;
    position: relative;
    width: 200px;
    height: 250px;
    border-radius: 10px;
    top: 240px;
    left: 220px;
}

.handle{
    background-color: white;
    position: absolute;
    width: 170px;
    height: 150px;
    right: -100px;
    top: 50px;
    border-radius: 50%;
}

.handle:after{
    content: "";
    position: absolute;
    background-color: lavender;
    width: 60px;
    height: 60px;
    top: 45px;
    right: 40px;
    border-radius: 50%;
}

.steam-container{
    width: 200px;
    height: 100px;
    position: relative;
    bottom: 100px;
    left: 220px;
}

.steam{
    position: absolute;
    background-color:grey;
    opacity: 0;
    filter: blur(5px);
    height: 80px;
    width: 30px;
    left: 30px;
    animation: steam 3s linear infinite;
}

.steam::before{
    content: '';
    position: absolute;
    background-color:grey;
    height: 80px;
    width: 30px;
    left: 50px;
}

.steam::after{
    content: '';
    position: absolute;
    background-color:grey;
    height: 80px;
    width: 30px;
    left: 100px;
}

5) The Animation code if you're interested:

Please note in the CSS code above in the .steam{...} section there is an animation called "steam" which goes on for 3 seconds, we declare linear so that the animation has the same speed from start to end, and then we call infinite so that the animation plays forever. With this, we will then make a keyframe called steam and then set the animation.

@keyframes steam{
    0%
    {
        opacity: 0.1;
    }
    75%
    {
        opacity: 0.3;
    }
    100%
    {
        opacity: 0.1;
    }
}

To see the animation in action check out my Codepen

Thanks for reading and checking out my little tutorial. Please provide any feedback you may have. :-) I love CSS art so more blog posts to come.