Group Design Project: List with Functions

Hey folks, let’s design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.

The Premise

The design pattern we are going to tackle is a list with functions

Avatar of Chris Coyier
Chris Coyier on

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

You …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Tuts+ Marketplace

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial …

Avatar of Chris Coyier
Chris Coyier on

htmlEntities for JavaScript

htmlentities() is a PHP function which converts special characters (like <) into their escaped/encoded values (like &lt;). This allows you to show to display the string without the browser reading it as HTML.

JavaScript doesn’t have a native version of …

Avatar of Chris Coyier
Chris Coyier on

Style Placeholder Text

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder 
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Adding Stroke to Web Text

Fonts on the web are essentially vector-based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Unzip Files

<?php
$zip = zip_open("zip.zip");
if (is_resource($zip)) {
  while ($zip_entry = zip_read($zip)) {
    $fp = fopen("zip/".zip_entry_name($zip_entry), "w");
    if (zip_entry_open($zip, $zip_entry, "r")) {
      $buf = zip_entry_read($zip_entry, zip_entry_filesize($zip_entry));
      fwrite($fp,"$buf");
      zip_entry_close($zip_entry);
      fclose($fp);
    }
  }
  zip_close($zip);
}
?>
Avatar of Chris Coyier
Chris Coyier on

Trim First/Last Characters in String

Remove last four characters
var myString = "abcdefg";
var newString = myString.substr(0, myString.length-4); 
// newString is now "abc"
Remove first two characters
var myString = "abcdefg";
var newString = myString.substr(2);
// newString is now "cdefg"
Notes

The substr function can …

Avatar of Chris Coyier
Chris Coyier on (Updated on )