Tips, tricks, tutorials…
Positioning and aligning images on an HTML page is crucial to layout the page. One of the most common questions is how to align an image to the center of a section. In this article we’re going to discuss many possible ways of placing images to the center.
Continue reading “How To Align an HTML Image To The Center?”
We’ve been recently tasked with building an interactive time zone picker for Date.Tools, and surprisingly, there was no solid ready-made solution available online. So we created our own. We started with a public SVG world map from Wikimedia Commons, stripped out unnecessary layers, and made it fully interactive using jQuery. In this article, I’ll explain how we built it, with a live demo included.
Continue reading “Time Zone Map Widget With HTML CSS and JavaScript”
In recent years, the demand for dark mode 🌗 options in web design has surged, driven by its aesthetic appeal and potential benefits for user experience. Dark mode not only reduces eye strain, especially in low-light environments, but it also conserves battery life 🔋 on devices with OLED screens.
Continue reading “Simple Animated Dark-Light Theme Switch for Your Website”
I’m presenting a very simple way of making a fancy text blinking using only HTML and CSS3. Adjust the values, setting a different blinking speed and colors.
I Am Blinking!
The Back to Top ↑ button is a useful user interface element commonly found on web pages, particularly those with long scrolling content. This button allows users to quickly return to the top of the page with a single click, improving navigation efficiency and overall user experience.
Visit Rubikscu.be for the live demo.
Continue reading “Scroll Back to Top Button With Progress Bar Indicator”
I have already presented how to draw faces with plain HTML+CSS and we’ve also learned about CSS keyframes animation. Let’s combine these two and create a continuously moving face with blinking eyes looking around and with a smiling mouth. Let’s do this using nothing but plain HTML5 CSS3!
In this article I’m going to teach you how to draw a cube with CSS3 transitions. We will be able to rotate the cube with keyframes animation and JavaScript. See the examples below. We can use this to make an online Rubik’s Cube solver, for example.
Continue reading “Drawing Animated 3D Cube With CSS3 Transform”
A very simple solution to allow website visitors to copy website content to their clipboard📋 with a single click or tap. Enhance your website’s user experience adding this feature. Grab the code below or see the live demo on jsFiddle.
Continue reading “Simple “Copy to Clipboard” Website Button with jQuery”
Popup boxes are the most useful way of showing a warning or any other important information to the website visitors in many HTML5 templates. In this article I’m going to walk you through the creation of a very simple popup box with shadow overlay and close button. We’re going to implement this using HTML, CSS and jQuery in less than 100 lines (not compressed code).
Continue reading “A Very Simple Popup Box – HTML, CSS, JavaScript”
Interactive ad banners improve click-through rates. In this article I’m going to present a HTML-CSS only soluton that imitates a fly swatter game inviting the website visitor to click on the moving insect. The whole banner is a link tag that in fact redirects to another website.
Continue reading “The Most Clickbaity Banner With HTML and CSS Only”
