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
Source: CSS-Tricks
Outsourcing your IT functions may appear to make good sense, but beware of certain side effects that could negate the benefits.
Source: 10 Things Blog | TechRepublic
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 user and one element.
Now let’s say you want to animate to a value set in an inline style. Say you want to animate a progress bar. You start at zero, and need to go up to any arbitrary value. Perhaps a call to the server tells you how complete an upload is and you set the value from that.
In a post I did nearly a year ago, I lamented that you can’t animate to an inline style. You can’t declare a keyframe in inline styles and you don’t know what final value to animate to in the external CSS. Alas I was wrong, as I didn’t know about this bonafide little CSS trick.
Here’s the trick: just omit the to or 100% declaration from the @keyframe:
@-webkit-keyframes progress-bar { 0% { width: 0; } } @-moz-keyframes progress-bar { 0% { width: 0; } }Then you call the animation on the progress bar:
.progress-bar > div { -webkit-animation: progress-bar 2s; -moz-animation: progress-bar 2s; }And just like that, the progress bar will animate itself up to the value set by the inline style.
Here’s a Dabblet if you wanna mess with it.
Special thanks to Michael Paryna who emailed me about this and got me to give it a try.
Animate to an Inline Style is a post from CSS-Tricks
Source: CSS-Tricks
As Android has evolved, its apps have improved and proliferated. Jack Wallen has created a new list of apps you’ll want to install on your tablet or phone.
Source: 10 Things Blog | TechRepublic
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 to use images in our email.
First off, it’s pretty cool your CEO cares about type and aesthetics at all. It’s usually a good thing to have the person steering the ship care about beauty and details down to that level. Let’s consider the options.
The first thing that comes to mind in custom fonts these days is @font-face. The browser support for it is pretty darn good. Unfortunately, browser support isn’t what we need here, it’s email client support. According to some research by Campaign Monitor, @font-face is only working Apple’s Mail.app and the Mail app on iOS. You could try to make the progressive enhancement case to your CEO, but at that low level of support might be a tough sell.
Another thing you mentioned was trying to recreate the font through CSS somehow. Maybe something like this. I’ve even played around with this concept a little bit specifically with the idea of image-free emails in mind. This is the realm of big-pixel-art though. Recreating a font pixel by pixel with no anti-aliasing, as you are surely aware, is a fool’s errand.
In reality I think there are two solutions.
The first is to reconsider this sentence: “We do not want to use images in our email.” Why not? It seems like you are OK with sending HTML emails since you’re specifically looking for clever solutions and text emails are capable of very little cleverness short of ASCII art. People use images in emails all the time. Admittedly, the fact users often have to specifically choose to view them is a bit of a turn off, but using proper ALT text on the images makes the email still work even if they never do that.
The second is to give up on this custom font in email thing. Not to sound defeatist here, but your branding will not be ruined by the lack of a specific typeface in an email. Anywhere where you all agree it is critical (e.g. a slogan?), use an image, otherwise, use a nice readable font that works OK in pairing with your brand typeface and move on with more important tasks.
Personally, I think I’d go with @font-face despite the current low support. Actively developing what you want to work helps build the desire momentum needed to get product vendors (in this case email clients) to improve their products and give us better CSS support.
Custom Fonts in Emails is a post from CSS-Tricks
Source: CSS-Tricks
Quick: Throw out last year’s list of must-learn dev skills — it’s already obsolete. This new list will help you rethink your skill set to avoid falling behind.
Source: 10 Things Blog | TechRepublic
currentColor keyword, which computes on the element specified and then inherits, instead of inheriting as a keyword and then recomputing on each element. This is okay for non-inheriting properties like border-color, but doesn’t work for properties that inherit, like text-emphasis-color. (It effectively defaults the property to the color of the root element.) Tab to investigate whether SVG depends on this behavior or if we can change it. Source: CSS WG Blog
We may not know exactly what’s going to happen in the tech world this year — but a lot of you have strong opinions about what WON’T be happening.
Source: 10 Things Blog | TechRepublic
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 rather semantically. Just a header tag with an anchor link inside. Admittedly, it would be cool to do it with just the header tag but I wasn’t able to figure out a way to get the layers all right with the text on top without the extra element.
CSS-Tricks
h1 { text-align: center; color: white; text-transform: uppercase; padding: 1px; font-family: 'Raleway', cursive; font-weight: 100; position: relative; background: -webkit-linear-gradient(left, black, #eee, black); background: -moz-linear-gradient(left, black, #eee, black); background: -ms-linear-gradient(left, black, #eee, black); background: -o-linear-gradient(left, black, #eee, black); } h1:before { content: ""; position: absolute; left: 50%; top: -50px; width: 600px; margin-left: -300px; margin-top: -220px; height: 600px; background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #444, black); background: -moz-radial-gradient(50% 50%, ellipse closest-side, #444, black); background: -ms-radial-gradient(50% 50%, ellipse closest-side, #444, black); background: -o-radial-gradient(50% 50%, ellipse closest-side, #444, black); z-index: -1; } h1 a { background: black; display: block; padding: 20px; text-decoration: none; letter-spacing: 30px; color: white; }I listed out all the vendor prefixes here because using them is required in “real” usage and I worry about people copying and pasting pseudo code. But if you want to play around with this and don’t want to deal with all that, the Dabblet demo doesn’t need them as it uses Prefix Free.
I also added some animations to the demo just for fun.
Burst Title is a post from CSS-Tricks
Source: CSS-Tricks
If you really want to see your IT career take off, make sure you don’t get derailed by these common mistakes.
Source: 10 Things Blog | TechRepublic