CSS3 Dropdown Menu While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.
CSS3 PIE: CSS3 decorations for IE 10 Useful CSS3 Tools for Your Next Web Development HTML5 always an important phenomenon within web design community. Another most valuable aspect that web designers should accept is CSS3. CSS3 offers new and exciting improvements on your web design and development. In this article we present some useful collection of CSS3 Tools for your next web development. A simple stylesheet for rendering beautiful keyboard-style elements. CSS3 Click Chart This text is divided into paragraphs inside of a single div element, but with CSS3 the text in these paragraphs is divided into columns. CSS3 Button Maker Drag things, pick colors, make a nice class for your buttons… introducing the Button Maker. Transforms Take a look at our fun and productive free tools for web developers. CSS3 Generator This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit. CSS3 Gradient Generator Select the format you would like your colors generated in. Web Browser CSS Support The following are units that are used in CSS properties. CSS3 Maker
Rails Assertions Cheat Sheet Last week I was working on the Rails testing book and I started wondering how the rest of the Rails world was writing their tests. Since I decided that I was going to use Test::Unit instead of Rspec in the book, I knew that I could safely limit my search to just assertions and refutions. The first thing I did was identify every method available to ActiveSupport::TestCase that starts with assert or refute. Once I had that list of 55 methods, I searched through github for instances of that method in files that end in ‘.rb’ nested in a test directory. The results were impressive. There were 1,449,068 assertions and refutions in Ruby projects. Assertions: Refutions: Hi. I've been building things with Rails for three years, and trying to figure out how to test for almost as long.
Practical Uses of CSS3 | ... We are certainly at an interesting point in time with the web. There are new techniques being created every day, and as developers, we have the privilege of deciding how and when to use them. I'm the new guy at Viget (only been here a few weeks), and every company is different, so it is interesting adapting to Viget's standards. Some companies utilize progressive enhancement more than others, and I love that we utilize it when we can. One big item for me is how much we use CSS3. Note: If you are viewing this page in an inferior browser (ahem: Internet Explorer), you will see the degraded versions of the examples. Border Radius This is probably the most used CSS3 property. One simple use of border radius is for form elements. Definitely nothing special and some people may not even realize that the submit button is actually a button. The Code Who would have thought simple rounded corners make the form so much more appealing? So this code is just saying to give each corner a 3px radius. RGBa
caolan/async Start Experimenting With CSS3 Keyframe Animations | Lee Munroe You can now produce stunning animations with CSS3. Did you know that? Of course you did. CSS3 animations are the new kid on the block. It's a big step. Although they haven't really taken centre stage yet as only the webkit browsers support them. For this reason they're used sparingly, in a lot of cases for experimental purposes or as 'hidden gems', but that doesn't mean you should shy away from getting stuck in. It was only recently I experimented myself so I thought I'd share a beginner's demo with you. How to do CSS3 keyframe animations Keyframe animations involve you setting the object state (or property) at different stages of an animation. Setup the environment Let's setup a little demo. Now apply some basic styling so we can see them. And you've got yourself two boxes. View demo. Setup the animation affect Setup the animation affect and call it 'movingbox'. movingbox is the name we're giving the animation. So far we still have two static boxes. View demo. Apply the keyframe animation View demo.
IE Alert js - let your visitors upgrade their browser What is IE Alert ? IE Alert is a jQuery plugin that shows a well designed modal box to the visitor who's trying to view your site with an older version of Internet Explorer browser, this modal box encourages your visitors to upgrade their browser for a better experience using your site. When should I use it? You should use it when you created a stunning modern website that looks and works amazing in modern browsers and you don't want to waste your time and money to make it work on legacy browsers like IE6, IE7 and IE8. Usage 1. There are more options available, see the docs.
Demo – An Introduction to CSS 2.1 and CSS 3 visionmedia/git-extras Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast
ImagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. Demo Edit this example on CodePen or try the jQuery example. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Get a packaged source file: Or install via Bower: bower install imagesloaded Or install via Component: component install desandro/imagesloaded Usage imagesLoaded( elem, callback ) new imagesLoaded( elem, callback ) elem Element, NodeList, Array, or Selector Stringcallback Function - function triggered after all images have been loaded Using a callback function is the same as binding it to the always event (see below). imagesLoaded( document.querySelector('#container'), function( instance ) { console.log('all images are loaded'); }); imagesLoaded( '#container', function() {...}); var posts = document.querySelectorAll('.post'); imagesLoaded( posts, function() { Events imagesLoaded is an Event Emitter. always done fail progress Properties jQuery
Grunt: Automated Testing With a look into our evolving JavaScript testing methods, Patrick shares how we're using Mocha, Jasmine, and Grunt. Introduction A few months ago we posted about our new build process, and we mentioned starting to use Grunt for the “freedom and customization” that it provided. Recently, Rob Tarr released a new application called Stuntman. Grunt to the Rescue Running both server and client-side JavaScript specs was an issue. Our solution: Test client side JavaScript with Jasmine Test our server side JavaScript with Mocha Not very challenging to do thanks to Grunt, but there are some important packages you will need. Prerequisites Grunt Setup Check out the example repository. Our basic setup consists of the following packages in our package.json file: Example “package.json” Gruntfile.js Setup Once you have your package.json and Gruntfile.js in a directory, install the packages with the following command (in your project directory): npm install Directory Structure Example Tests Client Server Running Tests
jReject - jQuery Plugin for Simple Browser Rejection