One of the least used properties in CSS is the Clip property. Clip is part of the visual effects module of CSS 2.1 and its job is to place a visible window on top of an object that is being clipped.
It is useful for clipping images and creating thumbnails without having to create additional files. Creating Thumbnails Using the CSS Clip Property can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server.
You can also add some drop shadow to the clipped thumbnail by using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect.
Requirements: –
Demo: http://www.seifi.org/css/creating-thumbnails…
License: License Free
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. SohTanaka has made a tutorial: Simple Page Peel Effect with jQuery & CSS. All they are doing is expanding the image on hover, then retracting to its default size on hover out.
You may also interested in The Sexy Curls jQuery Plugin if you like this tutorial. The page corner can be set to curl automatically. The plugin is released under the MIT license. That means you can do whatever you like with it.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/peeling-effect/
Demo: http://www.elliottkember.com/sexy_curls.html
License: MIT License
Soh Tanaka has written a tutorial about making a Fancy Thumbnail Hover Effect with jQuery. Basically all they are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment with css), and padding when we hover over. During this animation, they also switch the value of the z-index, so that the selected image stays on top of the rest.
It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/image-zoom/
License: License Free
Marco has created a Polaroid Photo Viewer with CSS3 and jQuery by combining the CSS3 Box Shadow and Rotate properties. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s randomly rotated to the left or the right.
Sadly, CSS3 and HTML5 aren’t the standards yet. Not all modern browsers will be able to show off the full effect. It only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. If you are interested in creating a Polaroid Gallery, you can also look at the Drag and Drop Polaroid Photo Gallery in Flash?
Requirements: Safari and Google Chrome
Demo: http://demo.marcofolio.net/polaroid_photo_viewer/
License: License Free
One of the most common requests from clients when it comes to WordPress personalization, is to add a basic event calendar to their website. Finding a good place to position a big table like a calendar within your WordPress template is always a taught work. In addition, the <table> tag itself is often quite difficult to style in a good way.
Therefore, Stefano Verna came up with astonishing iCal-like calendars with jQuery. All the magic takes place with some ninja CSS. In addition to the plain calendar structure, You can see a lightweight Coda-like effect for events description popup as well.
Requirements: jQuery Framework
Demo: http://www.stefanoverna.com/wp-content/tutorials/ical_like_calendar/
License: License Free
Nick La has made another great great tutorial for us. Nick La shows us how to decorate our images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). To change the look and feel, simply edit the CSS specifications of the span element. To show how flexible it is, Nick La has created 15 different styles as examples for us (notice the HTML markup is same).
Source: CSS Decorative Gallery
Nick La from WebDesignerWall shows us how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced list menu utilizing the CSS position property. You can view the working example here.
Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.
Requirements: –
Demo: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
License: License Free
I think many readers are familiar with this awesome Javascript CSS Menu by Devthought, but I really need to include it in WebAppers. Fancy Menu is nothing to do with Flash. it is a custom navigation bar with some cute Javascript effects that will certainly impress your friends. It requires Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible.
Requirements: Internet Explorer 6+, Firefox and Safari
Demo: http://devthought.com/cssjavascript-true-power-fancy-menu/
License: License Free
Having too many WordPress themes to choose among is of course better than having too few. But there are times when searching for what you really need is like looking for the proverbial needle in the haystack.
If you’ve been looking for a top-of-the-line multipurpose theme you will probably find it right here. We’ve listed several very useful more specialized themes as well. Although admittedly we can cover every possible niche a short listing as this.
For a few of you, it may be back to searching for the needle. We sincerely hope that will not be the case.
Happy hunting!
- BeTheme – Responsive Multi-Purpose WordPress Theme
 
This, the biggest WordPress theme of them all, pretty much covers all the bases with respect to what a designer needs to create the perfect website – no matter the type or niche. If you’re in need of a multipurpose theme because you have to satisfy a large and diverse clientele, a theme like this one that is packed with useful features is certainly worth a close look.
It could take a full page to summarize BeTheme’s 40+ core features, so we’ll settle for the highlights.
- The popular Muffin Builder, working in combination with a powerful Admin Panel and a large selection of shortcodes eliminates any necessity for coding.
- A host of design elements plus unlimited colors, custom backgrounds, advanced typography and special effects provides unmatched design flexibility
- A Layout Generator, Header Builder, multiple column, grid, and other layout options serve to position your content precisely as you want it
- The most popular feature of all, and in many respects the one that provides the greatest design flexibility, is the library of 500+ professionally-crafted, responsive, and customizable pre-built websites.
“It is a very versatile, intuitive and easy to handle template. When doubts appear, the support team responds quickly and solves the problem. I am satisfied with my purchase and I collaborate when I can in the forum with other users like me when they have simple problems.†anden14
Click on the banner to visit BeTheme and be sure to take time to browse the pre-built website library. Read the rest of this entry »
We’re always trying to do things faster and better and accomplish more in less time. That’s good, but it’s easy to become obsessed with trying to figure out how to go about boosting our productivity.
If we’re not careful, our obsession can become stressful and counterproductive. The digital age has given us many excellent tools to work with. But it has brought with it more tasks to do and less time to do them in.
Fortunately, we have project management, time-tracking, prototyping, and workflow streamlining productivity tools. They give us more time to attend to the tasks we love and were hired to do. Or, the tasks that require knowledge skills, intensive focus, and careful thought.
We’ve carried out some in-depth research activities. This is in order to present what we believe to be the top productivity apps going into 2019. These go with the 5 top productivity tips designed to make you more efficient.
That said, let’s dive right in.
1. Mason
Mason is a different type of design tool. It enables you to skip steps you thought to be important if not mandatory, it allows you to take other steps immediately that you typically had to wait before taking, and it makes digital product maintenance far easier and less time consuming than you might have thought possible.
In short, instead of calling Mason different in its approach, it’s not much of a stretch to call it radically different.
This productivity tool’s frontend feature building and editing capability and visual interface allows you to create precise software features for websites, apps, and almost any other type of digital product. Once you complete your design in the visual builder, it’s ready to be handed right over to production or product maintenance, and with pixel-perfect accuracy.
Teams can build front-end experiences with lightning speed, they can avoid the overhead costs associated with prototyping, QA inspections, and the documentation often required by developers, and they can often skip the development phase as well since Mason handles the HTML/CSS coding.
Radically different? We think so.
2. Proto.io
Mobile and web app designers, developers, and product managers alike have found that this prototyping tool meets their every need, whether it involves wireframing and mockups, high-fidelity prototyping for user testing, or rapid prototyping design techniques.
Proto.io is a handy, time and labor-saving productivity tool you can use from the conceptual stages of web and mobile app design all the way to final approval and design signoff.
The Dashboard helps you maintain a full overview of your projects and users involved with your account, promoting collaboration among team members. Proto.io’s Editor does most of the work involved in constructing a prototype, while the Player lets you see what you’ve accomplished on your browsers and assists in user testing.
The latest version of Proto.io features an easier to use and more intuitive UI, new transitions and interaction design patterns, and improved user testing integration. Read the rest of this entry »
