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.
Background Image Transformations. 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. What if you only want to rotate the background image? Or what if you want the background to remain fixed while the element is rotated? Currently, there’s no W3C proposal for background-image transformations.
It would be incredibly useful so I suspect one will appear eventually, but that doesn’t help developers who want to use similar effects today. 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.
Fixing the Background on a Transformed Element. 10 Examples of Beautiful CSS Typography and how they did it... « Web Design Marketing Podcast & Blog. 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. 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.