How to vertically and horizontally center text in an unordered list or div Congratulations if you've managed to find this tutorial! I've been trying to increase awareness and publicity to this tutorial by going to other tutorials and leaving comments but I'm finding the authors take a competitive edge and do not approve my link to this page. If you find this helpful then please promote it by using the social links further down the page. This should hopefully increase my chances to be found in Google. The following example shows you how to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights. If you simply wish for it to work in a div, remove the list items around it (the code will still work). UPDATE, the code has been altered slightly as of 29/9/2011 to make it easier to work with. Alternatively, you can download the zip here. Like It? Need help with this article? Have you got a suggestion, compliment or need additional help with this article?
Accessible star rating widget with pure CSS For ages, we couldn’t utilize the sibling combinators (~ and +) to ease the pain of creating star rating widgets, because of this stupid Webkit bug. Nowadays, not only it’s fixed, but the fix has already propagated to Chrome and Safari 5.1. So, we can at least use the sibling combinator to make coloring the stars easier. But can we use no JavaScript for a rating widget and make it just with CSS? Actually, we can. Of course, you’d still need JS to attach an event handler if you want the votes to be registered through AJAX, but that’s not part of the rating widget per se (it could still work as part of a regular form). What’s best is that it’s fully keyboard accessible (focus and then use keyboard arrows) and screen reader accessible (although VoiceOver will also pronounce the generated stars, but that won’t happen if you use images instead of unicode stars). So, here it is:
How To Create Depth And Nice 3D Ribbons Only Using CSS3 In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites. In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills. Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. DesignM.ag Blogof.FrancescoMugnai.com Yoast.com From-The-Couch.com Wait, wait, wait. Sure? We Want to Make 3D Elements Without Images There are some properties of the CSS3 languages that can help us to accomplish this mission. background: rgba(196,89,30,0.65); How To Make a CSS Based 3D Layout <!