Pages
-
Recent Posts
- Revolving Door: MPAA Hires Chief USTR Negotiator Behind ACTA And TPP’s IP Chapter
- Copyright Maximalists’ Incredible Sense Of Entitlement: If It Challenges The Biz Model We Chose, It Must Be Illegal
- Turkey’s Prime Minister Sues His Own Country Over Twitter
- Picturefill 2
- Police File On Student ‘Bullied Into Committing Suicide’ Strangely Lacking In Evidence Of Bullying
Archives
- April 2014
- March 2014
- February 2014
- January 2014
- December 2013
- November 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- April 2013
- March 2013
- February 2013
- January 2013
- December 2012
- November 2012
- October 2012
- September 2012
- August 2012
- July 2012
- June 2012
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- December 2008
- November 2008
- October 2008
Meta
Category Archives: Article
PHPHOST BLOG
Web Hosting Related Articles You May Need
Inline SVG vs Icon Fonts [CAGEMATCH]
If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts.
Let’s compare.
Icons are Vector
There are big advantages to vector icons: resizable up and down without losing quality, extra …
Inline SVG vs Icon Fonts [CAGEMATCH] is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Inline SVG vs Icon Fonts [CAGEMATCH]
Handling z-index
Managing z-index across large sites can be a pain in the butt. CSS is hard to test, so it’s notoriously easy to make a change that ends up, for instance, hiding some important UI under who-knows-where.
If you use a CSS preprocessor, maybe we can handle it in a special way.
An Idea From Game Programming
Vertical stacking order is not only a problem for web design, it’s a major issue for game developers too. They work in even …
Handling z-index is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Handling z-index
Animating SVG with CSS
There isn’t just one way to animate SVG. There is the <animate>
tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We’re going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.
I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we’re running here. My latest design around …
Animating SVG with CSS is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Animating SVG with CSS
How to Deal with Merge Conflicts in Git
The following is a guest post by by Tobias Günther. Tobias works for Tower, the Git client for Mac and authored the new (free) book Learn Version Control with Git – A step-by-step guide for the complete beginner. Tobias is going to share a bit of information about a very uncomfortable moment when using Git: the merge conflict.
Everybody has a list of things they don’t like: an appointment at the dentist, a traffic jam, or a canceled …
How to Deal with Merge Conflicts in Git is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on How to Deal with Merge Conflicts in Git
Features Are Complicated
Why can’t I edit my tweets?! Twitter should allow that.
It’s so simple right? CRUD apps (Create, Read, Update, and Delete) are app-building 101! What a gross oversight. But wait. Just as a fun nerdy little exercise, let’s think about what a feature like this might take for the Twitter team. I don’t work there or have any inside knowledge, so this is all hypothetical for the sake of understanding app development.
- Should you be able to edit any tweet
…
Features Are Complicated is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Features Are Complicated
Font Size Idea: px at the Root, rem for Components, em for Text Elements
Me, for the last year or so: “rem
‘s are so cool! I’m gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!” It was a nice dream. And it wasn’t a disaster. That’s what I’m doing right now here on CSS-Tricks and this is how it plays out in a very simple scenario:
That comes from essentially:
/* Document level adjustments */
html {
font-size: 17px;
…
Font Size Idea: px at the Root, rem for Components, em for Text Elements is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Font Size Idea: px at the Root, rem for Components, em for Text Elements
Frosting Glass with CSS Filters
The following is a guest post by Bear Travis, a Web Standards Engineer at Adobe. I’m a fan of how Adobe is pushing the web forward with new design capabilities, and doing it in a responsible way. CSS filters is a good example. They knew they were desired because Photoshop paved the way. They brought them to the web with a sensible syntax and they helped with both the spec and browser implementation. Now we’re seeing them in stable browsers, …
Frosting Glass with CSS Filters is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Frosting Glass with CSS Filters
Stripes in CSS
Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I’d document some variations in one easy to reference place.
Normal Colored Diagonal Stripes
Diagonal stripes are easy to pull off thanks to repeating-linear-gradient()
:
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
Rather than the very last color-stop being 100% (or nothing, which means 100%) it’s a fixed value. Beyond that, it just kinda …
Stripes in CSS is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Stripes in CSS
Hassle Free Responsive Images for WordPress
The following post is guest co-authored by Tim Evko (@tevkor). WordPress has a built-in media uploading system. When you upload an image, it automatically creates and saves different versions of it. Tim will show us how we can customize and exploit that ability to help us with responsive images in content.
If you’re like me, and you’re tasked with building responsive website that’s relatively easy to update, WordPress is most often the CMS you will be building that website on. …
Hassle Free Responsive Images for WordPress is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Hassle Free Responsive Images for WordPress
Rotated Table Column Headers
Say you have a table header (i.e. <th>
) of “Number of Howler Monkey Species by Country” and the data in the corresponding <td>
is like “3”. That’s an awkward mismatch of width.
Awkward
Perhaps not a huge problem for two columns, but if you had 20 that would be very hard to navigate and a poor use of space. A better use of space is to rotate the headers so that the column width can be much narrower.
Rotating …
Rotated Table Column Headers is a post from CSS-Tricks
Posted in Article, Syndicated
Comments Off on Rotated Table Column Headers