Permalink
Browse files

Initial Commit

  • Loading branch information...
komputerwiz committed May 2, 2012
1 parent 5a05c6f commit dd322c09c7783cbe7941cbe5d223e5492e3533e8
View
@@ -1,4 +1,53 @@
-css3-breadcrumbs
+CSS3 Breadcrumbs
================
+This is my humble contribution to the general movement to make image-based web
+page layouts obsolete in favor of semantic HTML and CSS3 styling.
-CSS3-only Breadcrumb Navigation
+Download & Use
+------------------
+Clone this repository with
+
+ git clone git://github.com/komputerwiz/css3-breadcrumbs.git
+
+There are three usage options
+
+1. Copy [`css/breadcrumbs.css`][breadcrumb-css] and include it in your
+ layout.
+
+2. Copy [`css/breadcrumbs-slim.css`][breadcrumb-slim], modify it to include
+ any necessary browser prefixes (needed for declarations separated by blank
+ line), and use that in your theme.
+
+3. Use the files under `scss` to build your own distribution using the
+ [SASS Stylesheet Language][sass].
+
+Demo
+----
+[See this code in action!][demo]
+
+File Manifest
+-------------
+* `index.html`: Sample markup for your breadcrumbs.
+* `css/breadcrumbs-slim.css`: The minimum required CSS to get the basic styling.
+ This file does not have any vendor prefixes and will probably not display well
+ in all web browsers. Please modify to fit your needs.
+* `css/breadcrumbs.css`: A plug-and-play CSS stylesheet with hover and click
+ states.
+* `css/demo.css`: Stylesheet for [demo web page][demo].
+* `scss/breadcrumbs.css`: All of the logic used to build the `breadcrumbs.css`
+ file. This might be a little easier to understand.
+* `scss/_*.scss`: other libraries that you might find useful. Credit to
+ [Adam Savitzky][adambom-sass-math] for the _Sass-Math_ functions: it brought
+ to mind several good memories of Sequences and Series from my Calculus 2
+ course!
+
+License
+-------
+Apart from _Sass-Math_, this is my own work, which I hereby release to the
+public domain. Feel free to do whatever you want with this code. Enjoy!
+
+[breadcrumb-css]: https://github.com/komputerwiz/css3-breadcrumbs/blob/master/css/breadcrumbs.css
+[breadcrumb-slim]: https://github.com/komputerwiz/css3-breadcrumbs/blob/master/css/breadcrumbs-slim.css
+[sass]: http://sass-lang.com "Syntactically Awesome StyleSheets"
+[demo]: http://komputerwiz.net/demos/css3-breadcrumbs/
+[adambom-sass-math]: https://github.com/adambom/Sass-Math/blob/master/math.scss
View
@@ -0,0 +1,73 @@
+.breadcrumbs {
+ display: inline-block;
+ border: 1px solid #999;
+ font-family: "Lucida Grande";
+ font-size: 13px;
+
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+ background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+}
+
+.breadcrumbs:after {
+ content: '';
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+.breadcrumbs ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+.breadcrumbs ul li {
+ list-style: none;
+ float: left;
+}
+
+.breadcrumbs ul li:first-child a, .breadcrumbs ul li:first-child span {
+ padding-left: 1em;
+
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+
+.breadcrumbs a, .breadcrumbs span {
+ color: #444;
+ display: block;
+ float: left;
+ position: relative;
+ line-height: 2em;
+ padding: 0 1em 0 1.5em;
+ text-decoration: none;
+
+ background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+}
+
+.breadcrumbs a:after, .breadcrumbs span:after {
+ content: '';
+ display: block;
+ z-index: 1;
+ height: 2em;
+ width: 2em;
+ border-right: 2px solid #999;
+ border-top: 2px solid #999;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ box-sizing: border-box;
+ background: linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
+ transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg); /* 1/sqrt(3) = 0.5774 */
+}
+
+.breadcrumbs .current {
+ color: #777;
+}
+
+.breadcrumbs .current:after {
+ content: normal;
+}
View
@@ -0,0 +1,188 @@
+.breadcrumbs {
+ display: inline-block;
+ border: 1px solid #999;
+ font-family: "Lucida Grande";
+ font-size: 13px;
+
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ -ms-border-radius: 4px;
+ -o-border-radius: 4px;
+ border-radius: 4px;
+
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+
+ background: #e1e1e1;
+ background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -o-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+}
+
+.breadcrumbs:after {
+ content: '';
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+* html .breadcrumbs {
+ zoom: 1;
+}
+
+*:first-child + html .breadcrumbs {
+ zoom: 1;
+}
+
+.breadcrumbs ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+.breadcrumbs ul li {
+ list-style: none;
+ float: left;
+}
+
+.breadcrumbs ul li:first-child a, .breadcrumbs ul li:first-child span {
+ padding-left: 1em;
+
+ -webkit-border-top-left-radius: 4px;
+ -moz-border-radius-topleft: 4px;
+ border-top-left-radius: 4px;
+
+ -webkit-border-bottom-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ border-bottom-left-radius: 4px;
+}
+
+.breadcrumbs a, .breadcrumbs span {
+ color: #444;
+ display: block;
+ float: left;
+ position: relative;
+ line-height: 2em;
+ padding: 0 1em 0 1.5em;
+ text-decoration: none;
+
+ background: #e1e1e1;
+ background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -o-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+ background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%);
+}
+
+.breadcrumbs a:after, .breadcrumbs span:after {
+ content: '';
+ display: block;
+ z-index: 1;
+ height: 2em;
+ width: 2em;
+ border-right: 2px solid #999;
+ border-top: 2px solid #999;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+
+ background: #e1e1e1;
+ background: -webkit-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -moz-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -ms-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
+ background: -o-linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
+ background: linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%);
+
+ -webkit-transform: translateX(1em) rotate(45deg) scale(0.577) skew(15deg, 15deg);
+ -moz-transform: translateX(1em) rotate(45deg) scale(0.577) skew(15deg, 15deg);
+ -ms-transform: translateX(1em) rotate(45deg) scale(0.577) skew(15deg, 15deg);
+ -o-transform: translateX(1em) rotate(45deg) scale(0.577) skew(15deg, 15deg);
+ transform: translateX(1em) rotate(45deg) scale(0.577) skew(15deg, 15deg);
+}
+
+.breadcrumbs a:hover, .breadcrumbs span:hover {
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+
+ background: #7f7fdd;
+ background: -webkit-linear-gradient(top, #99e 0%, #66c 100%);
+ background: -moz-linear-gradient(top, #99e 0%, #66c 100%);
+ background: -ms-linear-gradient(top, #99e 0%, #66c 100%);
+ background: -o-linear-gradient(top, #99e 0%, #66c 100%);
+ background: linear-gradient(top, #99e 0%, #66c 100%);
+}
+
+.breadcrumbs a:hover:after, .breadcrumbs span:hover:after {
+ border-color: #777;
+
+ background: #7f7fdd;
+ background: -webkit-linear-gradient(left top, #99e 0%, #66c 100%);
+ background: -moz-linear-gradient(left top, #99e 0%, #66c 100%);
+ background: -ms-linear-gradient(left top, #99e 0%, #66c 100%);
+ background: -o-linear-gradient(left top, #99e 0%, #66c 100%);
+ background: linear-gradient(left top, #99e 0%, #66c 100%);
+}
+
+.breadcrumbs a:active, .breadcrumbs span:active {
+ background: #6161c8;
+ background: -webkit-linear-gradient(top, #7676de 0%, #4d4db3 100%);
+ background: -moz-linear-gradient(top, #7676de 0%, #4d4db3 100%);
+ background: -ms-linear-gradient(top, #7676de 0%, #4d4db3 100%);
+ background: -o-linear-gradient(top, #7676de 0%, #4d4db3 100%);
+ background: linear-gradient(top, #7676de 0%, #4d4db3 100%);
+
+ -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+ -ms-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+ -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+ box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+}
+
+.breadcrumbs a:active:after, .breadcrumbs span:active:after {
+ background: #6161c8;
+ background: -webkit-linear-gradient(left top, #7676de 0%, #4d4db3 100%);
+ background: -moz-linear-gradient(left top, #7676de 0%, #4d4db3 100%);
+ background: -ms-linear-gradient(left top, #7676de 0%, #4d4db3 100%);
+ background: -o-linear-gradient(left top, #7676de 0%, #4d4db3 100%);
+ background: linear-gradient(left top, #7676de 0%, #4d4db3 100%);
+
+ -webkit-box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.5);
+ -ms-box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.5);
+ -o-box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.5);
+ box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.5);
+}
+
+.breadcrumbs .current, .breadcrumbs .current:hover, .breadcrumbs .current:active {
+ background: inherit;
+ color: #666;
+ text-shadow: none;
+
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ -ms-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
+}
+
+.breadcrumbs .current:after, .breadcrumbs .current:hover:after, .breadcrumbs .current:active:after {
+ content: normal;
+
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ -ms-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
+}
View
@@ -0,0 +1,50 @@
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: 300;
+ font-size: 16px;
+ margin: 0;
+ padding: 20px;
+}
+
+article {
+ margin: 2em 0;
+}
+
+figure {
+ border: 1px solid #aaa;
+ padding: 10px 10px 30px 10px;
+ display: block;
+ margin: 1em auto;
+ width: 522px;
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+
+ -webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.5);
+ -moz-box-shadow: 0 5px 30px rgba(0,0,0,0.5);
+ -ms-box-shadow: 0 5px 30px rgba(0,0,0,0.5);
+ -o-box-shadow: 0 5px 30px rgba(0,0,0,0.5);
+ box-shadow: 0 5px 30px rgba(0,0,0,0.5);
+}
+
+figure img {
+ border: 1px solid #ccc;
+ padding: 10px;
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -ms-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+}
+
+figure figcaption {
+ color: #999;
+ display: block;
+ text-align: right;
+ font-style: italic;
+ font-size: 0.8em;
+}
Binary file not shown.
Oops, something went wrong.

0 comments on commit dd322c0

Please sign in to comment.