background preloader

Ten more CSS tricks you may not know

Ten more CSS tricks you may not know
Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know. 1. Block vs. inline level elements Nearly all HTML elements are either block or inline elements. Always begin on a new line Height, line-height and top and bottom margins can be manipulated Width defaults to 100% of their containing element, unless a width is specified Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Begin on the same line Height, line-height and top and bottom margins can't be changed Width is as long as the text/image and can't be manipulated Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>. To change an element's status you can use display: inline or display: block. 2. padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em; The first width command is read by all browsers; the second by all browsers except IE5.x on PC. 3. 4. 5. Related:  CSS3

How to create CSS style sheets for printing Learn how to use CSS to make a printed page look as good as your on-screen page. Justin James shows you what he did to make this work for one of his development projects. I've been working on a personal project for some time called Rat Catcher. (You can read about my development work on the project in my 10-part series about the OutSystems Agile Platform.) The end goal of any usage of Rat Catcher is to produce a report, and it occurred to me that users might want to print their reports. For a long time now, the sites I've worked on used fluid layouts that worked flawlessly with printers, but Rat Catcher is a different beast. Ensure your HTML works well with CSS The first thing to do is to ensure that your HTML works well with CSS. Wrap all of the content (including navigation, headers, footers, etc.) in a div. This is all common sense, but it is really easy to forget about these details in the rush to get your application in front of people. Understand how the media types work in CSS J.Ja

CSS Gallery Web Design Gallery For Inspiration Create a Masked Background Effect With CSS Today we're going to be stepping through a really cool technique you can use to create an effect that's a little bit like parallax scrolling, yet doesn't need any JavaScript; it can be achieved very simply through pure CSS. Start by checking out the live demo to see what you're going to learn (you'll need to view on a desktop/laptop to see the effect). This technique could be used to create great product description pages, or even something akin to a Powerpoint/Keynote presentation, and would be a great potential fit for online story illustration. Here's how you do it. It's All in the CSS The key to this technique the CSS background-attachment: fixed;, available to us since CSS 2.1. A couple of things to be aware of with this CSS property are that as background images will be fixed relative to the window, their position won't be effected by things like margins in the way a regular background image would. How It's Done The basic steps to achieve what you see in the demo are: 1. Styling 2. 3. 4.

Free CSS templates - Download Free CSS Templates Everything You Need to Know About the CSS will-change Property Introduction If you’ve ever noticed “that flicker” in WebKit-based browsers while performing certain CSS operations, especially CSS transforms and animations, then you’ve most likely come across the term “hardware acceleration” before. The CPU, GPU, and Hardware Acceleration In a nutshell, Hardware acceleration means that the Graphics Processing Unit (GPU) will assist your browser in rendering a page by doing some of the heavy lifting, instead of throwing it all onto the Central Processing Unit (CPU) to do. As their names show, both the CPU and the GPU are processing units. Hardware acceleration (a.k.a. CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. The Old: The translateZ() (or translate3d()) Hack transform: translate3d(0, 0, 0); Hardware-accelerating an operation results in the creation of what is known as a compositor layer that is uploaded to and composited by the GPU. Final Words

30 Exceptional CSS Navigation Techniques We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. 2. View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3. View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. 4. View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. View Demo 6. View Demo 7. View Demo This stylish navigation menu technique uses a CSS sprite. 8. 9.

Cascading SVG Fill Color One time someone told me their biggest problem with SVG icons is that they didn't match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn't think of it at the time, but there is a pretty easy solution for this. The idea is to use the currentColor value in CSS to pass that text color through to the SVG shapes. For instance: <h1><svg viewBox="0 0 32 32"><use xlink:href="#icon-phone"></use></svg> Call Me </h1> You can simplify this and let the fill cascade to the SVG: So fill cascades eh? fill only affects SVG anyway, so it won't be doing anything we don't want it to do, and it's easily overridable by a more specific selector anyway. The trouble is that doesn't quite work as is. Take this example, which is just our original example inside the <body>: <body><h1><svg viewBox="0 0 32 32"><use xlink:href="#icon-phone"></use></svg> You'd think the SVG would fill blue too? Then: Share On

CSS Flip Animation You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations. CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. Quick note: this is not the first tutorial about this effect, but I've found the others over-complicated. The HTML The HTML structure to accomplish the two-sided effect is as you would expect it to be: There are two content panes, "front" and "back", as you would expect, but also two containing elements with very specific roles explained by their CSS. The CSS I'm willing to bet that outside of the usual vendor prefix bloat, you'd be surprised at how little CSS is involved: Here's a rough overview of the process:

How to Center Anything with CSS Updated March 24, 2016. If you've ever had to build a webpage, you have likely needed to center something in that page. Using Cascading Style Sheets (CSS) is the proper way to center images, blocks of text, and even your entire layout for a Web page. Most of the properties for centering have been in CSS since version 1.0, and they work great with CSS3 and modern Web browsers. Let's take a look at some different ways to use CSS to center certain elements in a Web page. On Overview of Using CSS to Center in HTML Centering with CSS can be a challenge for beginning Web designers because there are so many different ways to accomplish this, but not all techniques work on every element. At a high level, you can use CSS to: Center textCenter a block-level element (like a division) continue reading below our video Play Video Center an imageVertically center a block or an image Centering Text with CSS The easiest thing to center on a webpage is text. <p class="center">This text is centered.

Multi-Device Layout Patterns Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts. To get a sense of emerging responsive design layout patterns, I combed through all the examples curated on the Media Queries gallery site several times. I looked for what high-level patterns showed up most frequently and tried to avoid defining separate patterns where there were only small differences. Mostly Fluid The most popular pattern was perhaps surprisingly simple: a multi-column layout that introduces larger margins on big screens, relies on fluid grids and images to scale from large screens down to small screen sizes, and stacks columns vertically in its narrowest incarnations (illustrated below). Column Drop Layout Shifter

Flexible CSS cover images I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation. Demo: Flexible CSS cover images Known support: Chrome, Firefox, Safari, Opera, IE 9+ Features The way that the cover image scales, and changes aspect ratio, is illustrated in the following diagram. The cover image component must: render at a fixed aspect ratio, unless specific maximum dimensions are exceeded;support different aspect ratios;support max-height and max-width;support different background images;display the image to either fill, or be contained within the component;center the image. Aspect ratio The aspect ratio of an empty, block-level element can be controlled by setting a percentage value for its padding-bottom or padding-top. Changing that padding value will change the aspect ratio. Maximum dimensions Background image Final result

Type Rendering Mix