Mega Web Buttons Pack #1 Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. In this set you will find 42 buttons which you can use easily on your website. We are using the WooFunction icon set released under the GNU General Public License. Our first step is to add […] View demoDownload source Today we want to share our first set of easy-to-implement buttons called ‘Mega Web Buttons Pack’. Our first step is to add the following line of jQuery: This means that we will create a new ‘span’ element which is the holder for the button icon. If, for example, you want to add the ‘Chart’ button you need to add markup to your website: or the ‘Search’ button: In the CSS you can change the looks by, for example, changing the background color: and markup will be: etc. :) We hope you like our experiment.
iOS Fonts css-x-fire - Allows editing CSS properties in the IDE from Firebug CSS editor Installation - Screenshots - FAQ - About Many front-end web developers use Firebug for pixelpushing and style tweaking since it has an excellent live view CSS editor. It allows the developer to concentrate on CSS styling without having to refresh the browser. Unfortunately Firebug does not know about your source files. The changes made in the CSS editor are in-memory only. And when refreshing the page all changes are lost. What if the web IDE - which knows about the source files - could record the changes made in Firebug and apply them on the source code? See it in action - watch this video (thanks to "goyocode"). Grab the plugin with the plugin manager or from Style with pleasure! This plugin is no longer under development. Source code still available at
CSS drop-shadows without images Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.
OpenType OpenType® is a modern font format developed by Adobe® and Microsoft® to provide users with an accessible and advanced typographic toolset. OpenType improves on PostScript and TrueType just as the DVD trumped the video cassette. When deciding what format to choose, using the latest technology simply makes sense, but let’s dig a bit deeper and explore the ways OpenType makes life easier for typographers and graphic designers. OpenType is Efficient One Style = One File The PostScript format is limited to 256 characters per file. Based on Unicode, an OpenType file can contain up to 65,535 characters or glyphs. As a concrete example of the efficiency of the OpenType format, compare the multilingual PostScript version of FF Meta 1, a package of four type styles, with its OpenType successor. Narrow this example down to a single style (FF Meta Book), and we can see that the glyphs and metrics from several PostScript files are all included in one OpenType file. Mac and PC Compatible What’s Inside?
mgeraci/Less-Boilerplate .gradientV4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE); hover to see compiled code background: #e2f1cd; background-image: -moz-linear-gradient(top, #f2f1cb, #f0ced6 33%, #ced3f0 66%, #d2f0ce); background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -webkit-linear-gradient(top, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -o-linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); background-image: linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); .gradientH4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE);
The Top 8 Placeholder Services for Web Designers In the last year, there's been a wave of helpful placeholder services. What's a placeholder? Well, when you're working on a new website, isn't it a waste of time to use stock images, cropped to the right dimensions? In the last week, I've compiled a list - in no particular order - of what I consider to be the most useful and flexible placeholder services on the web. 1 - PlaceKitten A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Usage Follow the placekitten.com url with your desired dimensions. 2 - Placehold.it A quick and simple image placeholder service. Note that, with this service, you set your dimensions more traditionally, rather than separating the widths and heights into segments. Placehold.it is a bit different in that, rather than using photos for placeholders, it instead uses more traditional solid color images, which might be more appealing to some designers. 3 - SheenHolders 4 - FlickHoldr 5 - LoremPixum 6 - PlaceDog
Complete Beginner's Guide to Interaction Design Interaction design has its origins in web and graphic design, but has grown into a realm of its own. Far from merely working with text and pictures, interaction designers are now responsible for creating every element on the screen that a user might swipe, click, tap, or type: in short, the interactions of an experience. Newsletter Sign Up Original UX articles Curated Resources Never miss an issue! This article serves as a good jumping off point for people interested in learning more about Interaction Design. What is Interaction Design? Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction design began the day the first screen was designed to hold more than static copy. Interaction design has evolved to facilitate interactions between people and their environment. Common Methodologies Although interaction design spans myriad types of web and mobile applications and sites, there are certain methodologies that all designers rely on. Goal-Driven Design
Needle: Automated tests for your CSS — Needle 0.1a1 documentation Needle is a tool for testing your CSS with Selenium and nose. It checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements. Installation If you haven’t got pip installed: As root, or in a virtualenv: Getting started Create test_bbc.py in an empty directory: from needle.cases import NeedleTestCase class BBCNewsTest(NeedleTestCase): def test_masthead(self): self.driver.get(' self.assertScreenshot('#blq-mast', 'bbc-masthead') This is a test case which tells the Selenium web driver (by default Firefox) to open BBC News and check the bar across the top of the page looks correct. assertScreenshot() take two arguments: a CSS selector for the element we are capturing and a filename for the image. To create an initial screenshot of the logo, we need to run Needle in ‘baseline saving’ mode: Selecting a WebDriver