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


Linea Outline Icon Set

  • Posted By: Jason Taetsch
  • ...

A well coordinated icon set adds visual cues that can help users navigate your site or engage with content.  Grab the Linea Icon set from Dario Ferrando for a comprehensive icon pack that includes over 700 outline icons in both .PNG and .SVG as well as icon fonts for quick usage in web-based projects. The linea icon pack comes with a basic set of icons for standard UI elements, a music themed set, ecommerce icons, software icons, navigational arrows and weather icons and more. The set is free for use in both personal and commercial products with proper attribution.

linea_icon

Get Colors From Image

  • Posted By: Jason Taetsch
  • ...

Implementing the colors from an image into a design project is a surefire to have the colors complement one another.  With the emergence of HTML5, grabbing specific colors from an image has never been easier, or quicker. Browsers can complete these simple tasks that were previously reserved for image processing software. The Get Colors From Image tool by HTML-Color-Codes enables designers to select individual colors from an image without ever having to upload the file to a web-server. The multiple windows display the original image, the targeted area of the image as well as the specific color and corresponding hexadecimal code.

getcolorsfromimage

Prefix My CSS

  • Posted By: Jason Taetsch
  • ...

While browsers have gotten better at complying to the latest web standards and languages, many of the new CSS features still require browser-specific prefixes to properly display the content.  PrefixMyCSS  automatically adds the necessary prefixes to your CSS code so it will properly display in the major web browser. The tool allows designers to copy all of the CSS into one window and output a fully prefixed version of the CSS including comments.   Prefix My CSS also includes options to control the spacing between the different CSS properties and the line spacing of the entire document for readability.

CSS Terminal

  • Posted By: Jason Taetsch
  • ...

Adjusting the layout and design of a webpage can take up a serious amount of time due to the constant need to save, test and debug the appropriate code. CSS Terminal by Ben Barber is a browser bookmarklet that can input CSS rules directly into any current webpage, allowing a designer to get a live view of how changes or updates to the current CSS rules will affect the finished project.  Once active in your browser, the CSS Terminal window will appear and apply any of the entered CSS rules immediately to the webpage as they are entered.  The terminal window can be collapsed via the “ESC” or “Tab” key for a full view of the edited page.

CSS3 Border-Image Property

  • Posted By: Jason Taetsch
  • ...

The latest CSS3 attributes for images gives web-designers unprecedented control over the front-end display of a webpage.  With the new border-image property, designers are no longer limited to solid, dotted or dashed lines. The team over at HongKiat has put together the border-image property tutorial that takes advantage of the latest border attributes for creative ways to highlight images and photographs on a webpage.  The tutorial walks designers through creating a wooden photo frame that is compliant with Chrome, Opera, Firefox and Safari browsers. It includes the necessary styling rules, slicing techniques and HTML markup to create dynamic borders for any image or graphic.