Borderとtransitionを使ったエフェクト. Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet) Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to: Performance — IDs are “the fastest way a browser can select a given element”If they’re already in the markup it’s best to use them for CSSI’ve been using IDs like forever… waddya mean I shouldn’t use them!? Performance # It’s a common belief that ID selectors are the fastest, but this comes with a big caveat: IDs are fastest CSS selector only if they’re the key selector.
#home a {…} We’d generally read this selector as find the element with id="home", then apply these styles to every a it contains. Conclusion # CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).
Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. However, please bear in mind that I can't accept all submissions, sorry for that. For a pattern to be accepted, the following factors are considered (in descending order of importance): Does it present a new technique? CSS3 Demos | Demo Studio | Mozilla Developer Network. LESS CSS Minify Integration through LessCSS and LessPHP | Yet Another Angry Web Developer. CSS Modal. Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment Modal experiment updated for Firefox 10 which has better transform, transition and animation performance.
Also supports 3D transforms. In this experiment, clicking an ‘open’ link pops up a dialogue with a smooth hardware accelerated bounce (where supported). When open all other elements on the page are non-clickable. Closing the modal is also animated, with a minimise effect. Of course, using images and JS will only make the modal better, and something like hitting ESC to close will never be reproduced in CSS. How to The :target pseudo-selector changes the style of a targeted element. The modal is two parts, one part container, one part content. The content is positioned roughly in the middle and is prettified with a sprinkling of text shadow, border radius, box shadow and gradient. Caveats. Flexible Box Model. CSS3 Aqua Button.