If you come from a strong jQuery background and are new to AngularJS, you might have seen the following. AngularJS-compatible plugins that have been ported from jQuery. Now you wonder, why do I need an “Angularized” version of a standard jQuery plugin? I didn’t take this question seriously too when I first started out with AngularJS.
Web designer Stelian Firez shares a neat trick making clever use of CSS blend mode to de-emphasize background image icons on visited links. The reason why the usual opacity or rgba codes cannot be used to dim images is because browsers limit the number of CSS properties that can be applied to visited links, for privacy reasons. Stelian’s workaround comes from his experience designing in Photoshop, whereby he sets background-blend-mode:screen; and background-color:#000; to all icon links and then applying background-color:#ccc; to the :visited pseudo element. Click on the buttons below to read the full post or view the demo.
One of the subtle yet original UI elements you can add on your website or app are custom loading indicators or animations. In this post at CSSanimation.rocks, the author de-constructs the loading animation the webapp Buffer uses when users are signing in. Buffer’s approach is straightforward where it utilizes a simple GIF image that got swapped out with a static PNG logo when the loading completes. This tutorial takes it up a notch by reproducing the loading animation using CSS and SVG. The end result is a scalable, retina-ready loading animation at the fraction of the GIF file. This is a great tutorial if you are new to SVGs and CSS animations. Click the buttons below to learn more or jump straight to the demo.
One of the common CSS obstacles for novice web developers is trying to keep your website footer at the bottom of a page with short content. This unwanted behavior causes the footer to appear higher on pages with short content making the website looks half-complete. Matthew James Taylor wrote a nice little tutorial to those who are just starting out in HTML and CSS about how to keep footers at the bottom of the webpage permanently. In this tutorial you’ll learn a cross-browser solution to positioning the footer using position:absolute and a couple of height properties. Hit the buttons below to learn more.
Exit intent is a very popular mechanism implemented on websites or landing pages to get leads and users, who would otherwise never return to the site by presenting them with attractive offers or a very simple, direct call-to-action to give a sense of urgency. Exit intent technology functions by observing mouse gestures, the speed of the mouse, the location of the mouse, and whether or not it breaks the plane of the browser to predict whether or not your intent is to leave the website, and this is what Ouibounce.js does behind the scene. This standalone JS library is the creation of Carl Sednaoui and comes with configurable options such as sensitivity, cookie duration and timer. Hit the buttons below to learn more about Ouibounce.js exit intent popup.
If you have ever coded HTML emails, you’d know how much of a headache it can be. Now up the ante by introducing responsive HTML emails and imagine the countless hair-pulling moments you would have. Fortunately, there’s a responsive email framework called Ink created by Zurb, created by the same team that gave us Foundation. Ink tries to make it easy to build custom and responsive HTML emails that work on all devices. In this Scotch.io post, Nicholas Cerminara shares in detail the fundamentals of Zurb’s Ink platform as well as covering some HTML email best practices. At the end of the tutorial, Nicholas coded a large boilerplate that we can use to copy and paste code from for our HTML email. Hit the buttons below to learn more.
Sublime Text is a sophisticated text editor for coding and markup that we all love. A lot of Sublime Text cool features comes from installing small packages and one of them is Sublime Linter for code linting. Linting is the process used to make sure that our files are error free. Making sure we have a good linting program is a smart way to avoid small errors during development like missing a semicolon or curly bracket. In this blog post, Chris Sevilleja shares the step by step process of installing and configuring Sublime Linter in an easy to follow 5 minutes video. He was using PHP, JS and CSS for his demo but Sublime Linter supports many other syntax too. Hit the button below to learn more about this nifty little package.
When working with icon fonts, one of the issue you may encounter is when trying to vertically center the icon font against an adjacent text. If the text are all lowercase, the approach is pretty straightforward using CSS vertical-align:middle. However, when you have an all uppercase or a title case text, the icon starts to go out of alignment and possibly none of the usual vertical-align values can mitigate it. In this blog post, Jonathon Snook explains how he worked around this issue using some relative positioning and a manually set value using the ex unit on vertical-align. Hit the button to learn more.
A selector is the most basic component in CSS and CSS3 comes a bunch of selectors and pseudo classes that works wonderful with modern browsers. For instance, you can select the first letter of a paragraph to produce a drop-cap effect, select even and odd elements for making zebra stripe table rows, highlight a certain section when users click on a link with an anchor and many more. If you are fairly new to the world of CSS, check out this article by Chris Sevilleja to get acquainted with some of the commonly-used CSS3 selectors. For a more advanced coverage, check out this related article we have featured a while back. Hit the button below to learn more.
The difference between <html> and <body> is easy to overlook. When applying global styling to a webpage I tend stack up all the CSS rules to the <body> element without even thinking much. This is not incorrect but as a frontend developer it is a good idea to be aware of every lines of codes we wrote. In this CSS-Tricks article, Geoff Graham goes over the key differences between the use of <html> and <body> in CSS and consider some practical applications where styling one over the other might make sense. Hit the button to learn more.
Stampede Design