Todd Rumball trumball
trumball
/ CSS3 Glowing Inputs
Created
May 24, 2013 19:37
CSS3 Glowing Inputs
I really enjoy this basic custom CSS3 class because of how it overwrites the default browser behavior. Users of Chrome & Safari know about annoying input outlines in forms. Adding these properties into your stylesheet will setup a whole new design for basic input elements.
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
| input[type=text], textarea { | |
| -webkit-transition: all 0.30s ease-in-out; | |
| -moz-transition: all 0.30s ease-in-out; | |
| -ms-transition: all 0.30s ease-in-out; | |
| -o-transition: all 0.30s ease-in-out; | |
| outline: none; | |
| padding: 3px 0px 3px 3px; | |
| margin: 5px 1px 3px 0px; | |
| border: 1px solid #ddd; | |
| } |
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
| /* external links */ | |
| a[href^="http://"] { | |
| padding-right: 13px; | |
| background: url('external.gif') no-repeat center right; | |
| } | |
| /* emails */ | |
| a[href^="mailto:"] { | |
| padding-right: 20px; | |
| background: url('email.png') no-repeat center right; |
trumball
/ Force Code Wraps
Created
May 24, 2013 19:38
Force Code Wraps
The typical pre tags are used in layouts to display large chunks of code. This is preformatted text like you would find inside Notepad or Textedit, except you’ll often notice long lines produce horizontal scrollbars. This block of CSS will force all pre tags to wrap code instead of breaking outside the container.
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
| pre { | |
| white-space: pre-wrap; /* css-3 */ | |
| white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ | |
| white-space: -pre-wrap; /* Opera 4-6 */ | |
| white-space: -o-pre-wrap; /* Opera 7 */ | |
| word-wrap: break-word; /* Internet Explorer 5.5+ */ | |
| } |
trumball
/ Force Hand Cursor Over Clickable Items
Created
May 24, 2013 19:39
Force Hand Cursor Over Clickable Items
There are lots of default clickable HTML elements which do not always display the hand pointer icon. Using this set of CSS selectors you may force the pointer over a number of key elements, along with any other objects using the class .pointer.
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
| a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { | |
| cursor: pointer; | |
| } |
trumball
/ Webpage Top Box Shadow
Created
May 24, 2013 19:40
Webpage Top Box Shadow
Developers may not find a great use for this other than some pleasing aesthetics. But I really enjoy this effect and it’s definitely something unique! Simply append this CSS code targeting your body element to display a dark drop shadow fading down from the top of your webpage.
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
| body:before { | |
| content: ""; | |
| position: fixed; | |
| top: -10px; | |
| left: 0; | |
| width: 100%; | |
| height: 10px; | |
| -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); | |
| -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); |
trumball
/ CSS3 Speech Bubble
Created
May 24, 2013 19:41
CSS3 Speech Bubble
Numerous user interface purposes come to mind when discussing speech bubbles. These could be handy in discussion comments, or creating bulletin boards, or displaying quoted text. Simply add the following classes into your stylesheet and you can find related HTML codes from this CSS3 snippets post.
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
| .chat-bubble { | |
| background-color: #ededed; | |
| border: 2px solid #666; | |
| font-size: 35px; | |
| line-height: 1.3em; | |
| margin: 10px auto; | |
| padding: 10px; | |
| position: relative; | |
| text-align: center; | |
| width: 300px; |
trumball
/ Default H1-H5 Headers
Created
May 24, 2013 19:41
Default H1-H5 Headers
I have offered lots of common syntax including browser CSS resets and a few HTML element resets. This template includes default styles for all major heading elements ranging from H1-H5. You may also consider adding H6 but I have never seen a website using all six nested headers.
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
| h1,h2,h3,h4,h5{ | |
| color: #005a9c; | |
| } | |
| h1{ | |
| font-size: 2.6em; | |
| line-height: 2.45em; | |
| } | |
| h2{ | |
| font-size: 2.1em; | |
| line-height: 1.9em; |
trumball
/ Pure CSS Background Noise
Created
May 24, 2013 19:42
Pure CSS Background Noise
Designers have seen this effect added into websites for a long time, although they generally use repeating tile images with alpha-transparency. However we can embed Base64 code into CSS to generate brand new images. This is the case as in the snippet above which generates a small noise texture above the body background,…
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
| body { | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCb |
trumball
/ Continued List Ordering
Created
May 24, 2013 19:43
Continued List Ordering
I feel this may not be an extremely popular snippet, but it does have its market among developers. There may be situations where you’ll need to continue a list of items but split into two separate UL elements. Check out the code above for an awesome CSS-only fix.
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
| ol.chapters { | |
| list-style: none; | |
| margin-left: 0; | |
| } | |
| ol.chapters > li:before { | |
| content: counter(chapter) ". "; | |
| counter-increment: chapter; | |
| font-weight: bold; | |
| float: left; |
trumball
/ CSS Tooltip Hovers
Created
May 24, 2013 19:45
CSS Tooltip Hovers
There are lots of open source jQuery-based tooltips which you can implement on your websites. But CSS-based tooltips are very rare, and this is one of my favorite snippets. Just copy this over into your stylesheet and using the new HTML5 data-attributes you can setup the tooltip text via data-tooltip.
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
| a { | |
| border-bottom:1px solid #bbb; | |
| color:#666; | |
| display:inline-block; | |
| position:relative; | |
| text-decoration:none; | |
| } | |
| a:hover, | |
| a:focus { | |
| color:#36c; |