Category Archives: CSS

New CSS Plugins to Utilize in 2013

2013 will bring about many changes – and the coding world will have theirs as well. Make your life easier with this list of CSS Plugins to Utilize in 2013:

Sinuous Buttons Kit
1. Sinuous Buttons Kit

Any designer or developer looking for an amazing set of buttons should look no further than the Sinuous Simple Buttons Kit. This kit comes equipped with a variety of buttons that provide a clean look to any website while being relatively simple to use and even simpler to modify. These buttons also come with Font Awesome, a variety of excellent icon fonts made for Twitter Bootstrap. With plenty of colors, icons at sizes to choose from, developers can expect to achieve a great amount of versatility and customization out of this kit.

Bootstrap Pure CSS

2. Bootstrap & Non-Bootstrap Animated Responsive Pricing Table – Pure Css

Another new CSS plug-in that works well with just about any website is the Bootstrap & Non-Bootstrap Animated Responsive Pricing Table. This plug-in offers a responsive and professionally designed pricing table that offers a high level of customization. This plug-in is available in three distinct styles, two color schemes and up to 16 columns. The Bootstrap & Non-Bootstrap Animated Responsive Pricing Table offers a creative yet minimal solution that enjoys cross browser support. Best of all, this plug-in rely solely on text, which means that developers don’t have to deal with creating or hosting images.

CSS3 Filter Items

3. CSS3 Filter Items

This recently introduced plug-in offers the ability to filter items according to categories, making it an ideal choice for image lists, portfolios and basically anything else that can be divided into categories. Created from pure CSS with CSS3 animations, this plug-in features 10 preset styles to help it blend in with just about any website scheme. Users can also take advantage of the hover effects included with this exceptional CSS plug-in. CSS3 Filter Items feature plenty of documentation for designers and developers.

Advance Hover Effects

4. Advance Hover Effects

Sometimes, websites need special visual effects that go well beyond what you would normally find. Fortunately, all it takes is a little HTML5 and plenty of CSS3 to get the job done. Advance Hover Effects is proof positive of how powerful these two languages can be when it comes to developing amazing hover effects. This pack features an amazing number of effects and transitions, with shades that are drawn purely from CSS3. Advance Hover Effects are compatible with Internet Explorer 9 and up, as well as Firefox, Safari, Opera and Google Chrome. However, the animations included in this plug-in pack will not work with Google Chrome or Opera.

App Store Buttons 3D

5. App Store Buttons 3D

Here’s another new CSS3 plug-in that deserves a bit of consideration. App Store Buttons 3D offers a variety of attractive and useful App Store buttons that are easily customizable and feature both normal and active effects. Three color schemes are available for customization’s sake, although skilled designers can dive deep into the CSS3 code to create their own stunning variations. Designers will also appreciate the availability of PSD files for even more possibilities when it comes to customization. Each button measures 200px in width and 40px in height.

Simple CSS3 Navigation

6. Simple CSS3 Navigation

Just as it says on the box, Simple CSS3 Navigation offers a simple and visually clean navigation menu for a wide variety of websites. Rendered in pure CSS3, this clean and modern design comes available in two color schemes. Unlimited menu levels mean that developers can go as deep as they want when it comes to adding links. With CSS3, users can also enjoy a spectacular slide effect that gives this simple navigation tool plenty of sophistication. The best thing about Simple CSS3 Navigation is that it is amazingly easy to use. Other features include cross browser compatibility and detailed documentation.

Ribbon Wrap - CSS3 Hover Animation

7. Ribbon Wrap – CSS3 Hover Animation

Once upon a time, CSS ribbons were unable to be animated, relegating their purpose to the elements that looked pretty but didn’t do much of anything. The introduction of Ribbon Wrap puts a new spin on this CSS element – thanks to this plug-in, CSS ribbons can finally move. Once implemented, users simply hover over the element, allowing the ribbon to slide out from behind and wrap around the element in question. This simple yet sophisticated animation is not only easy to implement, but it is also totally reliant on CSS3. This means that you don’t have to worry about implementing any cumbersome JavaScript or jQuery code into your existing website – everything is done with CSS3.

CSS3 Icon Buttons

8. CSS3 Icon Buttons

CSS3 Icon Buttons make an excellent addition to just about any website. With extraordinarily simple HTML markup, you only need a couple of lines of code in order to place your button. These icon buttons come in both light and dark variations. There are 70 icons in all for each button theme. Designers and developers who are looking for a practical and versatile solution should take a look at these CSS3 Icon Buttons.

CSS3 Social Slideout Tabs

9. CSS3 Social Slideout Tabs

CSS3 Social Slideout Tabs are another recent addition that proves extraordinarily useful on blogs, websites and content management systems. These tabs consist of a simple UL list of social media icons using CSS and CSS3. Once installed, users can simply hover the social media icon of their choosing to reveal the name of the icon as well as other pertinent information. Not only do you have over 20 social media icons at your disposal, you can also choose to use your own. CSS3 Social Slideout Tabs are compatible with all browsers, but older browsers may have some difficulty handling the CSS3 features included with these tabs.

CSS3 Navigation Menu

10. CSS3 Navigation Menu

Here is another navigation menu that offers minimalist looks, plenty of extendibility and simple integration into existing websites. The minimalistic CSS3 Navigation Menu offers a variety of excellent features, including exceptionally detailed transitions, unlimited menu levels and compatibility with all common browsers. Its overall design is not only exceptionally clean, but it is also easy to customize to your specifications. The CSS3 Navigation Menu rely solely on CSS3 – you don’t have to worry about implementing JavaScript, jQuery or images just to use this plug-in.

Promo - Email Theme For Wysija WP Newsletter Plugin

11. Promo: Email Theme For Wysija WP Newsletter Plugin

Ever wondered if there was a simple plug-in that allowed you to send newsletters from WordPress? Email Theme For Wysija WP Newsletter Plugin from Gifky does just that and much more. This plug-in also allows you to drag and drop articles and images straight into your newsletter as well as track how many people open and click links located within the newsletter. Three color themes are available for expensive customization, plus there is a full layered PSD file available for even further customization.

CSS3 Overlay Hover Effects Vol1

12. CSS3 Overlay Hover Effects Vol:1

Overlay hover effects are extraordinarily popular on many websites, thanks to their attractive style and the energy they add to an otherwise static webpage. Now you can create your own hover effects thanks to this plug-in. There are nearly 90 overlay hover effects available, each one featuring a vast level of customization to meet any creative need. With an easy-to-edit CSS3 file, you can add your own color options and font styles into the equation.

Bold CSS3 Navigation

13. Bold CSS3 Navigation

Another new and interesting CSS3 navigation menu is Bold CSS3 Navigation, one that combines modern looks with excellent modern typography to create a one-of-a-kind look that works with a wide variety of webpages. This navigation menu is available in both vertical and horizontal forms. There also eight color schemes to choose from, each one designed to make the navigation menu “pop” and stand out from the rest of the page. Of course, it is also easy to modify if need be. Thanks to the use of semantic markup featuring clean and commented code, Bold CSS3 Navigation is extraordinarily easy to use and simple to edit.

Modern News - Email Theme For Wysija Plugin

14. Modern News: Email Theme For Wysija Plugin

Modern News is an e-mail template theme that is intended for use with the Wysija newsletter plug-in for WordPress. This theme comes available in four distinct color schemes. It is also packaged with a full layered PSD file to provide designers with plenty of leeway when it comes to customization.

Modern CSS3 Navigation

15. Modern CSS3 Navigation

Modern CSS3 Navigation is yet another navigation menu that relies solely on CSS3. This particular navigation menu offers a soft and modern look that can be easily changed to suit any taste, thanks to the clean and commented code. Those who are not particularly adept at digging into CSS3 code can simply use one of the three available color schemes that are included in this plug-in. With a smooth CSS3-enabled fade and slide effect, unlimited menu levels and compatibility with all browsers, Modern CSS3 Navigation is the ideal navigation menu for developers and designers to use.

Best CSS Plugins – Most popular CSS plugins of 2012

CSS3 Mega Drop Down Menu - CSS Plugin
1. CSS3 Mega Drop Down Menu

Considered one of the best CSS plugins, the CSS3 Mega Drop Down Menu features a literal avalanche of useful features that are always welcome on just about any website. Easily customizable and responsive, this mega menu comes available in horizontal, vertical left and vertical right aligned versions with nine colors to choose from. Developers can organize and display contents in up to six columns. Other features include an AJAX contact form, cross browser support and a complete typography set for greater customization.

CSS3 Web Pricing Tables Plugin
2. CSS3 Web Pricing Tables Pack (Grids)

CSS3 Web Pricing Tables Pack features colorful and dynamic Web pricing tables created in pure CSS and HTML. There are two table styles available with 20 predefined color versions that offer a wide variety of unique features. Developers have the ability to add hover states, custom ribbons and table cell tooltips. There is also a version of the CSS3 Web Pricing Tables Pack available for WordPress blogs.

CSS Plugin - The Tooltip
3. The Tooltip

The Tooltip is a simple yet powerful CSS3 plugin that appears whenever users hover over a container or any other web element. There are six positions and 12 color schemes available, giving developers a wide berth when it comes to customization. This plug-in also degrades gracefully when viewed in older browsers. It even comes with a LESS file that allows you to create custom color schemes and even create a compact version of this plug-in. LESS users can even integrate the Tooltip into their stylesheets.

Pure CSS3 Sticky Footer Plugin
4. Pure CSS3 Sticky Footer

Sticky footers are a recent addition to the many elements used on the average website, giving viewers a convenient and unobtrusive way to view important information. Pure CSS3 Sticky Footer is exactly what it says on the tin, offering a sticky footer created purely from CSS. There is no JavaScript coding to worry about, making this plug-in spectacularly easy to integrate. CSS coding makes it just as easy to customize. Pure CSS3 Sticky Footer also features plenty of CSS3 enhancements for compatible browsers. This plug-in comes in “dark” and “glass” styles, with full width and centered variations featuring up to three columns in a grid-based layout.

CSS3 Form Pack Plugin
5. CSS3 Form Pack

Another useful plug-in that relies on CSS3 is the CSS3 Form Pack, providing developers with a wide array of form styles that offer plenty of visual appeal as well as plenty of functionality. This pack consists of several form styles that are commonly used in websites: login forms, search forms and contact forms, as well as other form styles. The styles are available in light and dark colored variations with focus and validation error styles defined within the CSS. The general form features styles for text boxes, text areas, radio buttons and checkboxes. The only images the CSS3 Form Pack uses are icons. The CSS3 Form Pack is compatible with all browsers that feature CSS3 functionality.

CSS Ultimate Menus
6. CSS Ultimate Menus

If you want sophisticated and slick menus created from pure Cascading Style Sheets (CSS), CSS Ultimate Menus may be exactly what you’ve been looking for. This powerful menu solution offers three different drop-down styles: multicolumn view, product view and single column view. It also features different classes for different levels, making for a wide range of customization possibilities. Not only does it offer support for multiple browsers, but it even includes a PSD file for designers and developers.

CSS Menu Plugin with Notification Bubbles
7. Menu with CSS3 Effects and Notification Bubbles

Menu with CSS3 Effects and Notification Bubbles provides exactly what developers need when fleshing out any website. This plug-in features several different components that come together to create a very powerful solution that offers a great amount of versatility and utility. At its core is a CSS menu that offers unlimited levels created in pure CSS code. Features include a fade and slide effect rendered in CSS3, animated notification bubbles and a mega menu. JQuery support is also available for older browsers. This plug-in is available in three different sizes with three different menu styles, along with plenty of documentation.

Responsive CSS Pricing Tables
8. Responsive CSS3 Pricing Tables

Responsive CSS3 Pricing Tables feature unique styles that offer plenty of variety along with sheer simplicity. Users get to interact with logically ordered and cleanly designed pricing tables that stand out whenever selected. These tables use pure CSS and HTML, which makes images unnecessary. There are 12 color variations available in both light and dark styles, giving developers the ability to choose a style that closely matches their website’s current color scheme. Although these pricing tables are meant to work with CSS3-enabled browsers, they degrade nicely in older browsers. Included are full layered PSD files that offer an infinite amount of customization.

CSS Notification Boxes
9. Notification Boxes

Notification boxes provide useful alerts, warnings and other information to users. This plug-in provides five templates (error, success, warning, tip and neutral) that can be used on virtually any website, from online shopping stores to backend interfaces and other areas where having notification is especially important. The vivid colors make these notifications stand out while the soft gradients lends a professional, yet soft touch that is appreciated by both users and developers alike. Making these notifications closeable solely by click is as simple as adding a CSS class. This plug-in also uses jQuery enhancements to provide animations and cookie support for closed boxes.

Amp Forms
10. Amp Forms

Amp Forms are yet another practical plug-in that not only offers exceptional overall design, but also plenty of straightforward functionality. This holds especially true for older browsers such as IE7 and IE8. With this plug-in, users can quickly and safely enter a wide range of information required for search and website functions, mailing lists and other tasks. Included are plenty of CSS3 enhancements for compatible browsers, error styling, custom focus styles and unique layouts for radio and check boxes.

Clean CSS Pricing Tables
11. Basic Clean Pricing Tables – Easy To Modify!

Pricing tables gives your customers an opportunity to quickly view, compare and choose the right options for their needs and budget. This clean and effective plug-in gives your website a great looking price table that is easily customizable according to your needs. This plug-in uses CSS3 and Sprites to deliver exceptionally quick load times, and it comes with an amazing array of customization features. Included are five folders containing CSS stylesheets and HTML demos for each of the five available colors. PSD files for all five colors are also included. This plug-in also works in IE6, IE7 and IE8, although the rounded corners featured on these price tables will revert to straight corners for browsers without CSS3 compatibility.

CSS3 Shadow Pack
12. CSS3 Shadow Pack

Shadows can add a level of depth to any element, but the regular CSS3 box-shadow property can be a pain when it comes to producing the type of shadows you want. Instead of spending excess amounts of time wrestling with the CSS3 box-shadow property or re-creating complex shadows in Photoshop, you can use this plug-in to apply shadows to any container. The CSS3 Shadow Pack offers 11 attractive shadow styles, each featuring three shadow projection lengths and intensity variations, giving you a wide range of shadow variations to play with. The CSS3 Shadow Pack works best with CSS3-compatible browsers.

Button Pro - CSS3 Buttons
13. Button Pro – CSS3 Buttons

Whether you need large buttons, small buttons, rounded or rectangular buttons, Button Pro has them all in an easy-to-use set rendered in pure CSS3. This plug-in offers 11 different color variations in three available sizes that are spectacularly easy to implement on any webpage. You won’t need any images to make it work, but you can also add an icon to the buttons if you want to get your users’ attention. It also degrades nicely on older browsers. Button Pro also features a set of buttons used by Google, Twitter, Facebook and other well-known Web services, all faithfully re-created in CSS3.

Utopian CSS Dropdown Menu
14. Utopian CSS3 Dropdown Menus

Developers searching for a classy and cleanly designed drop-down menu will appreciate this one. Utopian CSS3 Dropdown Menus are available in horizontal and vertical layouts, in black, white and Utopian color styles. This plug-in is based purely on CSS that follows XHTML Strict 1.0 semantic code for maximum quality and compliance. What you have here is a highly customizable and easy to implement drop-down menu system that doesn’t rely on JavaScript or similar code to operate. This plug-in also features CSS3 enhancements that can be seen when using compatible browsers.

CSS Login Panel Menu
15. Easy to use HTML5 & CSS3 Login Panel

Easy to use HTML5 & CSS3 Login Panel is a highly customizable and powerful plug-in that combines the power of HTML5 with the versatility of CSS3. This one-of-a-kind plug-in features an easy to use and highly customizable interface that is relatively simple to implement. Features include error styling and custom focus files. This plug-in even includes shadows and rounded corners for browsers capable of supporting CSS3. Included are three folders with separate CSS and HTML demos as well as a layered PSD file with three colors.