WebAppers

/ best free open source web resources /

Graphic Resources

Ink Bleed Transition Effect Powered by CSS Animations

Posted · Category: License Free, Popup

By using a PNG sprite and the steps() timing function in CSS, Codrops taught us how to create video effects and use them as transitions! In the resource, they used this technique to fire a modal window, but you can use it to transition between two different pages as well. First, you need a video with a filling effect and a transparent area. Then you need to export this video as a PNG sequence. You can read the full tutorial on the site.

ink-effect

Requirements: –
Demo: https://codyhouse.co/demo/ink-transition-effect/index.html
License: License Free

15 Awesome CSS3 Text Effects

Posted · Category: Best Collections

Every web designer wants to create only standing apart websites that are appreciated by all Internet users. Of course, it’s impossible to satisfy everyone’s tastes. Still, as a web designer you must merely try to give your best to create the most liked online presences.

Fortunately, we have the most powerful tools and resources to create awesome websites since the beginning of the world! Practically, we have so many website templates, frameworks, content management systems, adjacent tools and other stuff, that is impossible to use all of them…In fact, a web designer uses an infinitesimal part of all the available tools.

Under these circumstances, the best designer isn’t necessarily the most talented one; the best designer is the one who has at disposal the best tools. Definitely, we want the best for all our readers and consequently, we collected for you some useful CSS snippets that might make the difference in your projects! It’s about 15 great CSS3 text effects – all are handpicked and we think that these may add a sparkle of originality to your next projects. Some of them are useful for particular uses, while others are suitable for multiple uses.

Everything man-made is perfectible and this post isn’t an exception! In the event that we missed your favorite CSS3 text effect, please add it in the comment form and we will add it into a future post! Also, it will be great toshare with us your opinion about these text effects.

If you love colors and you want a wonderful and full of color text effect, then this one is the perfect solution for you! It is very suitable to display the name of a creative agency or for portfolio projects. Of course, it may be used for any other type of projects – if you want to stand apart, this text effect is a good choice!

See the Pen Magnetype by Bennett Feely (@bennettfeely) on CodePen.

The loading wave effect is really awesome! It may be used to add a little bit of mystery to a project or to highlight the fact that time is passing. It would be interesting to use it in order to stress a discount or a special offer which is running only for a very short period of time.What do you think?

See the Pen CSS Text filling with water by xiaodong (@hxd) on CodePen.

This is a very interesting text effect; I think that due to the color scheme used it might be applied to emphasize a vintage design. It’s a smart use of text shadows and it has the potential to attract the users’ attention. Don’t forget, vintage will never die!

See the Pen CodePen Text Effect by Jack Rugile (@jackrugile) on CodePen.

The next text effect works as a magnet for the viewers. You may use it to improve the sign-up form, to emphasize a new product offered for sale or simply to attract the eyes of the viewers. It’s enticing and a wise web designer would use it into his/her advantage!

Read the rest of this entry »

Awesome CSS Loading Effects for Grid Layout Images

Posted · Category: Gallery, License Free

TutsMix has shared with us some cool CSS loading effects for grid images. You can use them on your portfolio, blog, or anywhere you want. The setup is quite simple. We use Normalize.css as an alternative to the traditional CSS reset, ZURB Foundation to create a responsive grid, Masonry to create a dynamic grid layout, imagesLoaded to check if the images have been loaded, and Infinite Scroll by Paul Irish to load more images and append them to the gallery.

css-grid-loading-effects

Requirements: JavaScript Framework
Demo: http://tutsmix.com/demo/cool-css-loading-effects-for-grid-images/
License: MIT License

How to Create Preloading Effect with CSS, SVG and JS

Posted · Category: Information, License Free

Codrops has showed us how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. For websites, where it’s crucial to load all or part of the assets, these kind of preloader screens can be a creative way to make waiting a bit less boring for the visitor. The idea for this tutorial is to create a beautiful preloading effect.

Initially, the logo and a circular progress element slide up and when the loader finishes its progress animation, i.e. the page assets are loaded, the whole “header” moves up while the page elements are revealed with yet another animation. The sliding logo with its color change makes the icing on the cake.

preloading-effect

Requirements: JavaScript Framework
Demo: http://tympanus.net/Tutorials/PagePreloadingEffect/
License: License Free

Create Special Effects with Magic CSS3 Animations

Posted · Category: Information, License Free

Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the mynified version: magic.min.css. The project is now hosted on GitHub. There are special effects like bling, perspective, rotate, slide, tin, bomb and etc.

css-animations-effects

Requirements: CSS
Demo: http://www.minimamente.com/example/magic_animations/
License: License Free

30+ Impressive Pure CSS Hover Effects Collection

Posted · Category: MIT License, Tooltips

iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3. It’s built with Scss CSS (file included), easy modification with variables. There is Modular code, no need to include the entire file.

There are over 30+ hover effects in one pack. And it’s well documented. iHover is pretty easy to use. All you need to do is to write some HTML markup. You just need to include the CSS file and you are ready to go.

ihover

Requirements: CSS
Demo: http://gudh.github.io/ihover/dist/index.html
License: MIT License

A Collection of CSS3 Powered Hover Effects

Posted · Category: Buttons, MIT License

Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

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 and SASS 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.

hover-css

Requirements: CSS3
Demo: http://ianlunn.github.io/Hover/
License: MIT License

Awesome Modal Window Effects with CSS Animations

Posted · Category: License Free, Popup

Codrops has shared some amazing ideas for nifty modal window effects with us. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration. The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).

modal-dialog

Requirements: CSS3
Demo: http://tympanus.net/Development/ModalWindowEffects/
License: License Free

How to Create a Youtube Menu Effect with CSS & JS

Posted · Category: License Free, Menu

Codrops has shared a Simple Youtube Menu Effect Tutorial, which teach us how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”).

The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.

youtube-menu-effect

Requirements: JavaScript Framework
Demo: http://tympanus.net/Tutorials/YouTubeLeftSideMenu/
License: License Free

Experiments: Interactive CSS3 Lighting Effects on iPad

Posted · Category: Information, License Free

3D transforms are awesome, but they’re even cooler with lighting effects. Tom Giannattasio, working at edX which is a joint venture between MIT and Harvard focused on building an open-source platform for online education.

He has created an Interactive CSS3 Lighting Effects for iPad. The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. It looks best in Safari browser.

css3-lighting

Requirements: CSS3
Download Link: http://attasi.com/labs/ipad/
License: License Free

Page 1 of 15123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons