Category Archives: CSS3

CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

Conclusion Are CSS animations “bad”? Certainly not. In fact, they’re great for simple transitions between states (like rollovers) when compatibility with older browsers isn’t required. 3D transforms usually perform very well (iOS7 being a notable exception), and CSS animations can … Continue reading

Posted in Animation, CSS3, JavsScript | Tagged , , , , , | Comments Off on CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

Boost Your CSS Animation Performance with the Repaintless.css Library

The FLIP technique Only animate transforms (translate, rotate, scale) and opacity. It’s best to animate absolutely positioned elements https://blog.lunarlogic.io/2016/boost-your-css-animation-performance-with-repaintless-css/

Posted in Animation, CSS3 | Tagged , , , , , | Comments Off on Boost Your CSS Animation Performance with the Repaintless.css Library

Force browser to print background images

I was working on a page with coupons and the coupon had check boxes that the user could check and then print the page to take to the store. I had some trouble styling the checkboxes as the art director … Continue reading

Posted in CSS3, HTML/CSS, JavsScript, jQuery | Tagged , , , | Comments Off on Force browser to print background images

@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