.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; transform: translateY(-50%); } Credit
Category: CSS
Helpful Responsive Web Design Links
Converting WordPress to Be Mobile-Friendly Building a Mobile First Responsive WordPress Theme Responsive Design in 3 Steps How to Turn Any Site Into a Responsive Site Choosing Fonts for Your Mobile Website Super useful jQuery plugins for responsive web design Especially: Tinynav.js and jQuery Masonry
CSS “content” property
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it’s called a pseudo element because it’s not actually selecting anything that exists on the page but adding something new to the page. This is what… Continue reading CSS “content” property
Caption
.wp-caption { text-align: center; border: 1px solid #625B54; margin: 15px 10px 10px; padding: 5px 1px 0; } .wp-caption img { border: 0 none; margin-bottom: 5px; padding: 0; } .wp-caption p.wp-caption-text { font-size: 85%; line-height: 17px; margin: 0; padding: 0 4px 4px; }
CSS3 Border Radius
-webkit-border-radius: 5px 5px; -moz-border-radius: 5px 5px; border-radius: 5px 5px;
CSS3 Hover Opacity
a img.feed { border: none; opacity: 1.0; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=100)"; filter: alpha(opacity = 100); -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } a:hover img.feed, a:focus img.feed { opacity: 0.70; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=70)"; filter: alpha(opacity = 70); }