Forem: Arturo Cabrera

Pure Css Phenakistoscope Animation

Arturo Cabrera — Fri, 31 Jan 2020 22:58:18 +0000

Hello!
Checkout my most recent codepen, a Phenakistoscope with pure CSS!

The Phenakistoscope was the first widespread animation device that created a fluid illusion of motion.

How millennials apply for jobs in 2019

Arturo Cabrera — Fri, 26 Jul 2019 15:18:32 +0000

– University Grad: *applies to job posting

– Recruiter: "You have the right skills, we're just looking for someone with a bit more experience...

– University Grad: *downloads Face App age filter and syncs to their Linkedin picture

– Recruiter: "Wait a minute, I think we can make this work. When can you start?"

😂😂

Animate "details" tag with pure CSS

Arturo Cabrera — Wed, 26 Jun 2019 21:11:02 +0000

Hello!

I saw a post with the title "HTML can do that?" and here the dev user added the <details> tag. Here is a small description from W3 Schools:

"The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the tag.
The content of a <details> element should not be visible unless the open attribute is set."

The problem here is that by itself the <details> tag isn't user friendly, I suggest adding a really small animation to it so the user knows exactly what content appears after clicking the detail summary.

Details tag with no animation:

To add an animation to it we first need to create the CSS keyframes. In our animation you can play with a lot of css rules, but to keep it simple we are only going to use opacity and a margin-left.

@keyframes open {
  0% {opacity: 0; margin-left: -20px}
  100% {opacity: 1; margin-left: 0px}
}

Once the animation is ready, let's assign this to our <details> tag with the [open] selector, just like this:

details[open] summary ~ * {
  animation: open .5s ease-in-out;
}

Here you can see the result:

This is a super simple animation you can add to your projects and the result is pretty nice!

Pure CSS Projects Intro

Arturo Cabrera — Wed, 19 Jun 2019 15:43:31 +0000

Hello!
I made a template with pure CSS and HTML to showcase any of your projects. Check it out on codepen!

If you want a Tutorial on how to make this type of intros let me know!

Sad Emoji Animation with HTML and CSS

Arturo Cabrera — Tue, 18 Jun 2019 15:21:34 +0000

Hello!

Today we're going to make a simple animation. We're going to start making a serious face "-_-" and then transform it to a sad one "T_T".

Here is the final result:

Let's start by adding our HTML into our codepen or a .html file.

<div class='container'>
  <div class='tear1 tear'></div>
  <div class='tear2 tear'></div>
  <div class='face'>
      <div class='eyebrow'>︶</div>
      <div class='eyebrow'>︶</div>
      <div class='eye'></div>
      <div class='eye'></div>
      <div class='mouth'></div>
  </div>
</div>

I added descriptive classes to each div to make it easier to read.

Now that our HTML is ready let's go ahead and center vertically and horizontally our main container

.container{
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

After this we can get started with the face and the mouth. Our emoji face is going to be 150x150 with a border radius of 50% in order to make a perfect circle, also let's add a position relative since the face is going to be our main container for other components. For the mouth, let's make a rectangle with a height of 10px and a width of 35px, center the element by adding "margin:0 auto" and add any background-color you want, in this case we are going to use gray (#bdc3c7). To position our emoji mouth correctly we need to add a margin-top in order to create space between the eyes and the mouth.

.face{
  width:150px;
  height:150px;
  border: 9px solid #bdc3c7;
  border-radius:50%;
  position:relative;
  z-index:9999;
}


.mouth{
  height:10px;
  width:35px;
  margin: 0 auto;
  margin-top: 15px;
  background-color:#bdc3c7;
}

You should see something really ugly now:

Let's now make the tears. In our HTML we added a common class called "tear" to "tear1" and "tear2", here we are going to add the css that both have in common, a background color, height, width, position and a top value.

.tear{
  position:absolute;
  background-color: #3498db;
  height:0px;
  width:45px;
  top:62px;
}

Why height with 0px? This is because we are going to animate that value, and our starting point needs to be at 0px.

Let's now add the right positioning to each tear and a border radius so tear don't pass the face limits.

.tear1{
  left:29px;
  border-bottom-left-radius:50%;
}

.tear2{
  left:98px;
  border-bottom-right-radius:50%;
}

At this point you are going to see the same exact thing because we haven't added our animations yet, but before adding the animations we need to place our emoji eyes and eyebrows in the correct position.

To make things simple, we are going to use this character "︶" for our eyebrows, but for now we are going to hide this character because is going to show until we add the sad face animation. Let's also rotate the emoji eyebrows to make it look even more sad.

.eye{
  height:10px;
  width:45px;
  background-color:#bdc3c7;
  display:inline-block;
  margin-left:20px;
  margin-top:20px;
}

.eyebrow{
  width:30px;
  font-size:40px;
  font-weight:bold;
  color:#bdc3c7;
  display:inline-block;
  margin-left:27px;
  margin-top: 10px;
  opacity:0;
}

.eyebrow:nth-child(1){
  transform:rotate(-20deg);
}

.eyebrow:nth-child(2){
  transform:rotate(20deg);
}

And now we're all set to add the animations, you should have a serious face by now:

To make the mouth animation we are going to play with the height, width, border-radius, border and margin-top for positioning.

@keyframes mouth{
  10%{height:30px;width:25px; border:6px solid black;border-radius:50%;margin-top:-8px;}
  50%{height:30px;width:25px; border:6px solid black;border-radius:50%;margin-top:-8px;}
  60%{height:10px;width:35px;border-radius:0%;border:none;margin-top:15px;}
}

Now that we have created our first animation, we're going to synchronize the other animations to this one.


@keyframes cry{
  10%{transform:translateY(-34px);background-color:black;}
  50%{transform:translateY(-34px);background-color:black;}
  60%{background-color:#bdc3c7;transform:translateY(0px);}
}

@keyframes eyebrow{
  10%{opacity:1;color:black;}
  50%{opacity:1;color:black;}
  60%{opacity:0;}
}

@keyframes face{
  10%{border-color:black;}
  50%{border-color:black;}
  60%{border-color:#bdc3c7;}
}

@keyframes tear{
  10%{height:96px;}
  50%{height:96px;}
  52%{height:0px;}
}

Now we only need to set the animation to the corresponding divs, we're going to set an animation delay in order to have the serious face for a few seconds at the start.



.face{
  animation: face 7s infinite;
  animation-delay:2s;
}

.mouth{
  animation: mouth 7s infinite;
  animation-delay:2s;
}

.tear{
  animation: tear 7s infinite;
  animation-delay:2s;
}

.eye{
  animation: cry 7s infinite;
  animation-delay:2s;
}

.eyebrow{
  animation: eyebrow 7s infinite;
  animation-delay:2s;
}

Now you are all set!

Animated Arcade with Pure CSS

Arturo Cabrera — Tue, 04 Jun 2019 13:47:23 +0000

Hello everyone

Today we are going to learn how to make an arcade machine with pure CSS, take a look to the final result:

First let's take a look on the individual figures that combined make the arcade happen. I'm going to rely on this image in order to explain this better.

Let's start by making the yellow figure that is all the way to the top, and also we are going to add the screw(purple circle) and the panels.

<div class='machine'>
 <div class='top'></div>
</div>

The div with the "machine" class will be our main container, "top" will be our yellow figure. Next we need a bit of CSS

body{
  background-color:#3d3d3d;
}

.machine{
  width:140px; 
  padding-top:40px;
/*Not needed, CSS only if you want to center vertically and horizontally*/
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation:shake .4s infinite;
/*Not needed, CSS only if you want to center vertically and horizontally*/
}

.top{
   width: 60px;
   height: 0px;
   border-right:20px solid transparent;
   border-left: 0px solid transparent;
   border-bottom: 40px solid #3498db;
   position:absolute;
   right:0;
   top:0;
}

In order to make our first figure, first, we need to set up the main container, in this case our arcade is going to be 140px width in total. The top yellow figure is just a little bit tricky since one of the sides is cut off, to achieve this effect we are going to use a trick with the borders. Let me explain with the image below.

We need to define a width, in our case is going to be 60px but we don't need to defined a height, instead we are going to use border-bottom as our height (red element in the image) and a border-right (green element), the border-right is the part we want to delete in order to achieve this effect, this is why we set "transparent" in the border-color and boom! we have our first element.

Let's now add the next figure to our arcade (gray figure) by following the same principle as the last figure.

<div class='machine'>
 <div class='top'></div>
 <div class='screen'></div>
</div>

Let's add another div to our HTML with the class "screen" and in our CSS let's also add:

.screen {
    width:80px;
    height: 0px;
    border-right: 0px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 130px solid #3498db;
}

This will add another figure below the yellow one, we used the same method as the first one but this time we used border-left instead of right.

For the next two figures below the gray one (orange and red), they are only simple div's with height and width, so let's go ahead and add two more div's into our HTML "table" & "bottom".

<div class='machine'>
 <div class='top'></div>
 <div class='screen'></div>
 <div class='table'></div>
 <div class='bottom'></div>
</div>

and also add this CSS:

.bottom{
  width:140px;
  height:100px;
  transform:translateY(-10px);
  background-color:#3498db;
}
.table{
  width:200px;
  height:35px;
  transform:translate(-60px,-1px);
  background-color:#3498db;
}

We are going to use the transform:translate rules in order to accommodate the figures in the right place. Now our Arcade should look like this:

We now have our skeleton ready to set all the little details, let's start by adding the button and the joystick on top of the table. Add two div's inside table with class "button" and "stick" respectively.

<div class='machine'>
     <div class='top'></div>
     <div class='screen'></div>
     <div class='table'>
        <div class='button'></div>
        <div class='stick'></div>
     </div>
     <div class='bottom'></div>
</div>

In our CSS we are going to defined the height, width, background and also use translate:transform to place the figures in the correct place. We are going to use the :after pseudo element in stick in order to place the circle on top of the stick.

.button{
  height:5px;
  width:15px;
  background-color:#f1c40f;
  transform:translate(10px,-5px);
  border-top-right-radius:5px;
  border-top-left-radius:5px;
}

.stick{
  height:20px;
  width:5px;
  background-color:#7f8c8d;
  transform:translate(35px,-25px);
}

.stick:after{
  content:"";
  border-radius:50%;
  height:15px;
  width:15px;
  background-color:#e74c3c;
  position:absolute;
  margin-top:-10px;
  margin-left:-5px;
}

Awesome! Let's add the screen now. In the html add another div with class "monitor".

<div class='machine'>
     <div class='monitor'></div>
     <div class='top'></div>
     <div class='screen'></div>
     <div class='table'>
        <div class='button'></div>
        <div class='stick'></div>
     </div>
     <div class='bottom'></div>
</div>

And in our CSS set "monitor" as an absolute element, with a rotation of 25 degrees so it could fit in our arcade.

.monitor{
  position:absolute;
  height:130px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  width:3px;
  margin-left:29px;
  transform:rotate(25deg);
  margin-top:-5px;
  background-color:rgb(66, 244, 220);
  box-shadow: -10px 0px 35px 5px rgba(66, 244, 220, .5);
}

We almost done! it is time to add all the little details to the arcade to make it look even better, to make this happen we are going to add div's with "screw", "panel" and "line" classes like in the following HTML:

<div class='machine shake-slow'>
  <div class='shine'></div>
  <div class='top'>
    <div class='screw screwTop'></div>
    <div class='panels'>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
    </div>
  </div>
  <div class='screen'></div>
  <div class='table color'>
    <div class='button'></div>
    <div class='stick'></div>
  </div>
  <div class='bottom color'>
    <div class='line'></div>
    <div class='line'></div>
    <div class='screw screwleftBottom'></div>
    <div class='panels'>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
    </div>
    <div class='screw screwRight'></div>
  </div>
</div>

To make the screws we need to add into our CSS a "screw" class which is going to have the properties for each single screw, we are going to set it up as a absolute figure to place it anywhere we want, after that we can just add a top/bottom and left/right to each single screw.

.screw{
  height:5px;
  width:5px;
  border-radius:50%;
  background-color:#34495e;
  position:absolute;
}

.screwleftBottom{
  bottom:5px;
  left:5px;
}

.screwRight{
  bottom:5px;
  right:5px;
}

.screwTop{
  top:5px;
  left:5px;
}

We are going to follow the same concept for the panels and lines


.panels{
  margin:0 auto;
  text-align:center;
}

.panel{
  height:30px;
  width:3px;
  display:inline-block;
  margin-right:2px;
  margin-top:30px;
  background-color:#34495e;
}

.line{
  background-color:#34495e;
  height:10px;
  width:150px;
  transform:translate(-5px);
  margin-top:10px;
}

.machine:after{
  content:"";
  position:absolute;
  height:230px;
  width:6px;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  background-color:#34495e;
  margin-left:100%;
  margin-top:-250px;
}


.line{
  background-color:#34495e;
  height:10px;
  width:150px;
  transform:translate(-5px);
  margin-top:10px;
}

And you are done! It should look something like this:

Now, if you want to get really fancy you can add animation to the arcade

@keyframes moveStick{
  0%{transform:translate(35px,-24px) rotate(0deg);}
  30%{transform:translate(35px,-24px) rotate(10deg);}
  60%{transform:translate(35px,-24px) rotate(-10deg);}
}

@keyframes push{
  0%{height:5px;}
  50%{height:4px;
  transform:translate(10px,-4px);}
}

@keyframes shake{
  0%{transform: translate(-50%,-51%) rotate(0deg);}
  30%{transform: translate(-51%,-50%) rotate(1deg);}
  60%{transform: translate(-49%,-50%) rotate(-1deg);}
}

.stick{
  animation: moveStick .5s infinite;
}

.button{
  animation:push .2s infinite;
}

.machine{
  animation:shake .4s infinite;
}

Hope you liked the post, if you have any question, feel free to leave me a comment. :D

Create Waves With Pure CSS

Arturo Cabrera — Mon, 27 May 2019 20:22:01 +0000

Hello everyone!

Today we are going to learn how to create waves with pure CSS like in ps4 interface, Here is the final result:

Let's get started

HTML



<div class='box'>
          <div class='wave -one'></div>
          <div class='wave -two'></div>
          <div class='wave -three'></div>
      </div>

We need a "div" for each wave you want to set up, in this example we are going to use 3 of them with the class "wave" and we are going to wrap them in another div with class "box".

CSS



.box {
  position: fixed;
  top: 0;
  transform: rotate(80deg); 
  left: 0;
}

.wave {
  position: absolute;
  opacity: .4;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  border-radius: 43%;
}

First we need to defined the "box" container as fixed position in this case, to achieve the same effect as the ps4 interface, the next 3 css rules are only for positioning the "box" element wherever you want. You can play around with those values.

After you set up the "box" element it is time to create the waves. If you look at the rules in the "wave" class most of the rules are for the positioning of the waves, but the key rule for this animation is the border-radius, here is the reason why:

We are creating rectangles with a moderate value of border-radius, if we zoom into a corner of this animation, and we position this waves in the right place we are going to achieve the wave effect.

Now we need to create the animation in order to rotate the waves. Super simple!



@keyframes rotate {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

Once we have our animation in the css, we need to set the animation into our waves with different timing and background colors, you can also play around with the opacity :D



.wave.-one {
  animation: rotate 7000ms infinite linear;
  opacity: .1;
  background: #0af;
}

.wave.-two {
  animation: rotate 3000ms infinite linear;
  opacity: .1;
  background: black;
}

.wave.-three {
  animation: rotate 7500ms infinite linear;
  background-color: #77daff;
}

And we are done! now you should be able to see the waves!!! Similar to this codepen I made a while back (works correctly on desktop only)

This was my first post! Hope you like it :D