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. 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. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License
Media Queries Demystified: Min-Width and Max-Width Having conditional confusion? Ever since 2011, when we started testing media queries for mobile devices, I've had difficulty remembering how the min-width and max-width conditional statements operate. Even to this day, I have to slow down, and repeat in my head what they actually mean because frankly, I find their naming convention to be very unintuitive. In this article, I'll attempt to break it down in a way that's simpler to understand. Min-Width @media only screen and (min-width: 330px) {...} Here's what that actually means: "If [device width] is greater than or equal to [specified #], then do {...}" So if the actual "device width" is 320px this condition will return false. "If 320px is greater than or equal to 330px, then do {...}" It would become true if you use a min-width value equal to or less than 320 as shown below: In the sample above, the red text is returning 'true', the black text is returning 'false'. Max-Width @media only screen and (max-width: 330px) {...} Translates to: Comments
50 Beautiful And User-Friendly Navigation Menus Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in. This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to Web Design navigation and published here over all the years. When users look for information, they have a goal and are on a mission. This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. Read more… The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Read more… Read more… Read more…
Strip - A Less Intrusive Responsive Lightbox Isotope · Filter & sort magical layouts How nth-child Works There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: What the above CSS does, is select every third list item inside unordered lists. It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. As seen in the first example, nth-child also accepts expressions in between those parentheses. Let's get back to the "3n+3" from the original example though. (3 x 0) + 3 = 3 = 3rd Element (3 x 1) + 3 = 6 = 6th Element (3 x 2) + 3 = 9 = 9th Element etc. How about the :nth-child(2n+1)? (2 x 0) + 1 = 1 = 1st Element (2 x 1) + 1 = 3 = 3rd Element (2 x 2) + 1 = 5 = 5th Element etc. Hey wait! (3 x 0) = 0 = no match (3 x 1) = 3 = 3rd Element (3 x 2) = 6 = 6th Element (3 x 3) = 9 = 9th Element etc. So as you can see, the matches are exactly the same, no need for the "+3". (4 x 0) - 1 = -1 = no match (4 x 1) - 1 = 3 = 3rd Element (4 x 2) - 1 = 7 = 7th Element etc. Browser Compatibility Still not getting it?
HTML5: FileSystem API - Create Files and Store Them Locally Using JavaScript and Webkit Dec 19 2013 The FileSystem-API allows the creation of files and folders as well as their local storage using JavaScript. Files can be simple text files, but even more complex files such as images are possible. Modern Webkit browsers with HTML5 support are already able to handle the FileSystem-API. Access Local Filesystems To be able to save files and folders from inside the web browser to the local hard drive you’ll need access to the filesystem. The FileSystem-API can make use of local storage in two flavors. Generally, to begin storing files, access to the filesystem needs to be established: Using webkitRequestFileSystem() we choose whether we want to establish temporary (window.TEMPORARY) or permanent (window.PERSISTENT) storage as well as the required amount of space to be allocated. As a fallback we could additionally attach a fourth parameter to webkitRequestFileSystem(). Permission Request in Chrome The FileSystem-API follows the Same Origin Policy. Creating Folders Use Cases (dpe)
Search, sort, filters, flexibility to tables, list and more! - List.js 12 Fun CSS Text Shadows You Can Copy and Paste Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Basic Shadow The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! Syntax The syntax for creating a simple text-shadow is shown below. text-shadow: horizontal-offset vertical-offset blur color; Putting this into action, here’s an example with a shadow that has been moved down two pixels and right four pixels with a three pixel blur and a color of black at 30% opacity. text-shadow: 2px 4px 3px rgba(0,0,0,0.3); Here’s the result of this code, a nice simple shadow that is quite appealing all by itself. Why rgba? Quick and Dirty Letterpress Hard Shadow
Selenium Commands & Locators Explained A look at the common Selenium commands and locator methods. In my first post I introduced Selenium IDE and stepped through creating and running your first test case and test suite. In this second post I am going to introduce some of the basic commands in Selenium, and the various methods used to locate elements with Selenium. If you click the dropdown list of commands in Selenium IDE you’ll be faced with over 500(!) to choose from. Fortunately, many commands follow a pattern, which essentially extends the core commands. Actions It wouldn’t be too useful if we could only get values from a website, so there are also a whole bunch of action commands. open – This will open the specified addressclick – Clicks the element at the provided locationcheck – Toggles the checked value of a checkboxtype – Sends text input to an elementselect – This will select the specified item in a list In addition, most action commands in Selenium IDE also have a duplicate command with the AndWait suffix. Examples: