If you have done many animations using pure CSS you have probably noticed a small flicker that happens when an element is animated, you may even have used a hack to stop that from happening. Happily hacks are no longer needed, we a have a new CSS property to help us deal with heavy animations and transitions. Why does the flicker happen? ... When you execute an animation, the animation is performed using the browser's software rendering engine which is usually much slower than your computers GPU (Graphics...
CSS3 is evolving in such a way that we can translate pretty much everything we create in Photoshop into CSS code. However one thing we haven't had so far is a text stroke. We can add shadows to text, but until now there was no viable solution for text stroke. Now we have a webkit solution that introduces us to text stroke using only CSS. Browser support ... This property is still experimental and not safe in all browsers but you can also set some defaults that will only act up when the user is using a browser that...
Working in groups can be tough. No, scratch that; it is tough. Group work is all about balancing personalities and trying to get the most from your partners. It's a great test of life — learning how to work with people, especially to create great things. Those who work in a team that genuinely meshes well are enormously lucky. Unfortunately, some of us don't get to live that life. One of the hardest things about working with a team is getting together to meet face to face. Aside from balancing personalities,...
Animating and transversing SVG files with Javascript is actually not such an easy task and plugins like Snap.svg make our lives much easier when it comes to animating our SVG files. This library is one that aims to help Web Developers easily bring advanced SVG features to the Web, with it we can load, animate and even create SVG graphics right in the browser. The creator of this plugin is also the creator or Raphael, also an SVG plugin. The main difference between these two resources is that Snap aims...
OldCo is a well-established company that uses only freelancers to maintain a website that drives 35% of all its revenue. Whenever the current workload exceeds capacity, it hires a few more freelancers. Work begins, and all of a sudden priorities change. The freelancers are dropped and are told they will be contacted again once the company figures out what's best for the business. Sound familiar, right? Do you hate having your time wasted? Do you feel like your client only cares about what you can do for...
CSS is growing more sophisticated all the time, with new tools for us to use. In this article I'll talk about one new feature: clipping with clip-path and masking. clip-path and masking are two properties that push the boundaries of the box model a little further than we've seen before. Browser support ... Happily, browser support is pretty good for clip-path. For desktop browsers it's supported as far back as IE9 (although some older browsers need vendor prefixes, as we'll see). The only real issue...
[— This is a sponsored post on behalf of Webydo —] Following on from the professional web design platform, WYSIWYG application Webydo’s announced its community-choice’s latest feature: Parallax Scrolling Animator. Voted for by almost 93,000 users, Webydo’s release of its code-free Parallax Scrolling Animator is an exciting feature update for professional web designers; giving them the freedom to create incredible web experiences for their clients and visitors, without the need...
We we first discovered that we could access a user's camera using Navigator.getUserMedia, we were all pretty amazed; but there's more… With the MediaRecorder API (MediaStream Recording) that's a construct inside Navigator.getUserMedia we can record media streams for the user's device and instantly use them in our app. Using the MediaRecorder API ... To use this API we need to have some recorded media to work with and for that we will use getUserMedia to get some. We simply create an if statement...