Need to create a grid-like background? I recently needed one for an image drop-zone. It’s pretty simple to generate a grid background using the linear-gradient feature of CSS. https://codepen.io/goodkoding/pen/YMeaKr/ Simulated on CodePen The CSS lines to notice here is this: background-image: linear-gradient($white .4rem, transparent .4rem), linear-gradient(90deg, $white .4rem, transparent .4rem); background-size: 10rem 10rem; Here we’ve […]
Tag Archives: CSS
Traffic Simulation with HTML/CSS
Here is how to create a traffic simulation using HTML/CSS …and a pinch of JavaScript. I used CSS3 animations, vehicle images from freepik and jQuery. First, let’s create the road where the vehicles will run. We’ll add three lanes where one will be reserved for priority vehicles and public transports. On each lane, we’ll add […]
CSS Dropdown Menu
Let’s create a dropdown menu with CSS and HTML only. There are lots of fancy menus out there. This is just an experimental HTML-CSS based multi-level menu with room for improvements. Someone starting to learn CSS might find this helpful. To quickly explain how it’s done, menu is contained within ul and each menu item is […]
Blueprint CSS
This is a great CSS framework I’ve found online. Its optionality, and ease of use amazed me. This is mainly a grid based framework. You just create your element (e.g. div, span) and attach a class that corresponds to the disired width of your element. Thats it. 🙂 This really worth a visit…