background preloader

Awesome CSS3 generators to simplify front end development

Awesome CSS3 generators to simplify front end development
CSS3 Generator This generator is definitely one of my favorites, as it allow you to generate more than 10 different CSS3 effects, such as border radius, text shadows, transitions, and more. Visit CSS Gradient generator CSS gradients are cool, but it’s also a bit tricky to remind all the possibilities. CSS button generator In my opinion, this is the most advanced CSS3 button generator available on the internet. CSS3Gen CSS3Gen is a nice generator which allows you to easily create useful snippets of CSS3 and copy them straight into your projects. CSS3 Please CSS3 Please is a very effective tool to test your CSS3 code: Just edit the CSS rules from the editor, and a special container will receive instant changes so you can have a preview of what you’re doing. Layer Styles If you’re familiar with Photoshop, there’s no doubt that you will love Layer Style, a CSS3 generator which replicate the look and feel of the popular software from Adobe. Border image generator CSS3 Pie

20 Methods for Upping Your Current Web Design Skills Design All great designers are constantly improving their skills. There has never been a successful designer, or anyone of another profession for that matter, that has stopped at a certain point and said, "Good enough". Fortunately, there are plenty of ways to always be learning new things, and to always be improving. In this post we're looking into 20 different ways a web designer can improve their skills at any time. 20 Great Improvement Methods 1. Check out websites like to explore the best user interface patterns for the web. User Interface Pattern Websites: 2. Look at the detail in everyday objects, and actively look at detail in other web designs. 3. Many clients love a designer that offers SEO services. 4. Trends are never something a web designer should solely rely on, but learning new trends is a great way to keep up with technology, and to keep you as a designer out of a rut. 5. 6. Image credit: Dey 7. 8. 9. Image credit: Jakob Montrasio 10. 11. 12. 13. 14. 15. 16.

Challenges - Adobe Makes Web Site Creation Even Easier Adobe made a big splash in May by releasing their highly anticipated Creative Suite 6. They also released Creative Cloud, their first foray into cloud-based storage and software. One bit of software exclusive to Creative Cloud customers is Muse, a program that allows graphic designers to build Web sites without knowing any code. It was already easy enough to use, but Adobe is making it even easier. Adobe announced on Monday that Muse has received a substantial upgrade. The major change in the update is support for built-in contact forms. Here’s a video on how to create contact forms in Adobe Muse: Another welcome addition is the ability to link to downloadable files. There’s a slight bonus for Creative Cloud subscribers versus those who pay for just Muse. As for new languages, Adobe has added localizations for Japanese and Italian. To se all the changes that were added to Muse, check out the release notes. Adobe Makes Web Site Creation Even Easier

Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it! Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Example 1 And now, the interesting hover action!

Page Peel Effect Using MooTools Soh Tanaka release a great script back in May titled Simple Page Peel Effect with jQuery & CSS. The idea is that you place a "peel" image on the upper-right side of an element which, when hovered, "peels" open and peels close. I thought this was a quality, flexible idea so I've ported the jQuery code to MooTools. The XHTML A wrapper DIV containing an image and a "message" DIV. The CSS These initial CSS is important as we'll be modifying this initial CSS with MooTools. The MooTools JavaScript The peel effect is triggered by mouseenter and mouseleave events on the outter DIV element. What do you think about this effect? Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Select Dropdowns, MooTools, and CSS Print Newer Create Commands in TextMate Using PHP

60+ Awesome Grunge Font That Every Designer Should Collect Advertisement Grunge and Dirty designs are probably the most popular design trends. Although grunge may means dirty to some people, but it is designer’s favorites. Today, we are going to share 65 Awesome Grunge Font that you probably want to collect. If i had missed out any fonts that you think are cool, please share through the comment section. 1. 2. 20th Century Woodcut 3. 28 Days Later 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 55. 56. 57. 58. 59. 61. 62.

15 sites web developers and designers should know Creating a good website isn't an easy task, but there's a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked. ColorCombos When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. LIpsum Who doesn’t know the extremely popular Lorem Ipsum text? What the font? You just saw a logo or website using a particular font and you enjoyed it. ConvertIcon Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. BgPatterns background Patterns is definitely one of the current webdesign trends. HTML Encoder Do you display code on your website? Test Everything Sprite Generator CSS Sprites is definitely a great technique to use, mainly because it reduces the number of HTTP requests. Load Impact IconFinder TypeTester CSS Tidy

Ten Javascript Tools Everyone Should Have Filed: Sun, Mar 04 2007 under Programming|| Tags: toolbox javascript popular list Javascript frameworks have exploded on the scene over the last few years but they're no replacement for a good toolbox: those little snippets of code you seem to include in every single project. Here's my list of 10 essential Javascript tools everyone should have at their fingertips! #0 - Trim. Trim is one of the things that leave you scratching your head wondering why it was never included in the language to begin with. String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,""); } String.prototype.ltrim = function() { return this.replace(/^\s+/g,""); } String.prototype.rtrim = function() { return this.replace(/\s+$/g,""); } Usage… var test = " Test "; var test1 = test.ltrim(); // returns "Test " var test2 = test.rtrim(); // returns " Test" var test3 = test.trim(); // returns "Test" #1 - Numeric Sort. Javascript's Array object has a sort() method, and a pretty quick and fast one at that.