CSS
Get flash to fully experience Pearltrees
How to Keep Your CSS3 Code Markup Slim
Web developers can save a lot of time using more sophisticated CSS3 syntax. Users who visit your page are expecting the fastest possible load time – which makes it your responsibility to keep file sizes down. There are plenty of shorthand tricks with CSS and especially under the new CSS3 model . I have put together a few of these ideas in the guide below. We should also touch upon other areas such as minifying your CSS code.
In today’s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3 . There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won’t work correctly. If your accordion is purely in CSS then it will work for all your visitors. We are going to create a horizontal and vertical content accordion.
How To Create CSS-Based Content Accordion
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation .
A Pure CSS3 Cycling Slideshow
Since the introduction of CSS3, there are really a lot of hot debates revolve around its possibilities and usability. However, there are also a lot of interesting experiments hand-crafted to explore its potential. Though the experiments by any mean do not prove the CSS3′s usability, they really showed the true possibilities of CSS3, to a degree that major developers believe the CSS3 is the future. Is that true? Judge it with your eyes. In this showcase we are gonna show nothing but just 38 inspiring CSS3-based animation demos that purely discover the true potential of the CSS3.
Inspiring CSS3 Animation Demos
create a unique contact form with css3 transitions | PeHaa Blog
Inspired by the contact form on Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover. You may see the demo here. It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more with jQuery to reproduce a similar effect, but it’s not a part of this tutorial.
How to Design a Horizontal Accordion (Plus an Exclusive Freebie!)
Today we’re going to walk through the creation of your very own horizontal accordion together with an exclusive bonus – a light version of the very same accordion we’ll be creating today. Accordion’s are great for showing off your favourite images, posts, or perhaps compacting a product feature tour. If you’re going to add a little pizazz to your accordion, you should take a look at SlideDeck – mega simple to work with. Note: Accordion Layer Setup
