Making a jQuery Countdown Timer Martin Angelov When building a coming soon or event page, you find yourself in search for a good way to display the remaining time. A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter. Today we are going to build a neat jQuery plugin for displaying a countdown timer. Let’s start with the markup! The HTML We will give the plugin the creative name of “countdown”. Generated markup In the above example, the plugin has been originally called on a div with an id of countdown. Inside is the markup for the digits. The static class of the digits gives them their gradient background and box-shadow. A jQuery Countdown Timer The .countDiv spans are the dividers between the units. But how is this markup generated exactly? The jQuery First let’s write two helper functions used by the plugin: init generates the markup you saw above;switchDigit takes a .position span and animates the digits inside it; assets/countdown/jquery.countdown.js Great!
Toast • The no-nonsense CSS grid Unprecedented Control Twelve columns. Six columns. Nine columns. As many columns as you want, in as many combinations as you want. $col-groups: (12, 6, 9); Fixed width gutters No fluid gutter width bullcrap. $gutter-width: 20px; Easy to use, hard to break It takes just a few lines of code to start using Toast. <div class="grid"><div class="grid__col grid__col--3-of-5 grid__col--centered"><p>Centered columns? Limitless* possibilities Nested grids, custom namespaces, simple switches for features like pulls and pushes, responsive layouts, and more. View on GitHub Download Quickstart CSS
Introducing the CSS Grid Layout spec | CSS3 For over half of my career on the web, frontend development involved a lot of creating images in Photoshop, then chopping them up and using markup to construct the design in a browser. Thankfully, CSS has evolved to a level at which we don't need to do much of that any more. Creating rounded corners, gradients and even animations are now possible just using CSS. One area of CSS hasn't evolved quite so quickly: CSS for layout. What is CSS Grid Layout? CSS Grid Layout is a specification for creating two-dimensional grids. Grid is a companion to the Flexible Box Module (flexbox). Creating a Grid To create a grid, we need to use the grid or inline-grid value of the display property, and then set up rows and columns. I then create a grid with CSS: The grid has five equal-width columns and three auto-size rows. grid-template-columns: 1fr 1fr 1fr 1fr 1fr; All the immediate child elements of .grid are now able to be positioned on the grid. Positioning by line numbers Positioning by template areas
Circular, Responsive jQuery Carousel - CarouFredSel Easy Carousels in jQuery & WordPress Carousels in WordPress just got a thousand times better. carouFredSel takes the awesome power of the carouFredSel jQuery plugin and integrates it into WordPress so you can create unlimited carousels in your WordPress site without touching any code. Simply upload your images, drag and drop re-order them, add some captions and you’re good to go. Simple or Advanced Configuration carouFredSel comes with three configurations modes, “Basic” mode where you can choose some of our built in layout styles and keep things uber simple, “Advanced” mode or “Super User” mode where you can literally edit the configuration like you would when using the jQuery plugin for ultimate control and flexibility. Usual Awesomeness Built In Not only do you get the amazing features above, but you get all the other awesome features that we bake in to our WordPress plugins to make the experience as ninja as possible. Free to Use & Abuse Media Manager Plus Integration
Animated SVG vs GIF [CAGEMATCH] SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. Logos, non-complex, vector-based illustrations, user interface controls, infographics, and icons. Of course, if you have an image that is better suited for the raster format—such as a photograph or a very complex vector illustration (that would normally have a very big size as an SVG), then you should use a raster image format instead. Not only should the image be a good candidate for SVG, but SVG should also be a good candidate for the image. Generally speaking, the images listed above are usually perfect candidates for SVG. However, last week, a link popped up in my Twitter timeline that linked to a set of icons that are animated as GIFs. So, here is why I think you should use SVG instead of GIFs whenever you can.
jQuery UI CSSBakery: CSS Drop Caps Iwas reading an article in a magazine the other day where they had a large, bold, Arial type plain Sans Serif capital letter replace the first letter of the paragraph. This simple change added style and focus to the document. I had seen dropcaps before of course, including those intricate looking ones drawn in gold and ready to make a grand entrance, but this was the first time that a dropcap had grabbed my attention and piqued my interest. Ever since then, I've been working in Photoshop to come up with some unique dropcaps like the one that I used in this paragraph. As I show you how I built the drop cap classes, you will become more familiar with CSS Sprites, attribute selectors, text indentation, floats, CSS background property and how backgrounds interact with padding. Drop caps are large letters with a bit of dramatic flair that start a paragraph with the paragraph text flowing around them. <p><span class="dropcap">D</span>rop caps are large letters... Don't like floats that much?
CSS Selectors and Pseudo Selectors and browser support This page has not been updated for some time and some of the browser versions are obsolete - I'm working on a better format for the page, so check back every now and then :) The following is a range of CSS tests of the most common browsers' support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you spot any errors (it happens to us all...) or have any comments, I'm on Twitter as @overflowhidden. Click here to see this page's history. :hover only works for a-elements in IE6. History (not complete): 2011.04.13: I've discovered a bug in Google Chrome regarding the adjacent selectors and created a test page to demonstrate the problem. 2010.03.18: Opera 10b3 replaced with Opera 10.5 beta.