background preloader

CSS

Facebook Twitter

Burst Title. During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn't paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. They looked like... well they looked like this: Turns out you can do it rather semantically. <h1><a href="#">CSS-Tricks</a></h1> I listed out all the vendor prefixes here because using them is required in "real" usage and I worry about people copying and pasting pseudo code.

I also added some animations to the demo just for fun. View Demo Download Files Share On. Multiple Attribute Values. Elements can have multiple class names. For instance: Then in CSS, you could match that element based on any one of them: .module { }.accordion { }.expand { } You can limit your selectors to match only if several of them are present, for example: // Will only match if element has both .accordion.expand { } But what about other attributes?

Class names are unique in the ability outlined above. This element just has a data-type attribute with a value of "module accordion expand", not three unique values "module", "accordion" and "expand". We could do it by using a "*" substring matching attribute selector which will match if the provided string appears anywhere in the value: [data-type*="module"] { } or only match when multiple of specific "values" are present: [data-type*="accordion"][data-type*="expand"] { } Ever better, use the whitespace separated selector (e.g. [data-type~="accordion"][data-type~="expand"] { } View Demo Works in IE7+ (because IE 7 was first IE to support attribute selectors)

Checkbox Hack. Adobe-like Arrow Headers. Adobe has some pretty cool header bars for modules on their site. The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But let's get super critical of how they did it. First of all, they use a non-sprited image to do it: That means an extra HTTP request just for the headers. We can do it with zero images! The markup for the header is just a title with a link inside: <div class="module"><h2>Community <a href="#">Blue</a></h2></div> Here's the basic setup of the header, with the link on the right with basic coloring, including the straight white line made by a border: Now the trick to getting the arrow within the line is just using CSS triangles applied via the ever-useful pseudo elements.

One significant difference between ours and theirs is that they have a gradient that goes right through the triangle. View Demo Download Files Share On. Public Service Announcement: Watch Your @font-face font-weight. Let's say you're browsing Google Web Fonts for a free font to use on your website. You find one you like... You think it will look nice as headings on your site. So you follow the directions on Google Web Fonts "quick use". 1) Copy/Paste CSS link to page: 2) Copy/Paste font-family CSS to your headings CSS: And alas! You've done it, your headings are now in your specially picked out font: But then you start to notice that the font is a bit muddier than you'd like.

The problem is the font is muddier than you originally saw it, and it's all about font-weight. You see, the default font-weight for headings in browsers is "bold" (or more specifically, 700). You might fall prey to this if: This isn't Google Web Fonts or the font itself's fault. Fixing it is as simple as being specific with your font-weight to match what the font offers. So yeah. This is a problem most common in decorative fonts where it's most common there is only one font-weight available. Share On. Cross Browser HTML5 Progress Bars In Depth. Update (March 9, 2012): I have updated this document to include styling information for Internet Explorer 10. Screenshots of HTML5 progress bars with different styles applied.

Details given below. As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). The HTML: Simple The HTML for a Progress bar is dead simple: <progress max="100" value="60"><strong>Progress: 60% done.

Note that the HTML inside the <progress> tag is the fallback for browsers that do not support it. Note that: A progress bar can also have an “indeterminate” state, which happens when there is no value attribute. <progress max="100"><strong>Progress: 60% done. That’s Too Basic! (Better) Tabs with Round Out Borders. The following is a guest post by Menno van Slooten. You might notice we've been down this road before, but I quite like Menno's approach here.

The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. The markup <ul class="tabrow"><li>Lorem</li><li>Ipsum</li><li class="selected">Sit amet</li><li>Consectetur adipisicing</li></ul> This would be about as basic as you can get.

Getting started To get started, let's get rid of the default <ul> and <li> styling and get these babies in line. LoremIpsumSit ametConsectetur adipisicing Selecting a tab Getting to the bottom of things. HP has a new logo! And they can do it in CSS. Postcard from Paris – css3 keyframes animations in use | PeHaa Blog. Postcard from Paris – css3 keyframes animations in use I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). Click here or on the image to view the animation demo. The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and Android 2.1+ (source Smashing Magazine). We are going to animate 3 elements : the clouds (there are three layers of clouds), the rotating phare light and the Eiffel Tower sparkling.

The html structure is very simple : We will use the following images (I will discuss the sparkling effect a little bit later) Let’s start to complete the css stylesheet : Animating clouds To animate the three layers of clouds independently we use the following keyframes. This way we have defined the property of background-position for the beginning, middle and end of our animation. Animating phare light Adding sparkles. Intro to CSS 3D transforms. Ceaser - CSS Easing Animation Tool - Matthew Lein. Blur Menu with CSS3 Transitions. There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. The Markup Let’s create the HTML structure for our menu first. Now we’ll add some style!

The CSS Now, let’s take a look at each of the seven examples. Example 1. CSS3 Image Styles. When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image.

Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output. 15 Fresh and Powerful CSS3 Tutorials. CSS3 is here, it’s fun, and allows us to evolve the look of the web as we go. Features like gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of more fun. In this post we’ve collected some new and brilliant tutorials that will help you in mastering your CSS3 skills.

We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. There are so many great things we can do with the additional properties and possibilities that CSS3 brings along.

Designing a table is a challenge. During this tutorial we’re going to use CSS3 to create ticket-like tags, without relying on any images. We are going to create some thumbnail hover effects with CSS3 transitions. See how easy is to create a spinning rays animation with a bit of CSS. Imagine a cop drama taking place in the 1930s.