background preloader

CSS 3D Clouds

CSS 3D Clouds
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 Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building. Demo: Click here to launch. Setup Before we begin creating the individual demos, some basic setup is required. Most of this is basic stuff: box-sizing allows us to manipulate the box model (feel free to apply more specifically if you don’t like the universal selector), and the pic class gives us a place to toss in some generic styling for each photo. Zoom and Pan Our first group of effects involves utilizing some tricks with hidden overflow. Grow Shrink Side Pan Vertical Pan Fun with Transforms Tilt Morph

Slopy Elements with CSS3 It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only. View demo Download source It’s always a delight to see some non-straight elements in web design. So, let’s begin! Example 1 In our first example, we want to have a pretty normal layout with a little twist: we want a diagonal separation between the elements. The Markup Let’s create a section for our whole content and inside we’ll add some divisions with the class se-slope. Now, let’s check our the style. The CSS The body will have the same background color like all the even se-slope elements, which is pink. The divisions will all be rotated: the odd ones will be black and rotated 5 degrees and the even ones will be pink and rotated -5 degrees. Example 2

A month after switching to Macs - cd ~/jaequery The story For most of my life, I had a deep resentment toward Macs. I always never liked their concept of trying to do something different. Anyhow, I’ve grown accustomed to PCs very much. Tried Macs (several times) But because I also enjoy trying out new and shiny things, time and time I’d buy a Mac, try it out, and find myself totally weirded out by it. My PC broke hardcore Then one day, my awesome PC just died. Powering on the dusty old Mac Since I had no other choice, I powered up my Macbook Air for me to continue working. As I was on a strict deadline at work, I decided I’ll just have to use Mac for now and deal with PC later. So here are what I just didn’t like about Macs: No easy way to maximize window and full screen mode weirded me out. Since I just could not live without these, I looked hard online to see if there was anything remotely even close to how it was on PCs. I love Macs now Mac’s apps are just so much better and nicer. One big caveat about Macbook Air App recommendations

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: appearance: none; This will take all browser styles off those inputs and we can start to alter them as regular elements. It’s okay though! What we can use So what weapons can we use to create these effects? Recently there has been a bit of discussion on the web about :before and :after when using forms. To get started, lets make a few checkboxes and radio buttons. The next step is some CSS. After that we set the styles for when the user clicks on the checkbox (:active) and when the checkbox is checked. And we’re done! Update!

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. Images and Markup The comparison images must be the same size, or at least the same aspect ratio. The Script Compatibility

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. Autumn Leaves Cloudy Skies Nice Horsy Grassy Meadows Jigsaw Pieces Retro GrooveBack to Tutorial 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 Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style. I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: Let’s move on to the item list: Example 1 Example 2

Charm: Cure Customer Support Fatigue Charm gives you back that lovin’ feelin’ (whoa-oh oh) You didn’t ever want to hate hearing from your customers. You wanted to do it better. And yet you find yourself avoiding (and cursing at) your support inbox. It’s full of email bombs: innocent-looking emails that hide a lot of work & obligation & delay. Emails you read & Mark As Unread-ed because you weren’t sure how to solve that problem right then. It’s incredibly frustrating when you read an email, can’t fix it or solve it right away, and so you feel like you can’t reply because if you do, the email will leave the inbox (without a lot of effort to bring it back). When all you see are emails to “remind” you, you have to waste precious cycles remembering remind you of WHAT? Your inbox is full of festering, murky, potentially explosive little bombs. Is it any wonder you don’t want to look at it? Your support process is a source of friction & stress for you & your team. And hey, if you can’t handle the bomb, what are you forced to do?

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 For a simple example. see the “move a cube with your head” demoTo mess with the code now without any installation, see this jsfiddle examplefor an attempt to make 3d more immersive by using head tracking, see this demo WebRTC is great! WebRTC starts to get traction. auduno is part of Opera team. Demo Time !! As usual we did a plugin for tQuery API to make it easy to use in our environement. Another demo where the camera follows your head. Let’s Get Started Ok now lets see how to use this library with tQuery API. Start Tracking Heads First, you instanciate the object with this simple line. Head tracking… Kesaco ? Conclusion

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. These effects will definitely make your website more appealing and keep your users engaged. You can have scrolling animation that uses the vertical or horizontal space. No matter which technique you choose, be careful no to exaggerate with the effects since these might be a little tiring and can make your website load slower. This is an amazing scrolling effect that you can quickly incorporate in your designs. This is a creative scroll effect that, when using the mouse-wheel, your layout will move from right to left, in a horizontal position. This is an amazing scroll animation plugin that you can use right away. This is a very creative jQuery scroll effect that demonstrates that, with the right technique, you can do just about anything. ScrollReveal.js

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. Iron Man 2With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...More info The Last AirbenderThe story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...More info Tron LegacySam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...More info

Awesome Overlays with CSS3's Border-Image Property - ZURB Playground - What's the big deal? These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS. How to use border-image The border-image property is tricky in the way it takes a single image and turns it into a complete object border for any sized element. What can potentially screw things up is that it takes the center section and stretches it across your entire object. This is a sketch of how the browser cuts up your image into the border-image elements... ...and this is the image we're using (enlarged), and how each piece becomes an edge to our overlay object. The rest of the syntax The first part of the syntax is simply the path to the image you'll be using. url(/images/awesome-overlays/border-image.png) 5 5 5 5 stretch;