February 2012
37 posts
CSSplay Dropline/Dropdown Menu
CSS Play Using css3 transitons to animate a dropline/dropdown menu with ‘current’ page options. http://j.mp/wF373o #css #cssplay
Image Magnifier with Bounce
CSS Play A simple image magnifier with a bounce animation. http://j.mp/ytMN2X #css #cssplay
The Right Move - Puzzle
CSS Play A puzzle using :target. http://j.mp/yi0rxZ #css #cssplay
CSSplay Slide/Fly menu with Image 'Bounce'
CSS Play Using css3 transitions to animate a slide/fly menu with image ‘bounce’. http://j.mp/w0nQlz #css #cssplay
CSSplay No Left Turn Maze Puzzle
CSS Play Using :target to produce a click maze puzzle. Get to the end without turnng left. http://j.mp/ycKCqO #css #cssplay
CSSplay simple rollover menu
CSS Play Using :before and :after pseudo-elements to produce a rollover menu. http://j.mp/rZ8Hts #css #cssplay
CSSplay :target dropline menu
CSS Play Using :target to produce a click open/close dropline menu. http://j.mp/tueev4 #css #cssplay
CSSplay Stretch/Droplist Menu
CSS Play Using CSS3 to animate a stretch/droplist menu. http://j.mp/tQuVf8 #css #cssplay
CSSplay :target gallery with no 'back' button...
CSS Play A :target gallery with no browser window jump and no cycling through the images when using the browser ‘back’ button. http://j.mp/vpRBKc #css #cssplay
CSSplay zoomBox Slideshow
CSS Play A permanent image slideshow using switchable sets of thumbnail images and large images with captions. http://j.mp/ukaddn #css #cssplay
My Slides from InControl 2012: What We Don’t Know
Some CSS-Tricks I know it’s weird to go through slides of a presentation outside of the context of a real talk (and pales in comparison to the experience of being there) but nonetheless, there may be bits of goodness you can extract from them.
[Slides are embedded, come to site to view them or view on SpeakerDeck]
These are my slides from InControl 2012 where I did a talk I called...
“Modern JavaScript: Develop and Design” Exists!
I am very, very happy to say that I received my printed copies of Modern JavaScript: Develop and Design on Monday evening (February 20, 2012). It’s safe to say that the book actually exists, after many, many delays, and should be available to you soon. My sincerest thanks to everyone for their interest in the book and for […] http://j.mp/xnV86F #php
I can’t design in the browser
Some CSS-Tricks Sarah Parmenter with some good honest thoughts about the popular idea of designing in the browser.
I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring.
Not that I’m that great of a designer but I feel the same way. I have to start in Photoshop to get anything decent looking. I try to get out it as soon as...
Finger-Friendly Design: Ideal Mobile Touch Target...
In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices.
(Powered by LaunchBit) http://j.mp/w4RCkK
Google Chrome: Integrierter Passwort-Manager...
Gulli News Google will in seinen Webbrowser Chrome einen Passwort-Generator einbauen. Dieser soll es Benutzern erleichtern, sichere und einzigartige Passwörter zu nutzen, wenn sie sich bei Websites anmelden. Google sieht dieses Feature als Übergangs-Lösung bis zur flächendeckenden Einführung des vom Unternehmen favorisierten Standards OpenID. http://j.mp/ztggFK #gulli
gmarik/vundle - GitHub http://ping.fm/DP0eT
ShopTalk Episode 6
Some CSS-Tricks This week Dave and I were joined by Zoey Gillenwater and we chat about print stylesheets, CSS formatting, icon fonts, spec mysteries, and much more.
Direct Link to Article — Permalink…
ShopTalk Episode 6 is a post from CSS-Tricks http://j.mp/xi5E3V #css #csstricks
BarCamp Tour 2012
Some CSS-Tricks I’ll be representin’ Wufoo at a bunch of BarCamps again this year. Super fun. We need to figure out exactly what (U.S.) cities we are going to go to this year, so if you are organizing one, hit us up at the form on the site.
Direct Link to Article — Permalink…
BarCamp Tour 2012 is a post from CSS-Tricks http://j.mp/zy76Ku #css #csstricks
Blank HTML5 Reset Templates
As I have little to no design skill, I don’t often attempt to create my own HTML design. It’s really for the best. (When I do sites for clients, I’m normally using HTML and CSS created by an actual designer.) But when I go to write a book, I have to come up with a […] http://j.mp/ylz7wx #html5
Backbone and Ember
Backbone and Ember
Posted on Feb. 15, 2012
Ember and Backbone are both promising JavaScript frameworks but have completely different philosophies. In this post, I’ll compare the two, both from a practical and philosophical perspective. I’ll defer to real world experience with Backbone and SproutCore (Ember’s predecessor), as well as basic experiments with Ember (full...
Things It Might Be Fun/Useful to Try the Universal...
Some CSS-Tricks What CSS properties might it make sense to apply to every single element on the page? We’ll take a look at some that may (or may not) be a good idea.
Things It Might Be Fun/Useful to Try the Universal (*) Selector On is a post from CSS-Tricks http://j.mp/AALdcF #css #csstricks
ShopTalk Episode 5
Some CSS-Tricks Jeffrey Way, Dave and I talk shop about some newly released projects, -webkit-gate, and our weekly staple of Q&A.
Direct Link to Article — Permalink…
ShopTalk Episode 5 is a post from CSS-Tricks http://j.mp/ykF86b #css #csstricks
TL;DR on Vendor Prefix Drama
Some CSS-Tricks Quick overview of the hot drama regarding vendor prefixes.
TL;DR on Vendor Prefix Drama is a post from CSS-Tricks http://j.mp/zFmhzU #css #csstricks
A Flexible ID Field Helps Forgetful Users Log In
Everyone forgets things from time to time. But forgetting a username on a website can keep users locked out of their account. It’s like forgetting your keys and getting locked out of your house.
(Powered by LaunchBit) http://j.mp/yV66un
Musings on Preprocessing
Some CSS-Tricks I’ve been using SASS for pretty much everything I do recently. Here’s some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax.
You Gotta Work Locally
The biggest contributor to me getting on the bandwagon was giving up my _going-commando_ live FTP editing ways. Yeah, Coda is awesome, but it’s bad...
PDF Conversion and Client-side Scraping
PDF Conversion and Client-side Scraping
Posted on Feb. 8, 2012
One of my ongoing projects is called smusique, a mobile web-based sheet music viewer. The application was designed for tablets, enabling a rich browsing experience through sheet music. Though some sheet music is encumbered by licenses, most of the classic stuff is legally available online via sheet music databases such as...
Locale-aware Date and Time Formatting in PHP 5.3
In the third edition of my “PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide” book, titled “”, I went out on a limb and used a beta version of PHP 6 when writing the book. PHP 6 was about half-way done at the time, and I didn’t want to complete the book, only […] http://j.mp/wxLs3I #php
Speech Bubble Arrows that Inherit Parent Color
Some CSS-Tricks Interesting question:
css3 speech bubble question: for the “triangle“‘s border color, how can I set it to whatever its parent div’s bgcolor is automagically?
— Jin Yang (@jzy) February 1, 2012
By “css3 speech bubble”, Jin means using a pseudo element on a container to add a little pointer arrow (triangle). Not really CSS3, but...
A proposal to drop browser vendor prefixes
Some CSS-Tricks Interesting idea by Felipe G on using a new at-rule, @-vendor-unlock, to tell the browser to use it’s experimental implementation of any particular property, rather than using a vendor prefix on that property. Unfortunately at this point, even if you could get all the browsers on board, you’d need to use this _and_ vendor prefixes to get deep support, which makes the...
Digging Into WordPress 3.3
Some CSS-Tricks Digging Into WordPress (the book) is now updated to v3.3. Includes new chapters specially on what’s new in 3.2 and 3.3, all the rest of the chapters tightened up and refreshed, better internal hyperlinking (in the PDF), and more. It’s a free update (PDF) to all previous buyers. New print copies are on order and will be available soon.
Direct Link to Article —...
ShopTalk Episode 4
Some CSS-Tricks Dave, Jonathan Longnecker, Nate Croft and I talk shop. Topics include website building apps, where to start designing, when not to design for modern browsers, and more.
Sponsored by LessAccounting.
Direct Link to Article — Permalink…
ShopTalk Episode 4 is a post from CSS-Tricks http://j.mp/z8l8XH #css #csstricks
Making Helpful Reviews Easier to Spot with...
Buying products online is never a sure thing. That’s why most users will read the reviews of a product before they buy it. However, the amount of reviews for a product can get quite large over time.
(Powered by LaunchBit) http://j.mp/A5VVzb
Star Ratings With Very Little CSS
Some CSS-Tricks Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript.
The markup uses the unicode entity for a star (☆) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use ☆ (Calculator for that kind of thing). You...
Real-World CSS
Some CSS-Tricks A very serious not at all tongue-in-cheek gallery of CSS3 techniques that poo-poos the fancy in favor of the practical.
Direct Link to Article — Permalink…
Real-World CSS is a post from CSS-Tricks http://j.mp/AcPYBW #css #csstricks
Better Box Sizing
Some CSS-Tricks Paul Irish suggests universal selector to apply border-box box-sizing to every element. I’ve been wanting to try this forever as this box model is, in my opinion, just better. Imagine elements with percentage widths and pixel padding that doesn’t result in disaster.
Direct Link to Article — Permalink…
Better Box Sizing is a post from CSS-Tricks http://j.mp/zCZgM1...
Firefox 10
Some CSS-Tricks …is now a stable release. It’s notable because it’s the first release with it’s own built in developer tools (video overview). It’s all HTML/CSS for now (not a Firebug replacement) but they are nicely designed and a great first step for a product that really should be in-house. Also, CSS 3D transforms! After you’ve upgraded, check out this demo...
Transliteration in PHP 5.4
In the third edition of my “PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide” book, titled “”, I went out on a limb and used a beta version of PHP 6 when writing the book. PHP 6 was about half-way done at the time, and I didn’t want to complete the book, only […] http://j.mp/zoCxoq #php
January 2012
40 posts
Twitter Bootstrap 2.0
Some CSS-Tricks If your web app doesn’t look or work as well as Bootstrap does out of the box, it’s time to have a pretty serious discussion with your team about why.
Direct Link to Article — Permalink…
Twitter Bootstrap 2.0 is a post from CSS-Tricks http://j.mp/zpUZ5j #css #csstricks
Why External Links Should Open in New Tabs
When most designers design websites, they don’t pay much attention to links. As long as the link works and takes users to the right page, everything is fine. However, a great user experience goes further than that.
(Powered by LaunchBit) http://j.mp/yDlpum
1000px Grid for Responsive Web Design
Some CSS-Tricks To figure out your grid width percentages for a fluid design, you start with a fixed design and divide the column widths by the container width. Elliot Jay Stocks calls for us to stop the self-torture and use 1000px for the container, so the math is super easy.
Direct Link to Article — Permalink…
1000px Grid for Responsive Web Design is a post from CSS-Tricks...
Pictos Server
Some CSS-Tricks I’ve long been convinced icon fonts are awesome, but Drew Wilson’s new service (and article I’m linking to). Think they use unsemnatic markup? Apply them via pseudo element. Worried some screen readers still read those? Not if you use aria-hidden=”true” or map them to an unused plane of unicode characters. Too heavy weight? Build your own icon font...
Responsive Design Testing Bookmarklet
Some CSS-Tricks Bookmarklet by Benjamin Keen which automates an idea by Lennart Schoors where the current page is loaded into a bunch of differently sized iframes, so when working on a large monitor, you can see what a design looks like at a bunch of different smaller sizes quickly and all at once.
Direct Link to Article — Permalink…
Responsive Design Testing Bookmarklet is a post from...
The State Of HTML5 Video, from LongTailVideo
LongTailVideo, makers of the popular JW Player (a video player for Web pages), just posted a long article titled “The State Of HTML5 Video.” I used JW Player on a couple of projects and was quite pleased with its usability and reliability. My experience was with using JW Player to present Flash video, but the […] http://j.mp/wvMKFe #html5
ShopTalk Episode 3
Some CSS-Tricks Where Dave and I are joined by Chris Eppstein. Sponsored by LessAccounting and United Pixelworkers (who are offering a 10% discount on shirts with coupon code “shoptalk”).
Direct Link to Article — Permalink…
ShopTalk Episode 3 is a post from CSS-Tricks http://j.mp/yIWZ4J #css #csstricks
Animate to an Inline Style
Some CSS-Tricks You already know that inline styles are “bad practice.” Inline styles aren’t reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn’t. There are some instances where inline styles make perfect sense. Perhaps you have an application where user’s pick their favorite color, and then you set the background of...
Custom Fonts in Emails
Some CSS-Tricks A reader writes in:
Would it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. The emails will be in HTML/CSS. My CEO is very specific about the type of aesthetic he wants to achieve, and this includes using a typeface that is not native to either Mac or...
Anonymous: Angriff via JavaScript
Gulli News Die Hacktivisten des Kollektives Anonymous benutzten für die Angriffe auf die Server des US-Justizministeriums eine modifizierte Version der Low-Orbit-Ion-Cannon (LOIC) auf JavaScript-Basis. Doch auch Unwissende beteiligten sich unfreiwillig: Der Angriff startet unmittelbar bei Besuch der Seite. Fraglich ist, inwieweit dies strafrechtlich relevant ist oder noch werden könnte....
Burst Title
Some CSS-Tricks During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn’t paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. They looked like… well they looked like this:...
Faceted Minimization: Simplifying the Sidebar...
The benefit of using a faceted sidebar navigation for your website is that you aren’t vertically constrained by space. You can list as many links in the sidebar as you need.
(Powered by LaunchBit) http://j.mp/xaasbm
CSSplay Dropline/Dropdown Menu
CSS Play Using css3 transitons to animate a dropline/dropdown menu with ‘current’ page options. http://j.mp/wF373o #css #cssplay