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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

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

Continue reading

Posted in Article, Syndicated | Comments Off on Rotated Table Column Headers