- This topic is empty.
-
AuthorPosts
-
September 23, 2012 at 7:39 am #39963Historical Forums UserParticipant
Hi everyone
I’m trying to create an HTML[5] and CSS[3] pricing table that hasrounded corners, fills and so forth, but getting myself in all sorts of knots.
The table is:
Chose your
productStandard Pro Maxx 10$
per month20$
per month35$
per monthSpace amount 10GB 20GB 45GB Bandwidth 100GB 200GB 600GB eMail accounts 3 5 20 MySQL databases 1 2 10 Custom domains no no yes Support Basic Standard Premium The current CSS is:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
background: none;
}table {
margin: auto;
padding: 0;
width: 70%;
color: #4e4e4e;
border-spacing: 0;
border: 1px solid #474747;
background:#e2e2e2;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}th, tr{
text-align: center;
}td,th {
border-left: 1px solid #474747;
}td:first-child,th:first-child {
border-left:none;
}thead tr:nth-child(2) th:first-child{
border-left: 1px solid #474747;
}thead {
padding: 0em;
background: #cdc;
color: #fff;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
border: 1px solid #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}th {
font-size: 0.9em;
font-weight: normal;
}th.rowhead{
text-align: left;
font-size: 1.2em;
}th.bighead {
font-size: 1.6em;
}th>span {
font-size: 4em;
}button {
width: 10em;
height: 3em;
margin: 1em;
padding: 0;
border: 1px solid #9e9e9e;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
background: #cdcdcd;
background-image: -moz-linear-gradient(top, #f0f0f0, #cdcdcd);
background-image: linear-gradient(top, #f0f0f0, #cdcdcd);
}Now what I am trying to achieve is based on:
http://shegystudio.deviantart.com/art/Pricing-table-206742296
Any hints and tips for me?
thanks
Ady
September 23, 2012 at 1:38 pm #110625Paulie_DMemberIf you review Chris’ video on table styling it will give you hook into the various elements that make up a table.
I found it immensely useful.
By using common classes you can style individual corners.
Here’s my quick and dirty start: http://codepen.io/Paulie-D/pen/AJvnk
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.