10 Examples of Beautiful CSS Typography and how they did it...

Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS. Think about how difficult sIFR or images get when you want to replicate that typography or typeface over 100 pages powered by a CMS. If you can get beautiful type via CSS it makes this situation very easy and with out compromise. There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. 1. Coudal Partners small headline Larger Headline You may be surprised to find out that the serif font used is… *gasp* times new roman! 2 + 3. Human Sexuality and the Nuptial Mystery Headline Example 3. Seed Conference On Friday, June the 6th 2008 4. 5. 6. 7.

Creating a CSS layout from scratch - Subcide Below is the design we will be using as the basis of this tutorial. Our mission is to slice this puppy up using nothing but XHTML, CSS, and a few images: First we need to identify the main structural elements of the design, so that we know how to structure our HTML document. The web is very heavily based around rectangles, and we need to remember that when dividing up our design. The diagram below shows how we will divide the design. We have identified 5 major elements: Main Navigation The primary navigation for this website. This site will also be centered in the browser window. « Previous123456789101112Next » Commenting is not available in this weblog entry.

CSS examples Using CSS to Do Anything: 50+ Creative Examples and Tutorials Apr 21 2008 CSS can powerfully open the doors to a lot of rich and unique techniques. Today we are presenting a round-up of CSS coding, creative approaches and techniques. Definitely worth taking a very close look at! We also included some basic techniques you can probably use in every project you are developing. This is just the third article in this series , the forth part will be coming soon, stay tuned and Enjoy! You can also take a look at other 2 articles in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series. Styling Lists The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own! Live DemoView it Here Forms and Form Elements Footers New ideas for Image Replacement Image Sprite CSS image techniques Navigation Drop Caps

How to Apply CSS3 Transformations to Background Images Scaling, skewing and rotating any element is possible with the CSS3 transform property. It’s supported in all modern browsers (with vendor prefixes) and degrades gracefully, e.g. Great stuff. However, this rotates the whole element — it’s content, border and background image. Currently, there’s no W3C proposal for background-image transformations. Fortunately, there is a solution. View the demonstration page… Transforming the Background Only The container element can have any styles applied but it must be set to position: relative since our pseudo element will be positioned within it. We can now create an absolutely-positioned pseudo element with a transformed background. Note you may need to adjust the pseudo element’s width, height and position. Fixing the Background on a Transformed Element All transforms on the parent container are applied to pseudo elements. Again, you will need to adjust the size and position to ensure the background covers the parent container adequately.

Twenty Advanced CSS Tutorials The following collection focuses on advanced CSS tutorials to help you sharpen your CSS skills. Once you’ve recreated these tutorials on your own, you can use and re-use the resulting files and keep them in your personal toolkit for future reference. We avoided tutorials that used combinations of CSS and jQuery to focus entirely on CSS development tricks. jQuery is a powerful tool, but if you want to learn pure CSS, then these advanced tutorials are a great place to start. Topics range from sliders, accordions, forms, layouts, to even image transitions. Stylish Image Content Slider in Pure CSS3 Source Horizontal Accordion Slider with Vertical Text Source How to Create CSS3 Borders – CSS3 Handy Techniques Source The Definitive Guide to CSS Animations and Transitions Source Learn How To Create Drop Cap Letters In CSS Source CSS3 Hover Tabs without JavaScript Source Creating Intrinsic Ratios for Video (Resizeable Videos) Source CSS3 animated dropdown menu Source Create Pulse Effect With CSS3 Animation