Components of long shadow icon design

By John Negoita on Monday, June 27th, 2016 in CSS. No Comments

Since iOS 7 by Apple and its UI, flat design has been established as the design style. Of course, design has always been evolving, and there have always been trend-setters and trend-followers. Now the question is “What is the next step from flat design?” Not claiming to have the answer, let’s take a look at a variant of the flat design called long shadow design. What does long shadow design mean, what are its components, how to integrate it in your designs and how you can create your own long shadow designs? I will try to answer all these questions in …


Planetarium CSS solar system animated with CSS animations

By John Negoita on Tuesday, June 14th, 2016 in CSS. No Comments

In this post I will show you how to create a so called planetarium CSS solar system. Basically I will use CSS animations to animate a representation of our solar system. Actually I will only represent the movement of the Moon around the Earth, the rotation of the Earth around its own axis and the revolution of the Earth around the Sun. If you have not used CSS animation so far, I suggest first reading the 5 min CSS animation beginner tutorial and then coming back to this. Planetarium – CSS Solar System FacebookTwitterGoogle+LinkedIn See the Pen CSS Planetarium – solar system with CSS …


AngularJS animation examples Part 1

By John Negoita on Friday, June 10th, 2016 in CSS, Javascript. 2 Comments

Web apps look better with animations. If you want to start off quickly with simple animation just read my 5 min tutorial on CSS animations. In real life however you will probably have to integrate animations in applications a bit more complex like for example an Angular JS application. In this post I will try to show you some AngularJS animation examples. I will use the following tools for building my animation examples: AngularJS – the framework in question AngularJS Animate module – this is the module for animations in Angular; it comes as a separate module that you have to add …


5 min CSS animation beginner tutorial

By John Negoita on Tuesday, June 7th, 2016 in CSS. 2 Comments

In this short post I would like to show you how to create CSS3 animations. For this I will assume that you have some basic knowledge about HTML and CSS. This should not take more than 5 minutes to read and after reading it you should know almost everything you need for creating your own CSS animations. A CSS animation actually takes one or more CSS style attribute value of an HTML element and varies it over time resulting in the element to look like it’s animated. The simplest CSS animation The very basic of CSS animation is done using the transition style …


CSS Tooltips Library Explained

By John Negoita on Monday, July 20th, 2015 in CSS. No Comments

Creating CSS tooltips is not that difficult, you just need to know what you want to achieve, and you need to be aware of some CSS tricks. In this post I will tell you all you need to know for making your own CSS tooltips. What maketh a tooltip A tooltip is usually a text box that only appears when you go with the mouse over an HTML element. The HTML element can be one or more words or even images. The tooltip is meant to provide extra information about a word or words. Tooltips are preferred in some cases because information contained in them …


Simple CSS glossy button

By John Negoita on Monday, July 1st, 2013 in CSS, Web design. 1 Comment

Creating a simple CSS glossy button is quite easy and you only need to know a few CSS tricks. In this post I will show you how to create a glossy button out of an anchor tag using only CSS. At the end of the post you can find the live demo for these glossy buttons. // Newsletter subscription Updates on web development, web design, mobile app development and tech news. You will get an email when new content is published and you can unsubscribe at any time. …