Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added a magnifying glass shape to "The Shapes Of CSS" #1

Merged
merged 1 commit into from

2 participants

@phistuck

No description provided.

@chriscoyier chriscoyier merged commit a8d37d3 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 30, 2012
  1. @phistuck
This page is out of date. Refresh to see the latest.
Showing with 36 additions and 0 deletions.
  1. +36 −0 index.html
View
36 index.html
@@ -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>
Something went wrong with that request. Please try again.