---
title: Create Document Icon with CSS3
description: >-
  Learn how to create beautiful document icon with CSS3. Icons with purely CSS3. This technique uses
  benefits of CSS3 :after and :before pseudo elements.
url: https://expiredqueues.com/css3-document-icon/
date: '2011-09-16T08:23:31.000Z'
image: https://expiredqueues.com/images/og/css3-document-icon-b52fc721.jpg
---

Written in September 2011. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

Tutorials posts css3

# Create Document Icon with CSS3

16 September 2011 By Adrian 1 min read

Nowadays I'm working more on mobile web apps. I have encountered many challenging works which I have accomplished with CSS3. Today I am gonna share a nice trick, how you can create a document icon with pure [CSS3](https://expiredqueues.com/) only. I am using a single HTML element \<a> (you can use your preferred one) to create this icon.

### Original link.

**Now this post is exclusively available on [Nettuts](http://net.tutsplus.com/tutorials/html-css-techniques/create-a-document-icon-with-css3/).**

![Final CSS3 Document Icon](https://expiredqueues.com/images/opt/CSS3-Document-Icon-320.jpeg)

### Similar posts

- [CSS Icons for Better Web - Part I](https://expiredqueues.com/css-icons-for-better-web/)

[Previously Must read books for Web Designers/Front End Developers in 2011](https://expiredqueues.com/web-designers-developers-books-2011/) [Next How to remove links dotted border in IE7?](https://expiredqueues.com/remove-dotted-border-in-ie7/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Create Document Icon with CSS3",
  "datePublished": "2011-09-16T08:23:31.000Z",
  "dateModified": "2011-09-16T08:23:31.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/css3-document-icon/",
  "image": "https://expiredqueues.com/images/2011/CSS3-Document-Icon.png",
  "keywords": "posts, css3, icons",
  "articleSection": "Tutorials"
}
```