html Archives | Constructs

All posts tagged “html”

All the HTML-related tutorials, ideas and various posts in Stampede Constructs

October 14, 2014 | Less than a minute reading time

Use srcset for High Resolution Responsive Image

The most common use case when working with responsive images is you need different resolutions of the same image for different screen sizes. For this particular straightforward use case, Chris Coyier recommends using srcset on the <img> tag to control which image gets loaded in different widths rather than using the more verbose and complicated <picture> tag with explicit <source> declarations. Click the button to read the full discussion.

August 27, 2014 | Less than a minute reading time

comment 0

Minimal Responsive Newsletter Form

Getting a user to subscribe to a website’s newsletter mailing list is always the most challenging part. IMO, the key is where you position the call-to-action form. Then there’s the UI and UX of the newsletter form itself. When user decides to subscribe, we need to make sure the process is flawlessly smooth and simple. Claudia Romano and her team started experimenting with some subtle CSS3 animations to enrich the newsletter form while the user is interacting with it. You can see how the process improves user experience greatly through fluid animation and minimal interface.

Code readers click here Check out the Demo

August 20, 2014 | Less than a minute reading time

comment 0

Accordion Menu With Sliding Tiles

In my previous posts, I have already shared 2 posts about a number of demos and tips on creating an accordion menu. This time, I would like to share a demo of a sliding tiles accordion menu, a brilliant experiment by Wifeo. The logic behind this demo is actually quite straightforward. The tiles each respond to mouse over and slide to the sides to reveal text corresponding to the active tile. Wifeo achieved this through CSS visibility property to show and hide the text and transition for sliding the tiles on hover. Try it out!

August 12, 2014 | Less than a minute reading time

comment 0

Lemonade Responsive Framework

Thirsty for a new CSS grid framework? Look out for Lemonade. This 12-column grid is made with pure CSS. Works on IE 9+, Chrome, Firefox, Opera, and Safari, and has been thoroughly tested on iOS, Android, and Blackberry. Looks like a perfect weekend experiment. Are you up for it?

July 11, 2014 | Less than a minute reading time

comment 0

Create 3D Flipping Countdown

Let’s just say that you have a big event about to happen soon – how do we alert users on the event? Creating a countdown would be a good start. See how Doug Avery create this awesome flipping 3D countdown by clicking the button below.

View More View Demo

July 10, 2014 | Less than a minute reading time

comment 0

CSS3 Diamond Grid

Ever since its inception sometime in 1994, possibly created in CERN – the cradle of the web, CSS has come a long way. Creating shapes using CSS3 alone without the use of images is now made possible with its new properties. Creating a CSS3 diamond grid shape is cool by itself but how about combining multiple diamonds to create a grid?

Sam Norton from 1stwebdesigner has shared how to create CSS3 diamond grid by using the combination of HTML and CSS3.

View More View Demo

July 4, 2014 | Less than a minute reading time

comment 0

Creating Accordion Using CSS3

Accordion menu is a list of item stacked with functions to be “expanded” or “stretched” to reveal the content of the item. Usually accordion menus will be done using javascript code. But in this case, Paul Underwood has shared how to create horizontal and vertical accordion menus by using CSS3.

View More View Demo