Get flash to fully experience Pearltrees
Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples. View demo Download source Today we are going to create some fancy block quote styles. Using textures, circles, and pseudo-elements, we can put some life into quotations and testimonials.
Once again, after reading somebody else's article , I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food.
Published by Chris Coyier Pseudo class selectors CSS selectors with a colon preceding them. You are probably very familiar with a few of them.
The recent browser versions of Firefox, Google Chrome, Internet Explorer, Opera and Safari are now supporting much of the CSS3 spec. Here I am going to describe the table display property. To align data in a tabular structure we have previously used tables using the HTML tags <table>, <tr>, <td> , nonetheless we all know that by using that we are violating the latest web standards, right? So I’m just going to introduce you a new way to code it using nothing else than div tags with the CSS3 table layout, so that the data will appear just like a table.
Page last changed today Only Safari supports multiple background images. Explorer Mac shows the second background image. This is a test page for multiple backgrounds on one element. The test DIV below has two background images.
This Is How We Do It Using CSS animations in Safari, we're able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome. Don't see the radioactive above?
Published by Chris Coyier These "sliding" style navigation bars have been around a while, I just thought I'd take a crack at doing it myself as the opportunity came up recently. Turns out it's really pretty darn easy. I put two examples together for it. The Idea
Note: The files "reset.css" and "reset-context.css" are deprecated, use "cssreset.css" and "cssreset-context.css" instead. The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to build upon.
Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em
Rem - CSS3's alturnative to the em. An overview of this new method of controling front sizes. by Mar 14
Home / CSS3 Previews / Box-shadow, one of CSS3′s best new features The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset. Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix). Here’s a basic example: Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box.
Published by Chris Coyier 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 space Scales image as needed Retains image proportions (aspect ratio) Image is centered on page Does not cause scrollbars As cross-browser compatible as possible Isn't some fancy shenanigans like Flash