DEV Community: ellie-html

REALISTIC CSS ART HACKS

ellie-html — Fri, 29 May 2020 10:51:37 +0000

The secrets of creating realistic CSS art, it's simple I promise!

I am going to show you how easy it is to make Realistic CSS Art using a simple worked example. CSS Art can be a really fun way to practice your CSS skills and knowledge so I definitely recommend having a go!

CHOOSING AN OBJECT

When selecting the object you want to draw you don't want the shape to be too complex. You need to break the object down into a few simple shapes, these simple shapes will be your divs.

TRACE YOUR IMAGE

After you have decided on the object and how you are going to break it down, it's time to start coding. To make your life 100% easier I recommend creating a container for all your divs and setting the object you are drawing as your background image so you can "trace" it. This makes positions and getting proportions correct much easier. Putting them in a container will also help with positioning.



.container {
    width: 700px; /* size of container */
    height: 700px;
    background-image: url(https://cdn.huntoffice.co.uk/images/D/can-of-coke.jpg); /* insert image to trace */
    background-size: 700px; /* you may need to play around with the sizing to fit container */
    background-repeat: no-repeat;
    border: 10px solid black;  /* so you can see your canavas */
 position: relative; /* important for positioning*/
}

CREATING YOUR SHAPED DIVS

Trace each shape by setting each div to have a random background color and opacity 0.5. This way you can see what you are doing. See below.

.top {
    /* size */
    width: 55%;
    height: 2.5%;
    /* position */
    position: absolute;
    left: 24%;
    top: 0.3%;
    /* shape */
    border-radius: 20%;
    /* to help you trace - will remove */
    background-color: green;
    opacity: 0.5;    
}

There are numerous ways you can get the shape you are looking for. I have linked some resources that will easily teach you how to create different shapes.

Simple shapes that can be made with CSS/one div
https://css-tricks.com/the-shapes-of-css/
Clip Path
https://bennettfeely.com/clippy/
Border Radius
https://codepen.io/pmk/pen/zGGXKW

Below I have completed the shapes for the coke can using the above resources.



.top {
    /* size */
    width: 55%;
    height: 2.5%;
    /* position */
    position: absolute;
    left: 24%;
    top: 0.3%;
    /* shape */
    border-radius: 20%;
    /* to help you trace - will remove */
    background-color: green;
    opacity: 0.5;    
}



.middle:before {
    content: "";
    /* size */
    width: 95%;
    height: 12%;
    /* position */
    position: absolute;
    left: 2%;
    top: -12%; 
    /* shape */
    clip-path: polygon(8% 0%, 91% 0%, 100% 100%, 0% 100%);
    /* to help you trace - will remove */
    background: blue; 
    opacity: 0.8;
}


.middle {
     /* size */
    width: 67%;
    height: 85%;
 /* position */
    position: absolute;
    left: 18%;
    top: 9.5vh; 
     /* shape */
    border-radius: 2% 2% 50% 50% / 49% 50% 7% 7%;
     /* to help you trace - will remove */
    background: rgb(16, 162, 53);
    opacity: 0.5;
}

.base {
    /* size */
    width: 67%;
    height: 5%;
    /* position */
    position: absolute;
    left: 5.4vw;
    top: 91%;
    /* shape */
    border-radius: 0% 1% 50% 50% / 49% 50% 57% 57%;
    /* to help you trace - will remove */
    background: blue;
    opacity: 0.5;
}


.base:before {
    content: "";
      /* size */
    width: 90%;
    height: 110%;
     /* position */
    position: absolute;
    left: 5%;
    top: 50%; 
    /* shape */
 border-radius: 50%;
 clip-path: polygon(0 0, 100% 1%, 90% 100%, 10% 100%);
 /* to help you trace - will remove */
   background: red;
   opacity: 0.5;
}

PICKING THE RIGHT COLORS

I have a very simple yet effective hack to get the right colors for your image - yes an image color picker:

https://imagecolorpicker.com/en/

As you can see from the main Coca-Cola image we are working (above) there is a slight gradient (like with most objects). Getting this gradient correct is key to making the object looking real! Use the image color tool I linked above and this CSS Gradient Generator to get the perfect gradient.

https://cssgradient.io/

To recap - using the color picking tool individually select each color in the gradient from the original image and then add it to the gradient generator to create the perfect color in CSS. Add this code to your shaped divs and viola!

example:

.middle {
     /* size */
    width: 67%;
    height: 85%;
 /* position */
    position: absolute;
    left: 18%;
    top: 9.5vh; 
    z-index: 6;
     /* shape */
    border-radius: 2% 2% 50% 50% / 49% 50% 7% 7%;
     /* color */
     background: linear-gradient(90deg, rgba(162,16,33,1) 0%, rgba(219,33,40,1) 10%, rgba(194,33,39,1) 22%, rgba(232,37,41,1) 31%, rgba(241,79,82,1) 42%, rgba(199,34,41,1) 56%, rgba(240,68,66,1) 71%, rgba(227,34,37,1) 79%, rgba(179,30,34,1) 88%, rgba(148,30,36,1) 100%);
}

BRINGING THE IMAGE TO LIFE USING SHADOWS/BORDERS

Adding borders and shading using box-shadow will really bring your image to life making it look more 3D. I suggest using this site to generate box shadows quickly:

https://www.cssmatic.com/box-shadow

Here I have added shadows and borders and as you can see the shape looks more defined and 3D.

Now you can go ahead and add whatever details you like, for me, I just added an SVG logo on top and this worked quite effectively. Once you have the shape you could also play around with different colors to make different soft drinks!

FINAL OUTCOME

Hopefully, I have explained how I break it down so you can make your own CSSobjects. I honestly love doing this and it has 100% helped improved my everyday CSS skills.

// Detect dark theme var iframe = document.getElementById('tweet-1265312795882672134-548'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1265312795882672134&theme=dark" }

Disclaimer: Please be aware I am not an expert and I just do this for fun. This is a very simple example for the purpose of this tutorial. If you need any help or would like to see a more complicated object break down, please let me know on Twitter - @ellie_html

CREATING A SPOOKY WEBSITE

ellie-html — Sat, 22 Feb 2020 18:51:56 +0000

A Beginners Take on Creating a Spooky Website

IDEA

Have you ever been to a website and just thought....nope I really don't like you. Well, that's exactly what happened to me which lead me into thinking.. how would I do it?

DESIGN

Background: This is a company in my area which runs amazingly scary Halloween events which are becoming more and more popular every year.

The original website was not laid out clearly, difficult to read and navigate. Plus, definitely was not spooky enough!!

So obviously this was only a quick design I came up with just to practice some different coding techniques as I am only a beginner. I find the method of actually trying to build something is easiest for me to learn to code!

The key concept I focused on here was setting the mood, whilst making it look professional so it will attract customers. So how can I set the mood all with a bit of code? It needed to be eerie, dark, have ghosts and BLOOD!

PLANNING

I decided to just use HTML and SCSS for this 'mini-project' with some JavaScript if needed. I am extremely new at SCSS so have been trying to use it as much as possible so saw this as the perfect opportunity.

Home-hero

The most important section. The first thing a customer sees, will they scroll for more? Or will they press that dreaded back button? This needed to be eyecatching, set the mood and make people want more in all just a few pixels.

I spend a lot of time scrolling through Pinterest and Dribbble getting ideas on the latest "hot" website trends - I highly recommend doing this to improve your designs! - but saw a text glitch effect I loved. Sorry, but I can't remember where or when I originally saw it! So I set to Google and found many a tutorial on how to do this. Perfect, I would be able to catch the eerie tone almost immediately with just one effect. Add a dark scary background and a navbar... BOOM home-hero planned.

New Events

A section made to entice existing customers back and new ones!

It works as an advertisement so I wanted it to be very interactive to represent how the event is. I also like how cards are used on websites as it makes it really clear what you are offering. So back to Google to find some interactive cards using just HTML and SCSS.

Highlights

This is purely an informational section and shows off what you've got.

Whilst searching for interactive cards for the previous section I found 'flipping cards' I decided to use this for this section as it encourages people to click and find out more.

Slogan

"Do you dare?" I questioned how could I make this extremely effective... BLOOD!

Whilst scrolling through front-end ideas I saw tutorials on how to make water drips, in my mind, it was easy enough to change the colour and turn this into a blood dripping effect. Totally thrilling!

THE CODE

Home-hero

Code for the Glitchy text and Glitch Effect background on the image.

New Events

Interactive cards with animated bar and button.

Highlights

Informational flip cards.

Slogan

Slogan with dripping blood effect.

Extras

The arrow I used in the home-hero.

Outcome

I absolutely adored how the final outcome turned out. For something that only took me a couple of hours and was only meant to be a quick project to practice some new code, I think it captured everything I wanted.

I also learnt lots of new things in the process. Using CSS animations to create a blood drip was actually pretty difficult and complex so definitely an area I need to return to so I fully understand as if used correctly it can look really effective. The same with the flip cards which were surprising. My favourite part had to be creating the Glitch effect, I just think it looks so cool!

View the full outcome on my twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1230530414646874113-842'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1230530414646874113&theme=dark" }

Conclusion

I have been learning code for just over a month now and I am really enjoying it. I love how this turned out, it is always super satisfying when something comes out better than you imagined it. Of course, it isn't perfect, I still feel like I barely know what I am doing. So if you have any suggestions or feedback, please feel free to let me know as I am keen to learn new things!

Disclaimer: Please be aware I did follow tutorials for all of the above but tried my best to make the code my own so sorry if it isn't perfect. It also isn't responsive as this wasn't what I was focusing on