15 New Awesome Creative CSS Animations  

Published May 2, 2015 by saurav.roy.

CSS animation software allows web designers to develop creative animations with advanced CSS tools that includes multimedia formatted images. We have gathered some of the latest, best and creative CSS animations that designers would love to put on their own websites.

1. Fake Fruit Shop


2. Google Now 3rd Party Apps


3. Menu Icon Animation


4. Elastic SVG Sidebar Material Design


5. The Ultimate Hamburger Menu


6. Animated Background Gradient


7. Chrome Dinosaur Animation


8. 3D Walking Robot


9. 404 Animated Character


10. CSS Loading Animation


11. Hamburger Icon CSS3 Only Animation


12. CSS The Avengers


13. Particle Button


14. Cruisin’


15. Signature Animation


Hope you like all the creative CSS animations that we have researched for you. If you have developed any new creative CSS animation, do let us know and we would love to feature it on our website.



Five Informative CSS Blogs All Designers Should Follow

Published February 25, 2015 by saurav.roy.

The days are over when we would depend on designers and developers to help create and update our websites. Now, with CSS available on the market, working on our own websites have become simple and hassle free. CSS is flexible and it is extremely easy to create code. If you have your own website, or are working on creating your own, here are some blogs you can follow to get regular updates of CSS.


1.  CSSWizardry

With this blog, Harry Roberts consults designers on various aspects of websites. This blog will guide you through how to write high quality responsive UIs, how to scale large codebase, or how to rationalize design process.  CSSWizardry also keeps workshops regularly and offers training sessions on company requirements.


2. CSSTricks

On CSSTricks, designer Chris Coyier educates readers on CSS or any modern web technology. You can create your log-in on the website to gain access to videos that will help you create a website from scratch. There are various blogs, videos and snippets to handle all your queries.


3. Life at bleeding edge (Web Standard)

This blog is by a professional front end developer/web designer /computer scientist, Lea Verou. There are various blogs on this website regarding the development of sites and various web standards. Verou can also guide you through experimenting with CSS3.


4. Codrops

Codrops is filled with lists of tricks, tips and tutorials explaining a number of techniques. It is not just CSS based, and is suitable for any web developer.


5. Stubbornella

Stubornella is neat blog covering all aspects of CSS. It will help designers sail through the concepts of website development and answer a lot of basic questions.


12 Creative and Cool Uses for the CSS Border Property

Published December 23, 2008 by saurav.roy.

random art using the CSS border property

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for. Read On…

CSS Newbie Gets a Facelift

Published December 1, 2008 by saurav.roy.

Welcome to the new and improved CSS Newbie! This new version of the site has been a long time in the making, so I’m very excited to finally have it ready for its grand unveiling. And to make things extra auspicious, today is also the eight month anniversary of the site’s official launch on February 1, 2008.

Before I go any further, I’d like to thank Jeremy Harrington of crawlspace|media for designing the page you see before you (or, if you’re reading this in your RSS feed, you should really click through to the site proper). Jeremy was extremely patient with my incessant tweaking, and I think the result is a very beautiful and functional site.

Now, the main focus of CSS Newbie hasn’t changed. I’m still going to strive to produce quality articles on all matter of web development, with a focus on CSS in particular, but also including XHTML, JavaScript, and related frameworks, templates, and technologies. After all, CSS by itself isn’t much use without those other disciplines.

That having been said, there are a few changes to the site that I’d like to take some time to point out. Hopefully, you’ll find them all beneficial (or at least not overly annoying).
Read On…

Horizontal CSS Dropdown Menus

Published May 20, 2008 by saurav.roy.

Last week, CSS Newbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS. It turns out that there is a CSS-riffic way to do this, and in the spirit of maximizing benefit, I thought a tutorial would be in order.

The XHTML involved is identical to that used in our regular dropdown menus: a nested unordered list, where the nested lists become the submenus. It looks something like this:

<ul id="navbar">
	<li><a href="#">Item One</a><ul>
		<li><a href="#">Subitem One</a></li>
		<li><a href="#">Second Subitem</a></li>
		<li><a href="#">Numero Tres</a></li></ul>
	<!-- ... and so on ... -->

Next we’ll move to the CSS. I started out by moving the navigation bar to the top-right corner, like the design called for, removing the list styling, and floating the items left to make them line up in a row:

#navbar {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;}
#navbar li {
	list-style: none;
	float: left; }

Next, I styled the primary anchor tags to make them look more like the navigation Andrea was looking for. The code looks like this:

#navbar li a {
	display: block;
	padding: 3px 8px;
	text-transform: uppercase;
	text-decoration: none; 
	color: #999;
	font-weight: bold; }
#navbar li a:hover {
	color: #000; }

I’ve added a bit of padding to the link, and used the text-transform property to make everything uppercase like the mockup called for. That way, the original XHTML can be lowercase or camel-case (capitalized first letters)… which would be a little easier to read in an unstyled document.

Next up, we hide the nested lists by default, and then style them when the containing list item is hovered over:

#navbar li ul {
	display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
	position: absolute;
	display: inline;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0; }

The code above is the bit that really makes most of this magic work, so I’ll explain the important parts in some detail. First, because IE6 doesn’t support hover states on anything other than anchor tags, we’re writing our rules to account for the hover state and a hover class. This class is applied to elements when they’re being hovered over, using an ingenious little bit of JavaScript (which is explained in this previous dropdown menu tutorial).

Next up, we’re absolutely positioning our nested lists and using the “left” property to move the list to the left-most side. This isn’t moving the list to the left-most side of the screen, but instead the left-most side of its parent positioned element, which in this case happens to be the main unordered list that we positioned right at the start. As such, this trick relies of the whole list being positioned in some manner, even if it’s just relatively positioned and left in place.

The display: inline rule is a little more complicated. So much so, I don’t even completely understand what it’s doing. What I do know is, without that rule, the list items in the submenus simply don’t show up whatsoever in any major browser. I think it has something to do with the fact that the containing elements are floated (which we’ll get to in a bit), but I can’t prove that. If anyone has any better insight into the technical aspect, please let me know in the comments.

Lastly, the width: 100% rule is somewhat important. It’s preventing the unordered list from collapsing down to a smaller size in certain browsers. Specifically, without setting this width specified, the nested list sometimes collapses to the size of its “containing” list item (even though it’s absolutely positioned and therefore technically no longer contained). Note that older versions of Opera don’t deal well with the 100% width… if you want it to work on older versions, you’ll need to specify a width according to a definite size (such as pixels). However, the most recent version of Opera (9.27) handles it fine, and I get the impression that Opera users tend to upgrade more frequently than, say, IE users.

Finally, we just float the elements left (to put them in a nice horizontal row), and give them some colors:

#navbar li:hover li, #navbar li.hover li {
	float: left; }
#navbar li:hover li a, #navbar li.hover li a {
	color: #000; }
#navbar li li a:hover {
	color: #357; }

And that’s it! You can see a working example here. This has been tested and works fine in IE 6+, Firefox 2, Safari (Mac and PC), and Opera 9.27.

The only portion of the mockup I wasn’t quite able to duplicate was a way to keep the primary menu item highlighted when the submenu was in use: because the nested list is absolutely positioned, the browser doesn’t seem to consider them a matched set any longer (except, it seems, in terms of default width). If anyone has a solution to this bit, I would love to hear about it!

Thanks to Andrea for inspiring a hopefully useful tutorial! And if you ever have a CSS-related question that you think might make a good article here, don’t hesitate to send me a message, either via my contact page or on Twitter. I can’t guarantee I’ll use every question posed, but I’ll do what I can as time and situation allow.