25 Free Color Tools, Apps and Palette Generators The marvelous thing about color within design is you have the choice from an infinite number of possibilities and combinations. On the flip side of that, having infinite color possibilities makes it very difficult to lock down on the perfect color scheme or palette for your project. This is were the post will hopefully help you. In this post we have collected 25 completely free tools, apps and generators to help you find, manage, and create beautiful and, hopefully, perfect color schemes. Color Scheme Designer Color Scheme Designer is very simple to use app that offers you a complete report on how to use any given color (in various combinations as monochromatic, complementary, triadic, analogous, tetradic). Touchan This application is accompanied by a short video tutorial which will allow you to fully utilize all of its features. Kuler Kuler has been built by Adobe, and that is plenty prove its high quality. Colorotate Color Munki Colorsuckr ColorSuckr is awesome! Colorspire ColorJack Infohound
Border CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML. There are numerous types of border styles at your disposal. CSS Code: Display: This is a solid border This is a double border This is a grooved border This is a dotted border This is a dashed border This is an inset border This is an outset border This is a ridged border This is a hidden border This is probably obvious, but the default border-style setting for an element is hidden. To alter the thickness of your border use the border-width attribute. This paragraph has a solid border with a "thick" width. Now for the creative aspect of CSS Borders! This paragraph has a solid border with a color of "blue". This only has a bottom border Try it out!
10 resource sites for designers This week I would like to show you 10 cool resource websites, each one of them offering various examples of images, links, wallpapers etc. Hopefully you will get inspired and can use those websites as a source for future projects. Now here are the 10 Cool Web and Graphic Design Resource Sites 99Percent This website is mainly about “ideas and how to make them happen”. Designbump This website is full of content, offering many Photoshop tutorials, information about Web Design, ideas and themes, comic book-art and fonts. Graphicmac Here you can find everything about Illustrator, InDesign, Mac, Photography, Photoshop and Fonts. Marcofolio How to make a rotating banner using CSS3, information about CSS3 for mac and hand-held devices, Photoshop, icons, CSS and Joomla for Web Design, and other useful tools, such as Cheat Sheets. Designreviver Tutorialking Fresh and free Photoshop tutorials, brushes, all this in various categories. Colourlovers Abduzeedo BigSpaceship Designmag Books About Web Design
Readable CSS - Web developer guide Go to Previous Section:SelectorsThis is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable. Information: Readable CSS You can add white space and comments to your stylesheets to make them more readable. White space White space means actual spaces, tabs and new lines. In the context of page layout and composition, white space is the portion of a page that is left unmarked: margins, gutters, and space between columns and lines of type. Your sample CSS file currently has one rule per line, and almost the minimum of white space. The layout you choose is usually a personal preference, but if your stylesheets are part of shared projects, those projects might have their own conventions. Examples Some people like the compact layout that we have been using, only splitting a line when it becomes very long: Some people prefer one property-value per line: Example
30 Mind Blowing Parallax Scrolling Effect Websites | Webdesignersblog - The Best Daily Online Resources for Web and Graphic Designers Now a day’s Parallax scrolling effect become a New and More Popular Trend in web design. Parallax scrolling is a special scrolling technique in computer graphics, to create an illusion of depth in a 2D video game and adding to the immersion by moving multiple layers of images at different speed. Same technique can also be implemented in web design. In Today’s Post We gathered 30 Mind Blowing examples of websites using the parallax effect to inspire you. If you are Planning to start a parallax scrolling Portfolio Site, this is a must read post. Don’t forget to subscribe to our RSS or Follow us on Twitter if you want to keep track of our next post. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 5b Net 30.
Dive into Flexbox Introduction Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Browser support is going to grow quickly, so you’ll be ahead of the game when support is wide enough for Flexbox to be practical. Read on if you want to know what it does and how it works! Why is Flexbox needed? Authors have long been using tables, floats, inline-blocks, and other CSS properties to lay out their site content. Specification Status and Browser Support The Flexbox specification has been a work in progress for over 3 years. Flexbox Specification Timeline: July 2009 Working Draft (display: box;)March 2011 Working Draft (display: flexbox;)November 2011 Working Draft (display: flexbox;)March 2012 Working Draft (display: flexbox;)June 2012 Working Draft (display: flex;)September 2012 Candidate Recommendation (display: flex;) Browsers are adopting Flexbox quickly. gistfile1.css order
Free Wordpress Portfolio Themes: 30 Free Wordpress Gallery Themes Free WordPress portfolio themes are a great way for graphic designers, logo designers, photographers and digital artists to show off their collections, without having to fuss around with hiring a web designer or worry about creating their own. Many times, it is simply better for someone to focus on what they do best, as opposed to trying to multitask and focus on their hobby and building a site at the same time. Thus, free WordPress gallery themes are a simple and easy setup and allow anyone to have a website without much of a hassle. While it’s certainly desirable to have a unique WordPress portfolio theme, using templates or a free WordPress gallery theme works fine for starters. In this free WordPress portfolio theme roundup, we’ve gathered up 30 free WordPress gallery themes for you to use. If you’re interested in more free WordPress themes, check out these posts: Thanks, and have a great day! Boldy Free WordPress Portfolio Theme Portfolium Free WordPress Gallery Theme Advertisement
"Old" Flexbox and "New" Flexbox Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented. How To Tell If you Google around about Flexbox, you will find lots of outdated information. Here's how you can quickly tell: If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox. If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011. If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification. Examples of Outdated Stuff All this stuff was fantastic at the time it was created, but now is outdated: Support Demo Example of OLD syntax Share On