All posts tagged “html

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

comment 1

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.

View More

Filed under: HTML


responsive newsletter form
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

UI Accordion Menu
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!

View More

lemonade responsive framework
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?

View More

CSS3 diamond grid
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

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