All posts filed under “CSS”

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

background-blend-mode
June 16, 2014   |   Less than a minute reading time
comment 0

CSS Gradients through background-blend-mode

The CSS background-blend-mode property blends the backgrounds of an element: colours, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is currently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but is not available in Internet Explorer. Bennett Feely has shared several CSS gradients backgrounds made possible via background-blend-mode. Check it out.

View More

Filed under: CSS

 

simple parallax
June 10, 2014   |   Less than a minute reading time
comment 1

Simple Parallax Scrolling

Parallax scrolling which was created by Ian Coyle for “Nike Better World” website in 2011, is what everyone has been talking about these days. It is a special scrolling technique with stunning effect often used as a great tool to serve user experience and perfect for storytelling websites. Petr Tichy has shared simple parallax scrolling tutorial at ihatetomatoes.net. Check it out.

View Demo

form ux
June 3, 2014   |   Less than a minute reading time
comment 0

Better Form UX through Label Floating

This highly useful technique helps user to remain informed when filling a form while taking less screen space, especially on mobile (read Brad Frost’s article discussing the pros and cons). From a design perspective, it is cleaner and space-efficient compared to having labels separate from their inputs. Thanks to Chris Coyier, a better form UX through label floating can now be done in pure CSS.

View demo on CSS-Tricks

Filed under: CSS

 

animated css
June 2, 2014   |   Less than a minute reading time
comment 0

Animated CSS Effects

Animation is one of the important elements to make a visit to a website more engaging and entertaining. Daniel Eden has posted a list of animated CSS effects you can choose from along with the code. Go thank him now!

View Demo

Filed under: CSS

 

spinners
May 30, 2014   |   Less than a minute reading time
comment 0

Lightweight CSS Spinners

Until recent years, programmers had to resort to using animated gif anytime a loading spinner is required. Thanks to CSS3, that is no longer the case. Luke Haas has shared a useful and most importantly lightweight method of using only CSS and a single HTML element to create spinners. Each spinner consists of a single div with a class of loader and content text of “Loading…”. The text is for screen readers and can be used as a fallback state for older browser.

View demo and source code   View on GitHub