{"id":93,"date":"2010-12-13T21:57:51","date_gmt":"2010-12-14T02:57:51","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T21:57:51","modified_gmt":"2010-12-14T02:57:51","slug":"people-archive","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/fin\/people-archive\/","title":{"rendered":"PEOPLE.com Photo Archive"},"content":{"rendered":"\n<p><a href=\"..\/..\/wp-content\/themes\/practicalcss3\/classic.html\">The initial page<\/a> works perfectly fine as it is.  I chose it, however, because the design called for several features that are doable via pure CSS, but are effects that we have traditionally done via images, including:<\/p>\n<ul>\n<li>background gradient<\/li>\n<li>border-radius<\/li>\n<li>box-shadow<\/li>\n<\/ul>\n<p><a href=\"..\/..\/wp-content\/themes\/practicalcss3\/css3.html\">Using CSS3, CSS3 PIE, and IE Filters<\/a>, I was able to remove <strong>all<\/strong> design images within the main content area.<\/p>\n<h2>Samples from Practical CSS3-ified CSS<\/h2>\n<pre>\n.archive .more a .plus{float:left;width:14px;height:14px;margin-left:3px;padding-top:1px;background:#8c8c8c;color:#fff;font-family:'Trebuchet MS',sans-serif;font-size:16px;line-height:11px;text-align:center;\n\tborder-radius: 3px;\n\t-moz-border-radius: 3px;\n\t-webkit-border-radius: 3px;\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n}\n.archive #leftColumns .wrapper{float:left;width:994px;\n\tbackground:#151515;\n\tbackground:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717), color-stop(.15,#2f2f2f));\n\tbackground:-moz-linear-gradient(0% 0% 270deg, #0D0D0D, #2F2F2F, #171717 70%);\n\t-pie-background:linear-gradient(0% 0% 270deg, #0D0D0D, #2F2F2F, #171717 70%);\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n}\n.archive #leftColumn{float:left;display:inline;overflow:hidden;width:177px;margin-top:13px;padding:26px 0 186px;position:relative;z-index:2;background:#262626;border:1px solid #454545;border-left:0;\n\tbox-shadow: 3px 0 10px #000;\n\t-moz-box-shadow: 3px 0 10px #000;\n\t-webkit-box-shadow: 3px 0 10px #000;\n\tborder-radius: 0 12px 12px 0;\n\t-moz-border-radius: 0 12px 12px 0;\n\t-webkit-border-top-right-radius: 12px;\n\t-webkit-border-bottom-right-radius: 12px;\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n}\n.archive #middleColumn .col .imgcont a img{border:1px solid #fff;\n\tbox-shadow: 3px 4px 0 #E3E1E1, 6px 8px 0 #adadad;\n\t-moz-box-shadow: 3px 4px 0 #E3E1E1, 6px 8px 0 #adadad;\n\t-webkit-box-shadow: 3px 4px 0 #E3E1E1, 6px 8px 0 #adadad;\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.DropShadow(color='#E3E1E1',offX='3',offY='4')\", \"progid:DXImageTransform.Microsoft.DropShadow(color='#adadad',offX='6',offY='8')\";\n\tfilter: progid:DXImageTransform.Microsoft.DropShadow(color='#E3E1E1',offX='3',offY='4',positive='true'), progid:DXImageTransform.Microsoft.DropShadow(color='#adadad',offX='6',offY='8',positive='true');\n}\n.archive #middleColumn .col .imgcont a:hover img{border-color:#FDF89B;\n\tbox-shadow: 3px 4px 0 #E3DA5A, 6px 8px 0 #ADA845;\n\t-moz-box-shadow: 3px 4px 0 #E3DA5A, 6px 8px 0 #ADA845;\n\t-webkit-box-shadow: 3px 4px 0 #E3DA5A, 6px 8px 0 #ADA845;\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.DropShadow(color='#E3DA5A',offX='3',offY='4')\", \"progid:DXImageTransform.Microsoft.DropShadow(color='#ADA845',offX='6',offY='8')\";\n\tfilter: progid:DXImageTransform.Microsoft.DropShadow(color='#E3DA5A',offX='3',offY='4',positive='true'),positive='true'), progid:DXImageTransform.Microsoft.DropShadow(color='#ADA845',offX='6',offY='8',positive='true');\n}\n.archive .modal{position:absolute;top:-9999px;left:-9999px;z-index:3;padding:9px;width:498px;height:504px;\n\tborder-radius:20px;\n\t-moz-border-radius:20px;\n\t-webkit-border-radius:20px;\n\tbackground:rgba(207,207,207,.25);\n\t-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3FCFCFCF,endColorstr=#3FCFCFCF);\n\tfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3FCFCFCF,endColorstr=#3FCFCFCF);\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n\tzoom:1;\n}\n.archive .modal h3{float:left;padding:0 0 0 15px;width:483px;font-size:17px;line-height:38px;font-weight:bold;color:#f1fcff;text-transform:uppercase;\n\tborder-radius:10px 10px 0 0;\n\t-moz-border-radius:10px 10px 0 0;\n\t-webkit-border-radius:10px 10px 0 0;\n\tbackground:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ED1B23), to(#BF161C), color-stop(.55,#ED1B23));\n\tbackground:-moz-linear-gradient(0% 0% 270deg, #ED1B23, #ED1B23 55%, #BF161C 55%, #BF161C 100%);\n\t-pie-background:linear-gradient(0% 0% 270deg, #ED1B23, #ED1B23 55%, #BF161C 55%, #BF161C 100%);\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n\tzoom:1;\n}\n.archive .modal .close{position:absolute;top:18px;right:24px;width:64px;font-weight:bold;font-size:10px;line-height:17px;color:#fff;text-transform:uppercase;text-decoration:none;\n\tborder-radius:10px;\n\t-moz-border-radius:10px;\n\t-webkit-border-radius:10px;\n\tbackground:#D17D80;\n\tbackground:rgba(190,190,190,0.6);\n\tbox-shadow:-2px 3px 3px rgba(100,100,100,0.3);\n\t-moz-box-shadow:-2px 3px 3px rgba(100,100,100,0.3);\n\t-webkit-box-shadow:-2px 3px 3px rgba(100,100,100,0.3);\n\ttext-shadow:0 0 2px #fff;\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n\tzoom:1;\n}\n.archive .modal .close span{float:left;margin-right:4px;width:14px;line-height:14px;font-family:Verdana,Tahoma,sans-serif;text-align:center;border:2px solid #fff;\n\tbox-shadow:0 0 6px rgba(0,0,0,.3);\n\t-moz-box-shadow:0 0 6px rgba(0,0,0,.3);\n\t-webkit-box-shadow:0 0 6px rgba(0,0,0,.3);\n\tborder-radius:10px;\n\t-moz-border-radius:10px;\n\t-webkit-border-radius:10px;\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n\tzoom:1;\n}\n.archive .modal .content{clear:both;float:left;border-width:30px 15px 15px;border-style:solid;border-color:#2C2B2B;width:468px;height:422px;overflow:hidden;overflow-y:auto;background:#2C2B2B;\n\tborder-radius:0 0 10px 10px;\n\t-moz-border-radius:0 0 10px 10px;\n\t-webkit-border-radius:0 0 10px 10px;\n\tbehavior: url('..\/..\/wp-content\/themes\/practicalcss3\/css3-pie.htc');\n\tzoom:1;\n}\n\t\t\t\t<\/pre>\n<h2>The Results<\/h2>\n<p>Average after 5 loads with cleared cache and no ads:<\/p>\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" summary=\"Results of page-load tests\">\n<thead>\n<tr>\n<th>&nbsp;<\/th>\n<th>Requests<\/th>\n<th>Kb<\/th>\n<th>Seconds<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>Before<\/th>\n<td>48<\/td>\n<td>418.1<\/td>\n<td>2.84<\/td>\n<\/tr>\n<tr>\n<th>After<\/th>\n<td>42<\/td>\n<td>390.2<\/td>\n<td>2.45<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Obviously no huge savings anywhere in the results, thanks to the efficiency of the initial code, but if those numbers are multiplied by the 30-40k times that page is viewed each month, it could be meaningful.  Additionally, if we were asked to, say, change the color of the drop-shadow effect on each of the images, it would be a simple CSS change as opposed to finding the sprite PSD, making the changes, then waiting for the image to clear cache on Akamai.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The initial page works perfectly fine as it is. I chose it, however, because the design called for several features that are doable via pure CSS, but are effects that we have traditionally done via images, including: background gradient border-radius &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/fin\/people-archive\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":14,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/93\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/14"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}