background preloader

CSS 3D Clouds

CSS 3D Clouds
An experiment on creating volumetric 3d-like clouds with CSS3 3D Transforms and a bit of Javascript. Check out the tutorial here! Move the mouse to rotate around and mouse wheel to zoom in and out. Hit space to generate a new cloud. Works on Firefox (faster if Nightly), Chrome and Safari. Texture list Select one or more textures to create clouds. white clouddark cloudsmoke cloudexplosionexplosion 2box Presets Credits Coded by Jaume Sánchez (@thespite) Inspired on Mr.doob's WebGL clouds and Mark J. Fonts Open Sans and Lato are from Google Web Fonts.

Related:  JAVASCRIPTS & CSS HTML 5 jQueryLab & Demos

10 Easy Image Hover Effects You Can Copy and Paste Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action. Sneak Peek Creating Custom Form Checkboxes and Radio Buttons with Just CSS! In CSS we have many ways to style things in any way we want. When it gets to forms though, things get a little complicated. Text inputs are easy, but checkboxes and radio buttons are very difficult to style with CSS. In this tutorial I’ll show you exactly how to style these inputs and make awesome forms with just CSS! Effectively, a really good idea for styling checkboxes the only way to style checkboxes, radio buttons and drop downs is with this little piece of CSS:

Scratch-Off Reveal with HTML5 Canvas I’ve previously demonstrated several “sliding” before-and-after comparators for images and video that track mouse movement from side to side. More precise “scratch-off” interfaces can be useful for comparing particular kinds of images, such as photos taken at different times in history, or comparing a sketch against a final product. Other examples I’ve found of this technique are rather complicated and over-coded, or have framework dependencies; by comparison, the code for this technique is relatively straightforward, and written in pure JavaScript. In effect, the result is the same as my “scribble” SVG reveal technique, but interactive, rather than playing automatically. For this example, I’ve used Calgary’s Center Street bridge, which recently celebrated its 100th anniversary, with photographs taken 70 years apart, in 1943 and 2013.

3D Gallery with CSS3 and jQuery Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms. View demo Download source With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Pretty Hover Effects Pretty Hover Effects with CSS and jQuery Demo: Hover your cursor in each image below. Note that if you're using IE - you're not seeing the rest of the styles due to lack of CSS3 property support. Move a Cube With Your Head or Head-Tracking with WebGL - Learning Three This post is about head tracking and how to use it in 3D. It is surprisingly easy to do with the suitable libraries. We will experiment with headtrackr.js and three.js. headtrackr.js is a nice library from auduno to do head tracking in the browser. You will learn how to do head tracking in webgl in only 20lines of javascript. I love the web and how easy it is :) tl;dr; links

20 Scroll Animation Plugins You Must Start Using Flip Keep your website up to date by using these outstanding scroll animation plugins which follow the web design trends of 2017. Make your website interactive by using various animation effects that trigger when you scroll. How to spice up your menu with CSS3 Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover. View demo Download source In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it.

3d animation using pure CSS3 Here's an example of pretty powerful CSS3 animation and 3d effects. Using the perspective, transform and transition properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory. Just make sure you're running the latest version of a -webkit based browser (Apple Safari or Google Chrome) to see the effect. 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. For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ. 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.

Filter Functionality with CSS3 Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints. The Markup

43 Brilliant Free jQuery Image Gallery/Slider Plugins (And 14 Tutorials to Make Your Own) jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room.