demsone
demsone
/ Scroll to top
Created
June 19, 2013 00:30
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
| // HTML: | |
| // <h1 id="anchor">Lorem Ipsum</h1> | |
| // <p><a href="#anchor" class="topLink">Back to Top</a></p> | |
| $(document).ready(function() { | |
| $("a.topLink").click(function() { | |
| $("html, body").animate({ | |
| scrollTop: $($(this).attr("href")).offset().top + "px" | |
| }, { |
demsone
/ Media Queries for Standard Devices
Created
June 17, 2013 04:33
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
| /* Smartphones (portrait and landscape) ----------- */ | |
| @media only screen | |
| and (min-device-width : 320px) and (max-device-width : 480px) { | |
| /* Styles */ | |
| } | |
| /* Smartphones (landscape) ----------- */ | |
| @media only screen and (min-width : 321px) { | |
| /* Styles */ | |
| } |
demsone
/ CSS Clearfix
Created
June 17, 2013 04:33
This clearfix code has been around the Web for years circulating amongst savvy web developers. You should apply this class onto a container which holds floating elements. This will ensure any content which comes afterwards will not float but instead be pushed down and cleared.
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
| .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } | |
| .clearfix { display: inline-block; } | |
| html[xmlns] .clearfix { display: block; } | |
| * html .clearfix { height: 1%; } | |
| /* 2011 Version */ | |
| .clearfix:before, .container:after { content: ""; display: table; } |
demsone
/ Vertically Centered Content
Created
June 17, 2013 04:32
Using the margin: 0 auto technique it is very easy to embed content into the horizontal center of your page. However vertical content is a lot harder, especially considering scrollbars and other methods. But this is a pure CSS solution which should work flawlessly without JavaScript.
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: 6.5em; | |
| display: table-cell; | |
| vertical-align: middle; | |
| } |
demsone
/ Inner CSS3 Box Shadow
Created
June 17, 2013 04:31
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; | |
| } |
demsone
/ Outer CSS3 Shadow
Created
June 17, 2013 04:30
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. You can learn more about these values from W3Schools.
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); | |
| } |
demsone
/ CSS3 Column Text
Created
June 17, 2013 04:30
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; | |
| } |
demsone
/ Sticky Footer
Created
June 17, 2013 04:29
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.
demsone
/ Cross-Browser Minimum Height
Created
June 17, 2013 04:28
Developers who have needed to work with min-height know all about the shady support. Many newer browsers can handle this perfectly, however Internet Explorer and older versions of Firefox do have trouble. This set of codes should provide a fix to any related bugs.
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; | |
| } |
demsone
/ Make “Pre” Text Wrap
Created
June 17, 2013 04:27
Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.
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
| /* Browser specific (not valid) styles to make preformatted text wrap */ | |
| 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+ */ | |
| } |