3D Portfolio Template

CSS 3D Transforms can be used in plenty of creative ways, particularly if combined with CSS Transitions! Today’s nugget is a good example of how to use CSS to create a parallelepiped, whose faces are different projects. A filter on top of the page triggers the 3D rotations that reveal new projects.

Some great Star Rating widgets by CSS

Below are some great scripts to create a star rating widget. You can integrate to any where on your website. CSS Rater with SVG http://codepen.io/rogie/pen/jgrIu Pure CSS Star Rating Widget https://codepen.io/jamesbarnett/pen/vlpkh CSS Star Rating System http://codepen.io/lbngoc/pen/JRRgWP Star Rating with CSS http://codepen.io/lbngoc/pen/ZppgKw

Efficiently Detecting IE Browsers

This is a blanket check for IE in general. If you need to check for a specific version of IE, you can compare what comes back from the documentMode to determine what version of IE is being used. You can then add a specific class to code for that instance.

Checking if Font Awesome loaded

Icon fonts have become a widely-adopted visual asset on the web today and continue to grow in popularity. When your web page downloads resources — e.g., from a content delivery network (CDN) — you need to know if the HTTP request returned the files you requested. This is important whether it’s a JavaScript library, CSS… continue reading

Simple PHP Templates

This is a simple PHP based template where the variable fields in the template are enclosed in double parenthesis and the actual values are passed in a single array. The entire substitution happens in one step using preg_replace. If your template string is long, you can either put that in a separate PHP file (and… continue reading

AngularJS Form Validation

Today we’ll be looking at at the ways that Angular helps us do form validations. We’ll be talking more on forms using Angular. Don’t worry though, that article is not required. We’ll focus on client side validation and using the built in Angular form properties.

Drop Caps by CSS3 and cross-browser ways

Drop Caps Cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=”firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat… continue reading

CSS Counters drag-and-drop demonstration

CSS counters allow you to number items in CSS using dynamic numbering, similar to how an ordered list works. But CSS counters are quite different. This feature uses a pseudo-element combined with some counter-specific CSS to append/prepend a dynamic “count” to a specified set of elements.