CSS Tools, Resources And Templates:
CSS menus, generators, CSS debuggers, templates and CSS tutorials.


CSS Stopwatch Tutorial

  • Posted By: Jason Taetsch
  • ...

Ever since its creation in 1994, developers have used Cascading Style Sheets or CSS, to dynamically style web elements and HTML documents. With the latest CSS standards, developers can control how an object behaves as well as looks on a web page. The crew over at the CodePlayer have put together this walkthrough for creating a customizable stopwatch solely using CSS keyframe attributes. The walkthrough guides developers through the process of creating a stopwatch capable of being started, stopped and reset all using CSS states.

Streamline Creating CSS Sprites

  • Posted By: Jason Taetsch
  • ...

Sprites allow designers to load one large image and display only a portion of that image at a given time, saving load time by including all the desired images for a webpage into one big graphic that loads at one time.  

While the CSS code gives the designer the tools to display specific portions of the image, Wearekiss.com put together the SpritePad application to streamline the process of creating CSS sprites. SpritePad creates PNG files with the included CSS sprite code, saving designers from the tedious task of slicing the larger image into smaller pieces.

 

 

 

Animated Content Tabs With CSS3

  • Posted By: Jason Taetsch
  • ...

There are a number of methods for displaying content on a webpage from simple static options to complex features like jQuery sliders and carousels. However displaying a large amount of text-laden content on a page poses specific challenges to designers. The team at Tympanus put together this tutorial for designers to build animated content tabs into their design projects entirely with CSS.  The “tab” method is ideal for displaying multiple sections of text without making a page seem too imposing to a casual visitor.

Circle Hover Effects

  • Posted By: Jason Taetsch
  • ...

In this tutorial, the team at Codrops walks you through how to create stylish hover effects for buttons, images and menu items. Learn how to utilize CSS transition attributes to improve the user experience and highlight dynamic sections or items on your webpage. These features can be especially useful on thumbnails and other site features that often lack visual styling devoted to other elements on your webpage.  Both the necessary HTML and CSS are included to help users quickly implement the hover effects on various development projects.

 

Full-Page Animations in CSS

  • Posted By: Jason Taetsch
  • ...

As great as the CSS3 standard is, recent improvements in modern browsers brings even more tools and capabilities to a developer’s toolbox. The team at SitePoint created this tutorial on full-page CSS animations to teach developers how to take advantage of full-page 3D and 2D animations for web content. The CSS transformations and animations attributes allow developers to manipulate the appearance of an entire page’s content for a dynamic and visually impressive user experience. The tutorial covers rotations, changes in perspective and advanced animations.