background preloader

Webdevelope (tricks)

Facebook Twitter

Just Starting Out with CSS & HTML - CSS-Tricks. Centering in CSS: A Complete Guide. By Chris Coyier On Centering things in CSS is the poster child of CSS complaining.

Centering in CSS: A Complete Guide

Why does it have to be so hard? CSS Almanac. :placeholder-shown. The :placeholder-shown pseudo-class selects the input element itself when placeholder text exists in a form input.

:placeholder-shown

Think of it as a nice way to distinguish between inputs that are currently showing placeholder text versus those that are not. The idea behind placeholders. Spinny Leaf Menu. Simple and Nice Blockquote Styling. The blockquote displays in standards-compliant browsers with the "big quotes before" effect, and in IE with a thick left border and a light grey background.

Simple and Nice Blockquote Styling

Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote. Example. Rounded Corners. Standard: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ Individual Corners: -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 0; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 30px; -webkit-border-bottom-left-radius: 0; Shorthand: -moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

Rounded Corners

Ribbon. <h1 class="ribbon"><strong class="ribbon-content">Everybody loves ribbons</strong></h1> Protector This technique uses negative z-index values on some of the pseudo elements.

Ribbon

That means that they can go behind other elements that have opaque backgrounds, which ruins the effect. To fix this, you'll need to make sure the immediate parent of the ribbons does not have a background applied and has relative postioning with positive z-index. Use an additional wrapper if needed. Retina Display Media Query. For including high-res graphics, but only for screens that can make use of them.

Retina Display Media Query

"Retina" being "2x": @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } Orientation Lock. Multiple Borders. Using pseudo element(s) You can position a pseudo element such that it's either behind the element, and larger, making a border effect with it's own background, or smaller and inside (but make sure the content gets positioned on top).

Multiple Borders

The element needing multiple borders should have its own border and relative positioning. Multiple Backgrounds Syntax. Media Queries for Standard Devices. If you think responsive's simple, I feel bad for you son.

Media Queries for Standard Devices

We got 99 viewports, but the iPhone's just one. —Josh Brewer, March 10, 2010. Make Non-Password Inputs Use Bullets (or Bullet Alternatives) Make "Pre" Text Wrap. Link Pseudo-Classes (In Order) Glowing Blue Input Highlights. Fluid Typography. Using viewport units and calc(), we can have font-size (and other properties) adjust their size based on the size of the screen.

Fluid Typography

So rather than always being the same size, or jumping from one size to the next at media queries, the size can be fluid. Here's the math, credit Mike Riethmuller: The reason that math is a little complicated is that we're trying to avoid type ever getting smaller than our minimum or bigger than our maximum, which is very easy to do with viewport units. For example, if we want the our font size in a range where 14px is the minimum size at the smallest viewport width of 300px and where 26px is the maximum size at the largest viewport width of 1600px, then our equation looks like this: To lock in those minimum and maximum sizes, using this math within media queries helps.

Fixed Positioning in IE 6. Fixed Footer. Fancy Ampersand. Expanding Boxes Navigation. CSS Triangle. You can make them with a single div.

CSS Triangle

It's nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle. Custom Checkboxes and Radio Buttons. The selectors here are specific to Wufoo markup, but the concepts at work can work for any form. The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with graphics. Then use the :checked selector to alternate the graphics between their checked and unchecked versions.

Custom Radio Buttons. End Articles with Ivy Leaf. Exactly Center an Image/Div Horizontally and Vertically. CSS Only Image Preloading. One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event and thus there will be a short annoying delay between the mouse going over that area and the image actually showing up. Technique #1 Load the image on the element's regular state, only shift it away with background position. Then move the background position to display it on hover. Technique #2.

Corner Ribbon. Change Text Selection Color. Centering a Website. Center DIV with Dynamic Height. Browser Specific Hacks. :placeholder-shown. Sticky Footer. Absolute Center (Vertical & Horizontal) an Image.