RedTeamDesign Articles on front-end development, CSS, HTML, JavaScript and more. http://www.red-team-design.com Gamespot's loading hearts "Video games ruined my life. Good thing I have extra lives." If you're a passionate gamer like me, then you've probably heard this before. On this matter, the other days I was browsing through some reviews to find out more about my latest favorite game, Dark Souls 2 which by the way, it rocks. But, I'm not making video games reviews here. The thing is that while checking the Gamespot review, I noticed a very nice and original loader somehow inspired by the above tagline. I fall instantly in love with that animation and tried to replicate it with CSS, I just couldn't help myself. So, just in case you weren't already tired of spinners and loaders, here's another one. Mon, 07 Apr 2014 08:00:00 -0700 http://www.red-team-design.com/gamespot-loading-hearts http://www.red-team-design.com/gamespot-loading-hearts Moving from WordPress to Jekyll My website was needing a fresh new look, and what better chance to learn a new approach than this? You may ask why would you want to move from WordPress to Jekyll when everything works just fine? That's a good question and I think the short answer is to learn. Mon, 03 Mar 2014 08:00:00 -0800 http://www.red-team-design.com/moving-from-wordpress-to-jekyll http://www.red-team-design.com/moving-from-wordpress-to-jekyll Simple SCSS spinner animation If you're using Wordpress, you surely have seen this spinner effect while performing various actions within the admin area. I liked it a lot and that's the reason I made a SCSS version of it, posted a demo on CodePen and even it's not rocket science, I pushed it on GitHub too. Sun, 09 Feb 2014 22:00:01 -0800 http://www.red-team-design.com/simple-scss-spinner-animation http://www.red-team-design.com/simple-scss-spinner-animation Data URI conversion tools Nowadays, encoding stuff is not a secret anymore and we're using data URI for small images, SVG's and even custom fonts. After all, this is one of the best ways to minimize the number of HTTP requests. On this matter, I thought about making a list with some online conversion tools you can use right away. Sun, 19 Jan 2014 22:00:35 -0800 http://www.red-team-design.com/data-uri-tools http://www.red-team-design.com/data-uri-tools A beginner's list of JavaScript gotchas I consider myself a novice when it comes to coding in JavaScript but lately I played a bit more with this language and stumbled upon a few random things I thought were worth sharing. So, if you are new to JavaScript or just don't know it as well as you would like, I hope you find this article useful. Sun, 08 Dec 2013 22:00:57 -0800 http://www.red-team-design.com/beginner-javascript-gotchas http://www.red-team-design.com/beginner-javascript-gotchas position: sticky might be the next best thing As you may have read a while ago, position: sticky landed in WebKit. Now, the latest news is that Firefox Nightly supports sticky positioning too and that's definitely good news! Sun, 15 Sep 2013 22:00:43 -0700 http://www.red-team-design.com/position-sticky-might-be-the-next-best-thing http://www.red-team-design.com/position-sticky-might-be-the-next-best-thing Just another dropdown menu concept I found this two years old Dribbble shot by Ignacio Giri. Don't ask me how, I just don't remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS. Sun, 28 Jul 2013 22:00:00 -0700 http://www.red-team-design.com/dropdown-menu-concept http://www.red-team-design.com/dropdown-menu-concept Making HTML dropdowns not suck Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn't too much CSS stuff you can apply to it, just properties like color, background, font or border. In this article, in order to customize the look of the native HTML dropdown select, we'll be using a different approach based on some cutting edge techniques like @supports, pointer-events and appearance. Sun, 30 Jun 2013 22:00:05 -0700 http://www.red-team-design.com/making-html-dropdowns-not-suck http://www.red-team-design.com/making-html-dropdowns-not-suck Dribbble invites giveaway Last month I wrote about my thoughts on becoming a better developer and not only. This time, to help you join the best design community, I have two Dribbble invites for you. Sun, 12 May 2013 22:00:12 -0700 http://www.red-team-design.com/dribbble-invites-giveaway http://www.red-team-design.com/dribbble-invites-giveaway Removing an element with the plain JavaScript remove() method As you might know, the DOM does not supports removing an element directly. When removing an element with JavaScript, you must go to its parent first instead. This was always odd and not so straightforward. According to DOM level 4 specs, which is the current version in development, there are some new handy mutation methods available: append(), prepend(), before(), after(), replace(), and remove(). In this article we'll focus a bit on one of the new kids on the block, the plain vanilla JavaScript remove() method. Sun, 28 Apr 2013 22:00:21 -0700 http://www.red-team-design.com/removing-an-element-with-plain-javascript-remove-method http://www.red-team-design.com/removing-an-element-with-plain-javascript-remove-method Thoughts on becoming a better developer I ask myself this question quite often. What it takes to become a better developer? Not a ninja, guru, master or whatever, but just a better developer. I'm talking about how to improve and learn more every day. Mon, 08 Apr 2013 01:15:50 -0700 http://www.red-team-design.com/becoming-a-better-developer http://www.red-team-design.com/becoming-a-better-developer Horizontal centering using CSS fit-content value The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it's about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths. As we all know, centering this kind of stuff can be quite tricky sometimes. With this common example in mind, Roger made an awesome list with solutions you can apply in order to achieve horizontal centering. Wed, 06 Mar 2013 23:50:52 -0800 http://www.red-team-design.com/horizontal-centering-using-css-fit-content-value http://www.red-team-design.com/horizontal-centering-using-css-fit-content-value Animenu - a responsive dropdown navigation made with SASS I've been pretty happy lately to see I'm still receiving a lot of positive feedback on my animated dropdown menu. I found that quite encouraging and I decided to start working on an improved version of it using SASS & Compass. The new version is responsive, has no JavaScript dependency and it's hosted on GitHub too. Sun, 24 Feb 2013 22:00:10 -0800 http://www.red-team-design.com/animenu-a-responsive-dropdown-navigation-made-with-sass http://www.red-team-design.com/animenu-a-responsive-dropdown-navigation-made-with-sass CSS 3D folding list with social buttons CSS 3D transforms are just awesome. I've seen before some cool and inspiring implementations in the wild and still I can't believe I didn't had the chance to write an article on this topic 'til now. So, what's the idea for this article? Let's say you own a blog, I was thinking about having a nice looking 3D folding list that contains the main social buttons and when people reach at the end of an article, the initial folded list would smoothly unfold. This could be helpful if you want to draw users' attention, something like: "Hey, did you like my article? Connect with me!". Sun, 27 Jan 2013 22:00:44 -0800 http://www.red-team-design.com/css-3d-folding-list-with-social-buttons http://www.red-team-design.com/css-3d-folding-list-with-social-buttons Things you may not have known about HTML & CSS I've recently watched a good video presentation by Mathias from Fronteers 2012 which I found both interesting and inspirational. I already had in mind some similar things, so I ended up writing this article down. It's about some random things and facts you may (not) have known about HTML & CSS. Sun, 06 Jan 2013 23:06:36 -0800 http://www.red-team-design.com/things-you-may-not-have-known-about-html-css http://www.red-team-design.com/things-you-may-not-have-known-about-html-css