Articles Tagged: Images

filter: sepia(1); – 78% browser support CSS filter effects can be used to apply effects like blur, grayscale, brightness, contrast and hue. I remember a few years ago I was asked to create a blur effect as an element that overlays the page content. CSS was no help as none of the browsers supported blur. […]

A collection of tips to help take your CSS skills pro. Use :not() to Apply/Unapply Borders on Navigation Add Line-Height to body Vertically-Center Anything Comma-Separated Lists Select Items Using Negative nth-child Use SVG for Icons Use the “Lobotomized Owl” Selector Use max-height for Pure CSS Sliders Inherit box-sizing Equal Width Table Cells Get Rid of […]

Table of Contents Positioning Display Floats CSS Selectors Selector efficiency Repaints and Reflows CSS3 Properties CSS3 Media queries Responsive Web Design CSS3 Transitions CSS Animations Scalable Vector Graphics (SVG) CSS Sprites Vertical Alignment Known Issues Positioning CSS Position allows up to 5 different values. But essentially only 4 values are commonly used. div { position: […]

Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this: #box { background: url(icon.png) top left no-repeat, url(texture.jpg), url(top-edge.png) top left repeat-y; } They are comma separated values and there can be as many as you want with different URL’s, positioning, and repeat values. You can even […]

img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: “FlipH”; }