Designers Blog

Add your thoughts here… (optional)

This is where we say, user experience comes first than aesthetics.

The cut corners box requirement came in the one of the folio3 project when they need a Patch Panel (flexible) with 3D feel (Consistent with other icons) , So I used the technique to use Pseudo element  :after , Please check the attached snapshot I made using CSS3 in this project (CutCorners.jpg) , Below is the code…

HTML Code
<div class=”cut-corner”>&nbsp;</div>

CSS Code:.cut-corner{
position:relative;
background-color:#ffbb00;
height:123px;
width:400px;
margin:auto;
}
.cut-corner:after{

position:absolute;
top:0px; left:0px;
content:”.”;
text-indent:-999px; overflow:hidden;
width:0px; height:0px;
border-top: 20px solid white;
border-right: 20px solid transparent;
}

Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design.

 

Read more here…

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

Life and nature are one big transition. The sun slowly rises to mark a new day and then slowly sets to mark the end of the day and the beginning of night. We are created in the womb and from small cells we grow, are born and gradually age until we die.

Guys,

We are in a process of redesigning our F3GD blog. Please Feel free to give your valuable suggestions  for look & Feel of our blog.

Looking forward for your suggestions.

Thanks

GDF3 Team

Tags: , ,