Typeplate » A typographic starter kit encouraging great type on the Web. 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. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including IE9, IE8, IE7, IE6, Firefox, Chrome, Opera and Safari.
If you simply wish for it to work in a div, remove the list items around it (the code will still work). Alternatively, you can download the zip here. Like It?
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. By adapting Ryan Seddon’s technique for custom radio buttons with CSS, we can turn a series of radio buttons into stars that change colors (for the purposes of this demo they’re just unicode characters that change colors, but in your case they may as well be images) and use the sibling combinator to color the previous stars. A series of radio buttons is what many people use as a star rating widget fallback anyway, so the markup required is not necessarily more than usual. 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. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs.
DesignM.ag Blogof.FrancescoMugnai.com Yoast.com From-The-Couch.com Wait, wait, wait. Sure? We Want to Make 3D Elements Without Images background: rgba(196,89,30,0.65); CSS3 gradients - Adobe - The Expressive Web - Beta.