Category Archives: CSS3

@font-face not working in FireFox. Works in Chrome

This from a stackoverflow.com post: The problem was just Firefox messing up with the font-family declaration, this ended up fixing it: body{ font-family:”MyFont” !important; }

Posted in CSS3, HTML/CSS, Web Fonts | Tagged , , , | Comments Off on @font-face not working in FireFox. Works in Chrome

8 simple CSS hover effects

Very cool and easy modern CSS effects: http://www.developerdrive.com/2015/01/8-simple-css-hover-effects/

Posted in CSS3, HTML/CSS | Comments Off on 8 simple CSS hover effects

CSS3 Animations – @keyframes

This post rounds up 10 articles that explain how to use this cool CSS3 feature, each with examples and demos. http://line25.com/articles/useful-links-for-learning-css-keyframes-animation

Posted in CSS3, HTML/CSS | Comments Off on CSS3 Animations – @keyframes

HTML5 Techniques for Optimizing Mobile Performance

This article discusses the bare minimum of what it takes to create a mobile HTML5 web app. http://www.html5rocks.com/en/mobile/optimization-and-performance/

Posted in CSS3, JavsScript, Mobile | Comments Off on HTML5 Techniques for Optimizing Mobile Performance

CSS background cover and contain

This will fill the background with the image. Some parts of the image may be hidden -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-repeat: no-repeat;background-position: top center;background-attachment: fixed;background-image: url(../images/fish.jpg); This will show all of the background image. Unless the images is the same dimensions … Continue reading

Posted in CSS3, HTML/CSS | Tagged , | Comments Off on CSS background cover and contain

Sidebar Transitions – cool CSS nav transitions

http://tympanus.net/Development/SidebarTransitions/

Posted in CSS3, HTML/CSS, HTML5 | Comments Off on Sidebar Transitions – cool CSS nav transitions

Rounded Corners (css)

-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;

Posted in CSS3, HTML/CSS | Tagged , , , | Comments Off on Rounded Corners (css)

box-shadow needs border-collapse: separate to work in IE9

box-shadow: -3px 2px 5px 2px #dbdbdb; border-collapse: separate;

Posted in CSS3, Web Dev | Comments Off on box-shadow needs border-collapse: separate to work in IE9

50 Useful CSS Snippets Every Designer Should Have

Basic to advanced CSS stuff. Read comments, as they offers some additional insight. http://www.hongkiat.com/blog/css-snippets-for-designers/

Posted in CSS3, HTML/CSS, Web Dev | Comments Off on 50 Useful CSS Snippets Every Designer Should Have

10 CSS selectors you shouldn’t code without

http://www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/

Posted in CSS3, HTML/CSS | Leave a comment

CSS3 rotate

transform:rotate(270deg);-ms-transform:rotate(270deg);-webkit-transform:rotate(270deg); of course it doesn’t work in IE 8 and older.

Posted in CSS3 | Leave a comment

Simple jQuery Parallax effect

This simple example will scroll the images inside the “box” DIV at a slower rate than the container. $(document).ready(function() { $(“#box”).scroll(function() { s = $(“#box”).scrollTop(); $(“#box img”).css(“-webkit-transform”,”translateY(” + (s/3) + “px)”); $(“#box img”).css(“-moz-transform”,”translateY(” + (s/3) + “px)”); $(“#box img”).css(“-ms-transform”,”translateY(” + … Continue reading

Posted in CSS3, JavsScript, jQuery | Tagged , , , | Leave a comment

Ultimate CSS Gradient Generator

Cool CSS3 gradient generator: http://www.colorzilla.com/gradient-editor/

Posted in CSS3 | Tagged , , | Leave a comment