Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #1 from phistuck/patch-1

Added a magnifying glass shape to "The Shapes Of CSS"
  • Loading branch information...
commit a8d37d3d713e70ac2b8715dcec65026b6b2ae2a2 2 parents 2fe2962 + bf426a7
Chris Coyier chriscoyier authored
Showing with 36 additions and 0 deletions.
  1. +36 −0 index.html
36 index.html
View
@@ -603,6 +603,42 @@
</style>
</div>
+ <div class="shape">
+
+ <h2>Magnifying Glass</h2>
+
+ <div id="magnifying-glass"></div>
+
+ <style contenteditable>
+#magnifying-glass
+{
+ font-size: 10em; /* This controls the size. */
+ display: inline-block;
+ width: 0.4em;
+ height: 0.4em;
+ border: 0.1em solid red;
+ position: relative;
+ border-radius: 0.35em;
+}
+#magnifying-glass::before
+{
+ content: "";
+ display: inline-block;
+ position: absolute;
+ right: -0.25em;
+ bottom: -0.1em;
+ border-width: 0;
+ background: red;
+ width: 0.35em;
+ height: 0.08em;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+}
+ </style>
+
+ </div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.