TL;DR on Vendor Prefix Drama
Quick overview of the hot drama regarding vendor prefixes.
TL;DR on Vendor Prefix Drama is a post from CSS-Tricks
Continue Reading "TL;DR on Vendor Prefix Drama"Musings on Preprocessing
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 habit forming. It makes it way too easy to work live instead of local1.
Working local is full …
Musings on Preprocessing is a post from CSS-Tricks
Continue Reading "Musings on Preprocessing"Speech Bubble Arrows that Inherit Parent Color
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 that’s pedantic.
Let’s say that pink color isn’t practical to set in an external CSS file. Perhaps is a user setting, or perhaps …
Speech Bubble Arrows that Inherit Parent Color is a post from CSS-Tricks
Continue Reading "Speech Bubble Arrows that Inherit Parent Color"New Poll: In The Next 10 Years, Will We See CSS Competitor?
What do you think folks? Is a new language going to come along in the next ten years that deals with layout / style / design and unseat CSS? Or at least give it a run for its money?
You should vote not based on if there will be any attempt at it, which there certainly will be and already has. But instead if you think one of those attempts will actually make it into native support by a browser …
New Poll: In The Next 10 Years, Will We See CSS Competitor? is a post from CSS-Tricks
Continue Reading "New Poll: In The Next 10 Years, Will We See CSS Competitor?"Star Ratings With Very Little CSS
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 could use as many stars …
Star Ratings With Very Little CSS is a post from CSS-Tricks
Continue Reading "Star Ratings With Very Little CSS"Star Ratings With Very Little CSS
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 could use as many stars …
Star Ratings With Very Little CSS is a post from CSS-Tricks
Continue Reading "Star Ratings With Very Little CSS"Poll Results: Internet Connection Speed
In this latest poll, I asked people to test their own internet connection speed then vote in the poll based on their result. The speed choices ranged from (what I would consider) blazingly fast, to mediocre, to nearly unusably slow. I would have guessed a bell curve, with most people having mediocre speeds and just a few on the edges of extreme fast/slow. We didn’t get that at all.
The results show a pretty even distribution across all the …
Poll Results: Internet Connection Speed is a post from CSS-Tricks
Continue Reading "Poll Results: Internet Connection Speed"Animate to an Inline Style
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 the body to that. Using an inline style in that case is actually more efficient than external CSS, since it’s specific to one …
Animate to an Inline Style is a post from CSS-Tricks
Continue Reading "Animate to an Inline Style"Custom Fonts in Emails
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 Windows computers. We do not want …
Custom Fonts in Emails is a post from CSS-Tricks
Continue Reading "Custom Fonts in Emails"Burst Title
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:
Turns out you can do it …
Burst Title is a post from CSS-Tricks
Continue Reading "Burst Title"SpriteRight Giveaway
There is a new Mac app called SpriteRight for doing CSS sprites that is pretty darn nice. I’m a fan of both SpriteCow (beautiful interface, design your own sprite) and SpriteMe (automatic combining of sprites, gives you real CSS). I feel like SpriteRight hits the nail on the head by combining the best features of both of these tools, doing it better, and doing more.
Here’s their intro video:
It’s normally $9.99, on sale for $4.99, but if you want …
SpriteRight Giveaway is a post from CSS-Tricks
Continue Reading "SpriteRight Giveaway"YouTube Popup Buttons
There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button pops up, eager to be clicked.
Default state
:hover / :focus state
:active state
I think this design works well in the context of YouTube’s footer. 1) The default state is very subdued, meaning these buttons aren’t competing for attention …
YouTube Popup Buttons is a post from CSS-Tricks
Continue Reading "YouTube Popup Buttons"Responsive Data Table Roundup
There has been a bunch of takes on responsive data tables since I first published about it.
The idea of the original was to abandon the grid layout of the table and make each cell it’s own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. It’s easier to browse the data without losing context of what’s what. The …
Responsive Data Table Roundup is a post from CSS-Tricks
Continue Reading "Responsive Data Table Roundup"(Better) Tabs with Round Out Borders
A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images.
(Better) Tabs with Round Out Borders is a post from CSS-Tricks
Continue Reading "(Better) Tabs with Round Out Borders"ShopTalk
New thing! Dave Rupert and I are going to be doing a podcast called ShopTalk (@ShopTalkShow).
It’s going to be a weekly show on (mostly) Thursdays at 10am Pacific / 1pm Eastern. Variations to that will be noted at the site. You’ll be able to listen live if you’d like, otherwise subscribe on iTunes and listen to it anytime.
Similar to CarTalk, our plan is to have the meat of the show be audience question based. We …
ShopTalk is a post from CSS-Tricks
Continue Reading "ShopTalk"Upcoming Speaking
My first half of 2012 is sprinkled with some web conferences I’m very much looking forward to.
February 20-21, Orlando, Florida – InControl
March 9-13, Austin, Texas – SXSW Interactive
April 26-27, Warsaw, Poland – Front-Trends
April 30 – May 4, Las Vegas, Nevada – Future Insights Live
June 6-7, Vancouver, Canada – Interlink Conference
Without giving away too much, my talk will be based around some quick thoughts I posted as What We Don’t …
Upcoming Speaking is a post from CSS-Tricks
Continue Reading "Upcoming Speaking"Looking to Hire Someone for Web Work?
The very first thing you should do is start writing. Just open a text file and define exactly who your ideal hire is. What they are like, what they hopefully know, what you’ll need from them, and what you can offer them.
Then find somewhere to post it online. Probably your own website for one. Blogs are great for that. Or get more aggressive and do an in-app notification about it. There is no excuse not to have somewhere to …
Looking to Hire Someone for Web Work? is a post from CSS-Tricks
Continue Reading "Looking to Hire Someone for Web Work?"Public Service Announcement: Watch Your @font-face font-weight
Many (especially decorative) web fonts come only in a few selected weights and styles. It’s smart to load as few as possible since they can be quite heavy, but also make sure you only use them in the weights/styles you load otherwise the browser will fake it for you and muddy it up.
Public Service Announcement: Watch Your @font-face font-weight is a post from CSS-Tricks
Continue Reading "Public Service Announcement: Watch Your @font-face font-weight"Get Value of CSS Rotation through JavaScript
In which we get the rotate value in degrees from a CSS rotation transform.
Get Value of CSS Rotation through JavaScript is a post from CSS-Tricks
Continue Reading "Get Value of CSS Rotation through JavaScript"Thank You (2011 Edition)
Hey folks! It’s that time of year again where I write a post to say thanks to every person visiting this site. CSS-Tricks is part of my career, so just by virtue of you visiting this site directly helps me.
Like families often send holiday letters to their relatives with a review of their year and the notable things family members have done, I like to write this blog post and review the year at CSS-Tricks through the numbers. (See …
Thank You (2011 Edition) is a post from CSS-Tricks
Continue Reading "Thank You (2011 Edition)"