Help needed in applying Polaroid styles on Div's list

HTML & CSS
6

I think you will find that if you look at the demo you got those from and add a border then the original demo is jagged also (but will vary from browsers to browser).

It seems that if you remove the border, set a background colour and remove the padding-box settings from .card it will look much better.

e.g.


.card {
	background:#fff;
	width: 350px;
	min-height: 250px;
	padding-: 10px;
	margin: 10px;
	/* border-color:#447294; 
  	border: 1px solid rgb(68, 114, 148);
  	border: 1px solid rgba(68, 114, 148, .1)
  	-webkit-background-clip: padding-box;*/ /* for Safari */
	/*background-clip: padding-box;*/ /* for IE9+, Firefox 4+, Opera, Chrome */
	box-shadow: 0 3px 6px rgba(0,0,0,.25);
	position: relative;
 -webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

A further improvement would be to change the angle of rotation until it looks better as there are some steps that look less jagged than others.

In the end its down to the browser how smooth they render the transforms but make sure you are also using the real css style and not just the prefix because prefix rules will be old and may not be as good.

Also add -webkit-backface-visibility: hidden;backface-visibility: hidden; to rules where you have used transform as that also helps.

Edit:
Actually the backface-visibility:hidden may solve the problem on its own so try that first.

3 Likes