background preloader

* { box-sizing: border-box } FTW - Paul Irish

* { box-sizing: border-box } FTW - Paul Irish
One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Anyway, I have a recommendation for your CSS going forward: This gives you the box model you want. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. Is it safe to use? Totally. jQuery works pretty great with it (except this). One of my favorite use-cases that border-box solves well is columns. Performance Lastly on @miketaylr’s inquiry, I also tested perf overhead.

http://paulirish.com/2012/box-sizing-border-box-ftw/

Related:  More CSSdiseño webCSS

Perfect Full Page Background Image This post was originally published on August 21, 2009 and is now being being republished as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn't some fancy shenanigans like Flash

Meet the Pseudo Class Selectors Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { /* Yep, hover is a pseudo class */} They are immensely useful in a variety of situations. Inheriting box-sizing Probably Slightly Better Best-Practice I'm a big fan of resetting box-sizing to border-box, so much that we have a special day of the year around here. But there is a little adjustment to setting it that seems like a pretty good idea. Here's the adjusted version: Box Sizing The box-sizing property can make building CSS layouts easier and a lot more intuitive. It's such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February. But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history. Box Model History Since the dawn of CSS, the box model has worked like this by default:

» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog Hay, I wrote this in 2012! I still like the notion of the metaphorical connection between content-based sizing units (e.g. ems) and layout definitions (e.g. breakpoints). And the zooming behavior cited here was always meant more as a sidelong example than a core argument. Nonetheless! Quick Reminder About File Paths Whenever I have a problem with an image "not showing up" on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning that it doesn't start with I pay extra close attention to the relationship of where the file is that is referencing the image, and where that image actually is. Is the image in the same directory as the file referencing it?

Shorthand properties Definition Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously. Using a shorthand property, a Web developer can write more concise and often more readable style sheets, saving time and energy. CSS Circles A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape that's easy to create, and that is the circle. Using border-radius, you can create wonderful CSS circles. Setting the border-radius of each side of an element to 50% will create the circle display at any size: Re: pointer-events from Jukka K. Korpela on 2012-11-21 (www-validator-css@w3.org from November 2012) 2012-11-20 15:07, Marco Schaub kirjoitti: > I just checked my page redseen.3owl.com with the css validator. > > I got this error: [...] > Property pointer-events doesn't exist : none > > Why is this shown as an error? Because no CSS specifications currently define the pointer-events property. It is defined in SVG 1.1, but the use of pointer-events in CSS for non-SVG elements is experimental.

Actions Emmet allows you to write large HTML code blocks at speed of light using well-known CSS selectors. But it’s not the only thing that every web-developer needs: occasionally you have to edit your HTML and CSS code to fix bugs and add new features. Emmet offers very unique tools that can greatly improve your editing experience: Expand Abbreviation Yep, this is the action that expands CSS-like abbreviations into HTML code. Match Tag Pair

Topic: making logo be in the middle of the nav bar Hi there, Thanks for writing in! This isn’t a default feature offered by X, but it could be possible with custom development. But regretfully, it will fall beyond the scope of support we can provide as this requires good deal of code changes. :required The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be the sole validator of the user's input. Let's say we have an input with an attribute of type="name" and make it a required input using the required boolean attribute1: Now we can style that input using the :required pseudo class selector: We can also style required form fields using simple selectors as well as chaining together additional pseudo class selectors:

CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More The following is a guest post by Zach Saucier. Zach cooks up some pretty inspiring animations over on CodePen. I couldn't be happier that he wanted to share some of the tricks he uses to create them, especially because they are things we all strive for: efficiency, reusability, practicality, and speed. I've fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I've found some tricks to make CSS do things you might not know it could do. I'd like to share them with you.

Centering in CSS: A Complete Guide Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for. So let's make it a decision tree and hopefully make it easier.

Related: