blog4coders.comhttp://blog4coders.com
Web development at 360° - Only the coolest trends on the web.Thu, 17 Jul 2014 23:09:16 +0000en-UShourly1https://wordpress.org/?v=4.4.14Create Smart Fixed Navigation with JavaScripthttp://blog4coders.com/create-smart-fixed-navigation-javascript/
http://blog4coders.com/create-smart-fixed-navigation-javascript/#respondThu, 17 Jul 2014 15:18:59 +0000http://blog4coders.com/?p=77Smart Fixed Navigation is a fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

]]>http://blog4coders.com/jquery-tilted-page-scroll/feed/0CSS Specificityhttp://blog4coders.com/css-specificity/
http://blog4coders.com/css-specificity/#respondThu, 17 Jul 2014 12:46:41 +0000http://blog4coders.com/?p=49Writing CSS code up to latest standards might sound easy for many web developers but yet only few understand CSS in depth and are able to write good reusable CSS.

One of the things to take into account when writing CSS code, it’s the concept of CSS specificity.

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

Crescent order of specificity

The following list of selectors is by increasing specificity:

Universal selectors

Type selectors

Class selectors

Attributes selectors

Pseudo-classes

ID selectors

Inline style

As you can see from the picture on top, CSS Specificity can be represented by 4 columns of priority:

inline=1|0|0|0

id=0|1|0|0

class=0|0|1|0

element=0|0|0|1

Left to right, the highest number takes priority.

Therefore never use inline styles for CSS because they have the highest priority in the specificity stack. Furthermore, using inline styles would go against the principle of keeping separated each web technology in order to improve code reusability and have a modular approach:

HTML for structure

CSS for presentation

JS for behaviour

Also, avoid using IDs for CSS but instead use classes which can be much more reusable in your web project.

]]>http://blog4coders.com/google-developers-web-starter-kit/feed/0Smooth animations with CSS onlyhttp://blog4coders.com/smooth-animations-with-css-only/
http://blog4coders.com/smooth-animations-with-css-only/#respondTue, 15 Jul 2014 19:34:58 +0000http://blog4coders.com/?p=24Animations can no doubt improve the user experience on web, adding interactivity and giving a sense of motion to otherwise static and not much engaging web-pages.

Latest browsers now offer good native support for CSS3 animations, and with less need for Adobe Flash, especially on mobile, it seems that CSS3 is the best option for bringing any user interface to life with similar results of the best designed, award winning, native apps.