Todd Rumball trumball
trumball
/ Fancy Ampersand
Created
May 24, 2013 14:17
Fancy Ampersand
This class would be applied to one span element wrapped around your ampersand character in page content. It will apply some classic serif fonts and use italics to enhance the ampersand symbol.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .amp { | |
| font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; | |
| font-style: italic; | |
| font-weight: normal; | |
| } |
trumball
/ Drop-Cap Paragraphs
Created
May 24, 2013 15:21
Drop-Cap Paragraphs
Typically you’ll notice dropped capitals appear in printed mediums, such as newspapers and books. However this can also be a neat effect in webpages or blogs where there is enough extra room in the layout. This CSS rule is targeting all paragraphs but you may limit this based on a single class or ID.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| p:first-letter{ | |
| display: block; | |
| margin: 5px 0 0 5px; | |
| float: left; | |
| color: #ff3366; | |
| font-size: 5.4em; | |
| font-family: Georgia, Times New Roman, serif; | |
| } |
trumball
/ Inner CSS3 Box Shadow
Created
May 24, 2013 16:59
Inner CSS3 Box Shadow
The box shadow property has offered immense changes into how we build websites. You can portray box shadows on nearly any element, and they all generally look great. This piece of code will force inner shadows which is a lot harder to design around, but in the right cases it looks pristine.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #mydiv { | |
| -moz-box-shadow: inset 2px 0 4px #000; | |
| -webkit-box-shadow: inset 2px 0 4px #000; | |
| box-shadow: inset 2px 0 4px #000; | |
| } |
trumball
/ Outer CSS3 Box Shadow
Created
May 24, 2013 17:00
Outer CSS3 Box Shadow
In relation to the inner CSS3 shadows I also want to present an outer shadow code snippet. Note the 3rd number in our syntax represents blur distance while the 4th number represents the spread.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #mydiv { | |
| -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); | |
| -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); | |
| box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); | |
| } |
trumball
/ Triangular List Bullets
Created
May 24, 2013 17:00
Triangular List Bullets
Believe it or not it is actually possible to generate triangle-shaped bullets solely in CSS3. This is a really cool technique which does look awesome in respected browsers. The only potential issue is a major lack of support for fallback methods.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ul { | |
| margin: 0.75em 0; | |
| padding: 0 1em; | |
| list-style: none; | |
| } | |
| li:before { | |
| content: ""; | |
| border-color: transparent #111; | |
| border-style: solid; | |
| border-width: 0.35em 0 0.35em 0.45em; |
trumball
/ Centered Layout Fixed Width
Created
May 24, 2013 17:01
Centered Layout Fixed Width
I know earlier it was mentioned how to setup horizontal positioning. I want to jump back in with this quick snippet for horizontal positioning, which is perfect to be used on fixed-width layouts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #page-wrap { | |
| width: 800px; | |
| margin: 0 auto; | |
| } |
trumball
/ CSS3 Column Text
Created
May 24, 2013 17:03
CSS3 Column Text
CSS3 columns would be nice to see in website layouts, but the reality is how we can split up text based on column styles. Use this snippet to place any number of columns inline with your paragraphs, where text will split evenly based on your column number.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #columns-3 { | |
| text-align: justify; | |
| -moz-column-count: 3; | |
| -moz-column-gap: 12px; | |
| -moz-column-rule: 1px solid #c4c8cc; | |
| -webkit-column-count: 3; | |
| -webkit-column-gap: 12px; | |
| -webkit-column-rule: 1px solid #c4c8cc; | |
| } |
trumball
/ CSS Fixed Footer
Created
May 24, 2013 17:03
CSS Fixed Footer
This is actually a lot more useful than it sounds, but appending a fixed footer into your website is quite simple. These footers will scroll with the user and may contain helpful information about your site or unique contact details. Ideally this would only be implemented in cases where it truly adds value to the user interface.
trumball
/ Transparent PNG Fix For IE6
Created
May 24, 2013 17:04
Transparent PNG Fix For IE6
Using transparent images inside websites has become a very common practice. This started with gif images, but has evolved into alpha-transparent PNGs. Unfortunately older legacy versions of Internet Explorer have never supported the transparency. Adding this brief CSS snippet should clear up the problem.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .bg { | |
| width:200px; | |
| height:100px; | |
| background: url(/folder/yourimage.png) no-repeat; | |
| _background:none; | |
| _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop'); | |
| } | |
| /* 1px gif method */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #container { | |
| min-height: 550px; | |
| height: auto !important; | |
| height: 550px; | |
| } |