Design your way

Tuesday, January 13, 2015

The code demos and experiments that you see now on Codepen and you say that are outrageous and nobody will use them are the ones that will be used in the near future in a lot of web projects.


These may be interesting showcases of the outer limits of what you can achieve with CSS and you may think that these can be made only by top web designers, but the truth is that they are all made of code, code that you can learn and that you can replicate, modify and create new things that can look even better.


In this article I featured some of these impressive CSS demos and experiments and the code snippets behind them so that other designers can learn and adopt them in their projects or prepare for what is modern right now and what will be common sense in the world of web design in a year or maybe two.


I’m saying in a year or two because the industry in which we operate moves at an accelerated pace and things that we didn’t think were possible two years ago are now being made even by newbie designers with the help of CSS, SVG and Javascript, individually or all combined.


Enjoy these beautiful and intriguing demos and experiments, and even if some of them work only in Chrome, take a look at them and remember the techniques used cause there won’t be much longer until the other browsers accept the technologies behind these code effects.


Responsive Mail UI


Responsive Mail UI


Pull Menu – Menu Interaction Concept


Pull Menu - Menu Interaction Concept


RubiCSS cube


RubiCSS cube


SVG Loading icons


SVG Loading icons


SVG Preloaders


SVG Preloaders


CSS Stop Watch


CSS Stop Watch


CSS3 animated weather icons


CSS3 animated weather icons


Knob rotation


Knob rotation


Blurred Background CSS


Blurred Background CSS


HTML5 progress bars with CSS3 animations


HTML5 progress bars with CSS3 animations


Apple zoom out effect


Apple zoom out effect


Material design morphing icons


Material design morphing icons


Full-page Animation


Full-page Animation


Lights out svg icon


Lights out svg icon


CSS-only Weather App Concept


CSS-only Weather App Concept


Less loaders


Less loaders


A simple nav that expands on click


A simple nav that expands on click


3D CSS Typography


3D CSS Typography


Rabbit


Rabbit


3D Paper button effects


3D Paper button effects


CSS3 Animation Loop


CSS3 Animation Loop


Pure CSS3 Drop-down Navigation with Effects


Pure CSS3 Drop-down Navigation with Effects


Media Query Mario


Media Query Mario


Minimal Throbbers


Minimal Throbbers


Pure CSS One Div Weather Animated Icons


Pure CSS One Div Weather Animated Icons


Pure CSS Parallax Scrolling


Pure CSS Parallax Scrolling


[CSS3] Animated Buttons


[CSS3] Animated Buttons


Modal window destroy concept


Modal window destroy concept


Firewatch Parallax in CSS


Firewatch Parallax in CSS








Source: http://ift.tt/1C22ChV

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading