Designers Blog

Archive for May 2012

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;
}

Advertisements

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