Page Preloading Effect A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs. View demo Download source Fullscreen Form Interface An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields. View demo Download source Today we’d like to share a fullscreen form concept with you. The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to add some fancy animations for the fields. Once all the fields have been filled or moved through, we show a summary in the final step.
A UX Idea: I know where you are aiming! If you are a web developer or designer you know what :hover selector essentially does; browser detects current mouse cursor position, checks if the cursor is inside the element then adds the css rules you previously defined. This is a significant feature in terms of usability; you can create a drop-down and get rid of the all the clutter of secondary items or you can reveal an info popup to explain the role of a button. However, there is a drawback which is overlooked. Sometimes, you urge user to move the mouse on a specific element to go the actual target. Consider the following example, Tooltip Styles Inspiration A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips. View demo Download source Today we’d like to share some tooltip styles and effects with you. Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity to add some subtle and unique effects to any design.
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses
Web Design Software for Mac — RapidWeaver Code-Free Creation There’s no need to know any code - RapidWeaver generates it all for you, based on the content you add to your website. If you need to add some code (maybe a Twitter button), just paste it in and RapidWeaver automatically places it alongside your existing content. Stunning Designs RapidWeaver 6 comes with 5 brand-new themes, built especially for this release by some of the Addon community’s finest developers: Nick Cates Design, Elixir Graphics, Brandon Lee Themes, Yuzool Themes & OneLittleDesigner.
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.