- AS3-style properties
- Lots of accessor methods
- S3-style scenography
- S-style method chaining
- Support for sprite sheets
Greepit previously shared New Google Interface Buttons in CSS, today we are sharing another awesome CSS Buttons collection for spice up your user interfaces.
OS X Lion was released recently and part of the new design is new icon buttons. Our friends at Pixify recreated OS X Lion’s buttons in CSS for use in your UI.
The guys simply numbered the buttons 1 to 200 and wrote a three-line script to spit out the CSS for each of the 200 buttons.
Google rolled out a new design across many of their services as part of the Google+ launch. The new look presents a sleeker, simplified Google that puts the emphasis on your data and not on the interface.
Part of the design’s success are the new Google buttons. Great UIs tend to have simple, obvious buttons that are standard across the entire application.
Google’s new look features some pretty slick buttons, as seen in Gmail’s new UI.
These buttons are built entirely in CSS, with an image sprite for the highlight buttons. Whatever your preference for buttons is, being consistent and making buttons obvious are imperative. You can easily adjust these to meet your needs or fit your designs.
Plastique Icons is a set of 400+ (and growing) web and application icons inspired by advertising clip art of the 1920′s and 1930′s.
The set is available in vector format and also includes a CSS/PNG sprite version.
Unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables by using PCSS, a php driven server side CSS3 preprocessor.
It allows CSS developers to write CSS code with variables and various shortcuts, while the user still gets standards-complaint CSS code on his side.
Sprite Cow is a visual tool for generating CSS background sprites. Okay, cool! But what is a sprite? I knew those old school designers (still slicing their large images) would ask this question. A sprite is a big block of small images that loads in to the Web browser once and might be used to displays many different images at once or different states of a single image on events like mouse over. The reason is simple – a sprite loads just once and thus sends only one HTTP request opposite to old school sliced images each sending one HTTP request separately.
This CSS background sprites generator saves a lot of designer’s time that get wasted when they copy all the positions and sizes from graphics applications.
OMG TEXT is a compass extension to create awesome 3D text shadows for your websites and web applications.
The OMG TEXT extension provides a mixin with a simple syntax for creating your awesome text shadows. There are three shadow styles for you to choose from, flat, shaded and offset. The flat and shaded styles share the same mixin and the offset style has a mixin of its own.
Do you do single-source-development? By single source development, I mean using the same code base to develop solutions for different platforms. This method of development is usually based on a flexible framework that allows you to use the same code base to publish solutions on various platforms without requiring much changes. If you do not already practise single source development model, start with Skeleton, which is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
Skeleton is built on three core principles:
- Responsive Grid Down To Mobile
- Fast to Start
- Style Agnostic
Skeleton’s base grid is a variation of the 960 grid system. The syntax is simple and it’s effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ.
It comes with multiple themes and the created html forms can be styled easily with CSS.
StackLayout is a flexible width component based CSS layout system. It is proposed as an alternative to the popular grid style layout systems.
The default StackLayout is a ‘fluid’ or ‘liquid’ layout based on percentage widths so you can mockup your design quickly. It provides adequate markup structure and layout hooks so that you can easily refine your design as the project progresses without having to revise your mocked up markup.
display:inline-block with negative letter spacing in a fixed width font (Courier New) in order to achieve a floatless, gridless layout system, the components of which can be nested within each other to produce virtually any layout.