Full Stack Web Developer and Freelancer
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.
This snippet will generate a simple 3-angle clock, inspired by 3Angle Watch Face See the Pen React Morph Clock by Siddharth Parmar (@Siddharth11) on CodePen. http://codepen.io/Siddharth11/pen/rrrgZN/
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
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.
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
In this article we will find out a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones.
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
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.
A reader sent me in a GIF showing off a cool effect they saw on Google on mobile. (Presumably the homepage you see when you launch Chrome on Android?) Ther
Many techniques for cropping image thumbnails on the front-end require explicit dimensions, which is less than ideal for responsive design.
Sample for dropdown menu when mouse over with jQuery and CSS
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 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.