I am bit new to CSS/bootstrap style programming.
I am trying to create a cards list, please refer the link which I have created to show the lists. Now I wanted to apply some Polaroid UI styles which would tilt/rotate the required objects randomly (please refer link which I am referring to http://zurb.com/playground/css3-polaroids). My requirement is to generate the list with the combination of both the styles. I tried applying the Polaroid styles on top of the Div’s List which I have generated but it doesn’t apply correctly and it is not generating the required output.
Can somebody help me in achieving this? what is it I am missing here?
your css doesn’t match your html structure (I’m assuming you just copied the css in)
You need to change your ul declaration to
<ul class="polaroids">
then in your css, you’ll need to change the a selector that is a child of ul.polaroids to .class. For example
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
needs to be
ul.polaroids .card {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
That’ll start you off - you’ll need to tweak it to get it clean, but it’s a start.
1 Like
I did the following specified changes in HTML.
<ul class="polaroid">
<li class="card">
</li>
<ul>
Also in the CSS as specified. Please find my latest changes in the link
Please let me know what else need to be done?
The class is polaroids with an s,
<ul class="polaroids">
The element with class .card is the list so you need to target the list item not a descendant called card.
e.g. you have this:
ul.polaroids li:nth-child(even) .card {
It should be this:
ul.polaroids li.card:nth-child(even) {
The class is probably superfluous so you could probably get away with this:
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) .card {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) {
position: relative;
top: 3px;
left: -5px;
}
When using prefix rules then you should follow with the valid css rule otherwise you cut out all other browsers when support arrives. You only seem to be targeting moz and webkit.
e.g. It should be:
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
}
As transforms are currently supported by all major browsers it may be time to drop prefixes there anyway.
As an added aside this is bad:
h1{
font-weight: medium;
margin-left: 60px;
margin-top: -65px;
color:#000000
}
Setting a negative margin globally for all h1s is unlikely to be what you want. Even though html5 allows more than one h1 there are very few cases where its a good idea and those items should not reall be h1s but a heading at some other level.
Also margin-top:-65px smells of magic numbers and should be avoided. Instead of trying to drag the h1 upwards to sit beside the icon you should arrange for the items to be aligned horizontally from the start with automatic alignment. This can be done in a number of ways (inline- block or flex box or many other ways). Always try to jeep things automatic and simple. If for example you changed the size of the icon then the margin on the h1 would be wrong. If instead you have used inline-block to automatically align the items then you don’t need to change anything if the icon or text changes.
3 Likes
Thanks for your detailed reply and it is very much helpful. The functionality works fine. I have 1 small issue i.e. the border lines in the boxes around Div are jagged. How do I avoid this and I want to have straight lines to draw the boxes.
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
Thanks for your reply, the suggestions given by you worked like a charm 
. It works as per the requirement.
I have a small issue, i tried fixing it but nothing worked out. Please let me know if you have solutions.
When there is large text content placed under <p> tag, this makes the card to move to top compared with other adjacent cards in the same horizontal line. Please refer the snapshot where you can notice cards 1 & 3 have slightly huge content in <p> tag and it has moved to top position.
This issue is replicated in the URL
Any Ideas how to maintain consistency with respect to top position on any given horizontal line?
Try assigning {vertical-align:top} to the list items and see if that helps.
2 Likes
I applied this property in the card css class as below,
.card{
vertical-align:top;
...
}
It works fine in the JSfiddle but doesn’t have any impact when I implement it in my actual project. any guess what could be the reasons?
Note: I am using Chrome browser.
My guess is that you have other code in your project that is influencing the alignment of the li boxes.
If you can provide a link to your site, I/we may be able to help.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.