html

A collection of 5 post

Rebuild Gmail text input

Alt Text Here you can find the live version Now let’s see how you can build one. We’ll start like always with HTML For our text input we first need to create a container: In this container we are going to have as first child a text input, a label and then a div which will be used to add that nice…

Show details transition using HTML and CSS

Alt Text If you’ve seen the above transition and you liked it then it’s time to move on and see how it’s built. It’s pretty easy to build something like that using only HTML and CSS, so let’s get ready: We’ll start as always with HTML part: First we’ll start off by adding a container for our image…

CSS Scan or an easiest way to inspect and copy CSS

CSS Scan or how you can easily copy any css by the speed of light Get it here. What is CSS Scan? Just as the name suggest, it’s an tool which can be used to copy CSS from other websites so you don’t need to open the inspector to learn how something it’s actually coded. Just click and element and…

Fixed bar with animated social icons

Fixed bar with animated social icons Have you ever wondered how some of the websites that you visit have a fixed bar with social icons on the left of the page and it just sits there? Have no fear because this post will cover that! How to make an element fixed: .div{ position: fixed; } Done! Yes, is…

CSS Animations

CSS Animations When building a css animation you’ll need to know to essential keywords: @keyframes animation The first one is used to define how an animation behaves over time and the second one is used to reference the keyframes that we create. Let’s assume that we have a box and we need to shift…