Constructs

Have you heard about ghost buttons? This is perhaps a common term for designers and you probably have seen a ghost button in action without knowing one. The ghost button first gain traction and became a trend in 2014.

So what is a ghost button? The most basic and common ghost buttons style is a transparent button with solid white border and white text. The padding is often generous and border thickness varies depending on the design style. Due to the transparency, whichever image or elements behind it will naturally become the background of the ghost button. This is popularly used as the call-to-action for hero images (often huge banner at the very top of your page) or as a more minimalist alternative to huge, blocky, high-contrast buttons that are trying too hard (according to our Stampede designers!).

Read More

Animation has been a key part of websites since the early days. They could be in many forms such as GIF, SVG, background video and etc. Now that browser support has improved across devices, CSS animations has gained some traction in the web design world. In this Tuts+ tutorial, Catalin Miron showed us how to create animations using purely CSS. The main component of CSS animations are @keyframes which contains the animation rules and animation which contains properties to control the animation style. Hit the button below to learn more.

View More   View Demo

With CSS3 technology, many creative styling and effects can be created. In this post by WebDesignCrowd the author experimented with animated perspective menu style using CSS3. This cool and unique tutorial was built using HTML, CSS and a dab of jQuery for toggling classes. The HTML structure was divided into two sections; the menu and content. The combination of perspective and transform CSS properties are the key that enables the tweaking of position and perspective of the content. Anyhow, this unique effect can only be viewed in webkit browsers for the moment.

View More   View Demo

Inspired by prismic.io, Claudia Romano has created a demo and tutorial called 3D Animated Mockup, useful for showcasing your application features. The smooth 3D animation was created using CSS and jQuery and is supported by most modern browsers nowadays. This responsive website will turn to desktop version when reaching 1170px breakpoint. Starting at 1170px, you will see a smoothly animated 3D mockup after clicking the Start button. Also featured in the demo is the Points of Interest clickable tooltips for highlighting the points of interest of your products. Hit the button below to view the tutorial and demo.

View More   View Demo

If you think solid color text is too mainstream, do read on. Chris Sevilleja has created a tutorial on how to place a background image or gradient to regular text and even better, animate it! The important CSS property to make this happen is -webkit-background-clip, which means this technique is only limited to webkit browsers. In the demo, the main <h1> text is given background-image, -webkit-background-clip:text; and -webkit-text-fill-color:transparent; CSS properties. Without -webkit-background-clip:text;, the image would just appear like a regular background. -webkit-background-clip:text; works by clipping the background image into text and finally to make the text color transparent, we use -webkit-text-fill-color:transparent;. Hit the button to read more and view the rest of the demos.

View More   View Demo

Jonathan Cutrell from Tuts+ shared a great post about seven CSS units of measurement that you might not know about yet simply because they are rarely used in front-end development. The usual px and em measurement units are totally fine but you will be in great advantage if you know about a couple of these lesser-known units especially when coding a responsive website. The CSS units mentioned in Jonathan’s article are rem, vh, vw, vmin, vmax, ex and ch. rem, vw and vh are supported by IE9+, vmax by IE11+ and vmin is actually “vm” in IE9. ex and ch meanwhile are only supported in newer Google Chrome.

View More

Danny Markov from tutorialzine.com has shared 12 types of sharing button effect demos. These effects were coded mostly in CSS with the transition, transform and filter CSS properties. Only the “Rumble” effect demo was built using a little jQuery plugin called jRumble. If you need a playful-looking effect, this plugin is a must. My personal choice? I love the fall back and the zoom effect. Hit button below to view more or to view demo.

View More   View Demo

CodyHouse.co co-founder Sebastiano Guerriero shared a responsive and easy to customize mega-menu for large sites, enriched by subtle CSS animations and support for devices with JavaScript disabled. The unique thing about this mega-menu is the sub-items are revealed by slide-in approach instead of becoming an accordion in the mobile version. The slide-in style can also be found in the desktop version. This enables pretty much endless nesting of sub-items in the menu. Sebastiano created the mega-menu using a combination of HTML, SASS and jQuery. The HTML structure are broken into four main sections; <header>, <main>, <nav> and <div>. He kept the containers separate because they are much easier to handle in mobile devices. In bigger screens, the containers are all moved inside <header> using jQuery. View the full structure and style by hitting the button below.

View MOre   View Demo