I’ve got a lot of emails regarding my tutorial “How to create Bubbles in Photoshop” and I would like to thank you all for warm words! I am really happy to hear that this tutorial helped you with your work! It keeps me motivated. Some of you asked me to prepare the tutorial on how to create Bubbles in CSS, so here we are today! Ta-daaaah! CSS Bubbles tutorial is ready! Please follow the steps below and create awesome bubbles on your web page.
To create the animation you need to have two images of the luggage (closed and open) in SVG/ png format (to practise only you can use mine which I drew in Adobe Illustrator CC) and follow the steps below:
Practising SVG Path drawing I created the SVG Handwriting Animation.
I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.
Draw your text
This time I used the Pencil tool, and renamed each path (like on the image below, I drew letter L and I named this path as an L). This will make the animation easier to set up later.
I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.
Draw your text and export it like an SVG.(To see how to create an SVG file click here).
I took me some time to prepare the code examples to this tutorial, but definitely, it was worth to go it through. You can learn a lot of useful stuff, and later create an amazing things using CSS Perspective Property. Let’s start from the beginning!
Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using CSS. Sounds good, is it? 😀
CSS Perspective property
CSS Perspective-origin property
CSS Perspective Property
The CSS perspective property is used to give a 3D-positioned element some perspective.
The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
When defining the perspective property property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.
length– how far the element is placed from the view
none– default value. Same as 0. The perspective is not set