background preloader

Kick-Start Your Project: A Collection of Handy CSS Snippets

Kick-Start Your Project: A Collection of Handy CSS Snippets
Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. I hope you made your own set of patterns! Today we are going to see how we can continue this exercise with some things a little bit more technical. Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Of course you do my friends! Before we go, let me tell you how I divided this article: Shorthand classes Let’s begin with shorthand classes, which are a very common things. The best example is probably the one where you have some text and an image you want to include on the left side of the text. Miscellaneous Related:  CSS

Some Useful JavaScript & jQuery Snippets - Part 3 How to hide all children div except a specific one with jQuery? $('#target div:not(#exclude)').hide(); //or $('#target').children().filter(':not(#exclude)').hide(); Detecting when a div’s height changes using jQuery $('element').bind('resize', function(){ alert( 'Height changed to' + $(this).height() ); } Delete all table rows except first $('someTableSelector').find('tr:gt(0)').remove(); Selecting root element of a certain level in the document 1 level: $('*:not(* *)'); […] How to hide all children div except a specific one with jQuery? Detecting when a div’s height changes using jQuery Delete all table rows except first Selecting root element of a certain level in the document Searching a string in jQuery Get the distance scrolled from top Select all elements except the ones with a given classAdd a row to a table How to convert decimal to hexadecimal? Filtering By More Than One Attribute in JQuery How to expire a cookie in x minutes Selecting the first x items with jQuery

Create Shaped Avatars With CSS and Webkit In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past. Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Warning: Webkit Only Today’s project is merely a fun look forward at a design trend that you’ll no doubt see pop up as CSS masking improves in the future. Method 1: Webkit Masks The first method that we’re going to use is pretty straightforward. Grab Two Images To begin, you need two images. Once you have the avatar picked out, it’s time to build your mask. Keep in mind that things will go smoother if your photo and mask are as close in size as possible. Implementing the CSS mask method is crazy easy. Demo That’s all there is to it! Hold the Phone

Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.

css Visual thesaurus using arbor.js Wow, I can’t believe we are at the end of January – one twelfth of the year gone already! I’ve been so busy this month I’ve barely had time to sit down and work on any personal projects. Thankfully I had a spare few hours over the weekend to work on a project I’ve been meaning to finish for a couple of weeks: a visual thesaurus using JavaScript. Visual thesaurus representation of the word 'clean'. You may (or may not) know of the Visual Thesaurus by Thinkmap; very useful but it’s a paid for service, I use it so infrequently I can’t justify paying for it (there is a free trial though). Arbor.js took a little getting used to as it uses a mixture jQuery, canvas and its own methods; but there’s a fairly extensive set of documentation and a set of usage examples. So to the demo; I’ve tried to keep it very simple to use. Any suggestions, comments or feature improvements please leave a comment below!

How nth-child Works There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. As seen in the first example, nth-child also accepts expressions in between those parentheses. Let's get back to the "3n+3" from the original example though. (3 x 0) + 3 = 3 = 3rd Element (3 x 1) + 3 = 6 = 6th Element (3 x 2) + 3 = 9 = 9th Element etc. How about the :nth-child(2n+1)? (2 x 0) + 1 = 1 = 1st Element (2 x 1) + 1 = 3 = 3rd Element (2 x 2) + 1 = 5 = 5th Element etc. Hey wait! (3 x 0) = 0 = no match (3 x 1) = 3 = 3rd Element (3 x 2) = 6 = 6th Element (3 x 3) = 9 = 9th Element etc. So as you can see, the matches are exactly the same, no need for the "+3". Share On

Increasing the Clickable Area of Inline Links Demo It has been best prac­tice for some time now to ensure that nav­ig­a­tion links have appro­pri­ate pad­ding. This makes click­ing these links much easier, espe­cially if you are on a mobile device. Here is an art­icle, writ­ten four years ago, dis­cuss­ing this very idea. Why aren’t we tak­ing this one step fur­ther? Links don’t only exist in menus, and inline links can be tricky to click accur­ately. Now keep in mind that this is only a thought. The trick is to be subtle with this tech­nique; increase the click area enough that users don’t have to be 100% accur­ate, but don’t increase it too much so that the beha­vior becomes unex­pec­ted. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this tech­nique? Tweet this

Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox

Arbor Js - Node Onclick Step by step CSS float tutorial Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9.

LESS « The Dynamic Stylesheet language Code smells in CSS 20 November, 2012 Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? I thought I would extend Chris’ great answer with my own, additional take on things… My day-to-day life is spent working in-house at BSkyB… I work on big websites, the last of which took me over a year to build the front-end for (and it’s still ongoing). I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity… Undoing styles Any CSS that unsets styles (apart from in a reset) should start ringing alarm bells right away. Any CSS declarations like these: border-bottom:none; padding:0; float:none; margin-left:0; …are typically bad news. Here we have ten lines of CSS and one ugly class name. Magic numbers These are a particular bugbear of mine. ! ! IDs

Checking if an element is visible on-screen using jQuery by Sam Sehnert Download jQuery VisibleView Demo We recently built a little jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true. ? This method differs from the jQuery :visible selector in that visible checks to see whether the element is hidden using css (basically if offsetWidth or offsetHeight is 0). Usage In its simplest form, the element can be used as follows: $('#element').visible() This method will return true if the entire element is visible (I.e., it will return false if any part of that element is outside the viewport.Passing true to the ‘visible’ method, will tell the plugin to return true if ANY part of the element is visible on the users screen. $('#element').visible( true ) Limitations The plugin ignores the elements visibility (E.g., display:none; visibility: hidden; offsetWidth or offsetHeight is 0). $('#element:visible').visible()

CSS Click Events An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifications. We can now do a lot of stuff we couldn’t have done without JavaScript or images before, like rounded corners, gradients, responsive layouts, grid stuff, transparency in colors, and so much more. But one thing we’ve always been missing is the possibility to handle click events with CSS. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. Disclaimer This blog post is about showing the possibilities of CSS and some clever hacks. Plus, some of these techniques are not well supported by browsers, meaning it’s even more borderline; we intend to have some fun pushing the limits of CSS. Checkbox hack Aaaaah, the checkbox hack. Pros

Related: