Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Xhtml & Css’ Category

Although JavaScript is seen as a reliable language for animation CSS3 has also become a great choice. Transition effects can be used even in browsers where JavaScript has been disabled. But the greatest opportunity comes with a combination of both CSS3 and jQuery using fallback methods.

This post includes a handful of brilliant CSS3 animation libraries using transition effects. Many of them are based solely on CSS3 while others utilize a jQuery fallback. You’ll also find a small heap of open source code snippets which implement the same functionality with animated transitions.


css open source jquery plugin animition

Read the rest of this entry »

Once you learn the basics of web development it’s common to either move into backend languages or push further into more detailed concepts. CSS alone is such an expansive subject which now includes a handful of fun CSS3 properties.

Advanced development includes complicated topics that you often need to go out of your way to understand. But it’s worth the effort to build your skillset as a designer and to fully comprehend the engrossing design language of CSS.

Read the rest of this entry »

With a growing number of web choices, it’s no wonder that web designers pay great attention to the aesthetic part of their work.

Nevertheless, a website needs more than just great looks – its success depends on cross-browser compatibility, user friendliness, high loading speed and good content. Unless you know your way with coding, the best solution would be the conversion of the Photoshop mockup by means of a PSD to HTML service. Here follows a list of top fifteen solutions for 2014.

CSS Chopper

CSS Chopper

By far, the CSSChopper deserves great appreciation and warm recommendations. A NASSCOM-certified service provider, CSSChopper is currently providing services in over 90 countries, in the four corners of the globe. The company owns an impeccable infrastructure and promises to deliver 100% satisfaction guarantee.
Read the rest of this entry »

  • Tags:
  • Filed under: Xhtml & Css
  • Sometimes, using breakpoints in @mediaqueries are not enough and we also declare them (for further customizations) in JavaScript as well.

    Unison.js is a tiny script (<1kb minified, gzipped) that enables us to declare breakpoints only once and use them both in JavaScript and markup.


    It requires a preprocessor like SASS, LESS or Stylus to function. And, behind the scenes, it uses the font-family property on the page’s head and title tags to store information.

    There is also a debug feature which prints the breakpoints to see them easier.

    There are great and popular CSS preprocessors like SASS and LESS.

    Myth is an other one which allows us to write pure CSS without having to worry about browser support, or even slow spec approval.

    Myth CSS

    It simply functions like a CSS polyfill but we can still use variables and math functions.

    The tool auto-adds browser-prefixes, runs on Nodejs and has a nice JavaScript API.

    The loading indicators that are mostly used in Ajaxed interfaces are shifting from images to HTML-elements for max. flexibility.

    SpinKit is a free pack of these loaders that are built with HTML and CSS.

    There are currently 8 of them, all are good-looking and, although their CSS styles are presented in a link, the HTML structure can be found in the source.

    CSS Loaders

    Dynatable is a jQuery plugin which is capable of improving the usability of standard HTML tables very much.

    Once initiated, the plugin goes through the rows and columns of the table, converted to an array of JSON objects and becomes ready to manipulate.

    jQuery Dynatable

    It can than be sorted, filtered, paginated or searched with the powerful API provided.

    The plugin has functions to handle all the operations in a simple manner and it can also be used in other structured HTML elements like lists.

    We probably all experience the easy-to-use style-guides of front-end frameworks like Bootstrap or Foundation.

    Such guides help a lot when it comes to reaching the “how-to” quickly and they are a common source of information to make sure that every designer consumes the code in a similar way.

    Kalei Styleguide

    Kalei Styleguide is a project that can auto-generate such (Bootstrap-like) style-guides from the “live” CSS files so it is always up-to-date.

    It works on the client-side and uses the comments in stylesheets for creating the titles + navigation.

    Simply, it is a less-effort, almost instant generator that enables us to get organized with our stylesheets.

    Loader/spinner icons are a part of almost any web project that involves ajax requests.

    Lea Verou, an inspiring web designer has recently shared a simplistic solution to create a spinner with pure CSS.

    CSS Spinner

    There are already other solutions but this one is the cleanest of them all, uses only 2 elements and not much of CSS.

    Everything is sized with ems, so it can be resized however preferred, it works on all modern browsers and has a fallback text for others.

    There are always new ideas and approaches for anything related to web development and the same goes for responsive layouts.

    ResponsiveComments is a client-side solution for conditional loading in responsive web design.


    It uses the data attributes for defining the breakpoints and the HTML comments for hiding the content to be displayed on a defined screen-size.

    The approach comes with pros and cons where the biggest advantage is “being a quick solution, easier JavaScript manipulation” and the major disadvantage is the HTML-bloat.

    Uptime Robot